diff --git a/packages/paste-website/src/pages/introduction/for-designers/design-guidelines/index.mdx b/packages/paste-website/src/pages/introduction/for-designers/design-guidelines/index.mdx index 6bc982cabc..feec9c0c80 100644 --- a/packages/paste-website/src/pages/introduction/for-designers/design-guidelines/index.mdx +++ b/packages/paste-website/src/pages/introduction/for-designers/design-guidelines/index.mdx @@ -86,6 +86,14 @@ The following are the main libraries we recommend you have enabled for each Figm - [Segment Design Library](https://www.figma.com/file/4tOxLhDIMO2MYvF925RQKc/Segment-Design-Library?type=design&mode=design&t=UNWt1yAShGOocSFf-0) for teams with Segment projects, managed by the Segment team. - [File and Cover Sheet Template](https://www.figma.com/file/RfZYRjUH56rZ0qe0veqRJA/File-and-Cover-Sheet-Template) +#### How to swap themes + +The main Paste Components Figma library includes variables in our most-used themes as modes. Check out [Figma's documentation on switching modes](https://help.figma.com/hc/en-us/articles/15343816063383-Modes-for-variables#h_01H3ADKDF7JBTRV1Z5P1X1DZVE) to learn how to swap from the default "Twilio" theme mode to other modes like "Evergreen" for the Segment transition and "Default" for the legacy visual style. + +As long as every part of your UI (even the white background fill on your frames) is referencing our design tokens in Figma, swapping between modes (i.e., themes) will work smoothly. Your design files will be 1-to-1 with the components your engineering team uses, which makes upgrading, migrating, and switching visual themes in both code and design effortless. + +Switching modes won't work for *detached components* that use raw hex codes, for example, because Figma won't know what to swap them to and you are *no longer using Paste*. + --- ### Library updates diff --git a/packages/paste-website/src/pages/theme/changing-theme.mdx b/packages/paste-website/src/pages/theme/changing-theme.mdx index 3a60d22c29..a54870712e 100644 --- a/packages/paste-website/src/pages/theme/changing-theme.mdx +++ b/packages/paste-website/src/pages/theme/changing-theme.mdx @@ -82,7 +82,9 @@ import {Customization} from '@twilio-paste/core/customization'; The main Paste Components Figma library includes variables in our most-used themes as modes. Check out [Figma's documentation on switching modes](https://help.figma.com/hc/en-us/articles/15343816063383-Modes-for-variables#h_01H3ADKDF7JBTRV1Z5P1X1DZVE) to learn how to swap from the default "Twilio" theme mode to other modes. -As long as every part of your UI (even the white background fill on your frames) is referencing tokens in Figma, swapping between modes will work smoothly. Switching modes won't work for raw hex codes, for example, because Figma won't know what to swap them to. +As long as every part of your UI (even the white background fill on your frames) is referencing our design tokens in Figma, swapping between modes (i.e., themes) will work smoothly. Your design files will be 1-to-1 with the components your engineering team uses, which makes upgrading, migrating, and switching visual themes in both code and design effortless. + +Switching modes won't work for *detached components* that use raw hex codes, for example, because Figma won't know what to swap them to and you are *no longer using Paste*.