Documentation: Theme Switching

[gossi]

Switching themes is nowhere greatly documented apart from this article: https://gos.si/blog/full-featured-themes-in-figma/

Setup:

1. One or many theme files (one file per theme)
2. One Component file

Workflow for switching themes in your component library:

1. Theme document:
   a. Define design tokens
   b. Define contexts
   c. Create references
   d. Publish styles (Figma will prompt you)
   e. Create theme in Themer (or update existing one)
2. Component document:
   a. Update imported styles (Figma will prompt you)
   b. Open Themer
   c. Select theme and apply it to the page

Workflow for switching the context in your component library:

1. Theme document:
   a. Open Style References plugin
   b. Switch context
   c. Publish styles (Figma will prompt you)
2. Component document:
   a. Update imported styles (Figma will prompt you)

---

A limitation is this: You cannot change the context of a theme from the component document - will be tackled by #9

[gossi]

Instead of Themer, Figma is natively supporting swap libraries.

[iDVB]

Workflow for switching the context in your component library:

1. Theme document:
   a. Open Style References plugin
   b. Switch context
   c. Publish styles (Figma will prompt you)
2. Component document:
   a. Update imported styles (Figma will prompt you)

@gossi If I understand this correctly, it seems like if we have...

• 2x themes (RedTheme, BlueTheme)
• 1x Design System
• 2+ consuming projects (RedProject, BlueProject)

...then when we switch the context and publish the styles (Red -> Blue) then all our existing projects will change to be Blue?
I think I'm still unclear how this works and allows us to only have a single Design System, multiple themes and multiple projects that are locked to a specific theme and using that Design System.

Thanks for helping me through this!

[gossi]

The setup you are describing is so extremly valid, it is so obvious, that I haven't thought about that. I was only testing it with one product in mind. That said, I tried to re-create that situation and ended up failing for two reasons:

• I'm only a free user, exporting a component is only available on paid plans
• I tried swapping libraries but this is also only available on paid plans

So, I only have the situation of two themes and a component file. I know I can swap between them using themer. I am wondering, if figma is offering open source plans. I will reach out.

For the time being, I'm sorry, I can neither test nor verify this and provide additional help onto this. We must be patient now.

[gossi]

That video should help you going I think: https://www.youtube.com/watch?v=9Kq33r_gq0E

I've written new docs for the figma plugin (will be on the docs for the whole theemo project). I gave some advice to using and sharing themes within figma and also to this issue. But best answer is this video above.

[gossi]

Done here: https://theemo.io/design/figma/best-practices