How do I apply the Default theme in Figma? And more questions about theming

[bchicca]

Hello,
I'm from the Flex UX team, more details about my question here.
It's rather urgent please, thanks!

[SiTaggart]

Hi there

Aside from product limitations, once a product has adopted the Design System and its components, swapping the theme those components are rendered with, within Figma and React is a small, and straight forward change.

In Figma, using the new Components library, you should be able to use the Figma library swapping feature to switch between the default, dark, twilio and twilio dark themes. We have included a brief demonstration video here, but the direct link is also:

https://www.loom.com/share/010ce7d1aa9b45c3bb3629aa5ce6a961

In code, swapping the theme, is as simple as swapping a single prop on the theme provider.

import {Theme} from '@twilio-paste/theme';

<Theme.Provider theme="default">
  <App />
</Theme.Provider>;

The documentation for code.

It should be noted that all the themes will ultimately converge into two main themes in the future; Twilio Light, Twilio Dark, and we will be retiring all other themes including the current default themes. A very detailed explainer can be found in this discussion.

[bchicca]

Thanks Simon, The video was super helpful. I'm running into an issue though, the text styles are not recognised: https://www.figma.com/file/GXchDd6E7Qx6FPTh1DKMc1/Virtual-agent?type=design&node-id=1052%3A72179&mode=design&t=IDKIHwMBQeXYxlxO-1 What should I do to fix this? Thanks, Barbara

…

On Fri, Jul 21, 2023 at 1:53 AM Simon Taggart ***@***.***> wrote: Hi there Aside from product limitations, once a product has adopted the Design System and its components, swapping the theme those components are rendered with, within Figma and React is a small, and straight forward change. In Figma, using the new Components library, you should be able to use the Figma library swapping feature to switch between the default, dark, twilio and twilio dark themes. We have included a brief demonstration video here, but the direct link is also: https://www.loom.com/share/010ce7d1aa9b45c3bb3629aa5ce6a961 <https://urldefense.com/v3/__https://www.loom.com/share/010ce7d1aa9b45c3bb3629aa5ce6a961__;!!NCc8flgU!aCpk6CUMcR-i9iaFFvRlNxzaeeqpd1SlHaUH_RquMrQXwg8N1eNTlLILzLqcGcc6mLfN_Vw44D_M0rg9PPfxZjQ$> In code, swapping the theme, is as simple as swapping a single prop on the theme provider. import {Theme} from ***@***.***/theme'; <Theme.Provider theme="default"> <App /></Theme.Provider>; The documentation for code <https://urldefense.com/v3/__https://paste.twilio.design/theme/changing-theme__;!!NCc8flgU!aCpk6CUMcR-i9iaFFvRlNxzaeeqpd1SlHaUH_RquMrQXwg8N1eNTlLILzLqcGcc6mLfN_Vw44D_M0rg9hQQTchw$> . It should be noted that all the themes will ultimately converge into two main themes in the future; Twilio Light, Twilio Dark, and we will be retiring all other themes including the current default themes. I very detailed explainer can be found in this discussion <https://urldefense.com/v3/__https://github.com/twilio-labs/paste/discussions/3026__;!!NCc8flgU!aCpk6CUMcR-i9iaFFvRlNxzaeeqpd1SlHaUH_RquMrQXwg8N1eNTlLILzLqcGcc6mLfN_Vw44D_M0rg9Wvt11lY$> . — Reply to this email directly, view it on GitHub <https://urldefense.com/v3/__https://github.com/twilio-labs/paste/discussions/3336*discussioncomment-6504267__;Iw!!NCc8flgU!aCpk6CUMcR-i9iaFFvRlNxzaeeqpd1SlHaUH_RquMrQXwg8N1eNTlLILzLqcGcc6mLfN_Vw44D_M0rg9T3Vk1us$>, or unsubscribe <https://urldefense.com/v3/__https://github.com/notifications/unsubscribe-auth/A3GKSQSOZL6BL4423M7UXLDXRHAIHANCNFSM6AAAAAA2P477NE__;!!NCc8flgU!aCpk6CUMcR-i9iaFFvRlNxzaeeqpd1SlHaUH_RquMrQXwg8N1eNTlLILzLqcGcc6mLfN_Vw44D_M0rg9dnutB6U$> . You are receiving this because you authored the thread.Message ID: ***@***.***>

-- Barbara Chicca Product Designer [image: %(logoAlt)s] <https://www.twilio.com/?utm_source=email_signature> EMAIL ***@***.***

[SiTaggart]

Right now, you should be using the "Sunset" Library, which has full support for the Default theme. It's more reflective of the version that is available in the product itself, as it's 4 major versions behind. This will help prevent you using components that aren't actually available to the engineering team yet.

Hopefully that should solve the missing text styles.

We weren't planning on adding old theme support to the new components, and I think that stance still holds true as the best approach. We don't actually want to be supporting multiple design languages, it's duplicative and redundant work, that's not the purpose of a design system. It's about helping products migrate to updated, improved and more cohesive product experiences.

Product teams should be aiming to get themselves into a "good state" so that you can adopt the updated design language and use the new components in their entirety.