Variable and Style Swapper

About this plugin

❗ Currently in BETA - let me know in comments below if you find bugs!

Instantly switch to a different theme by swaping variables and styles in your screens/components.

How it works:

1. Create your styles and variables having a theme name as a top folder name, e.g.:

2. Use your theme variables and styles in components and screens.

3. Select any element (component, frame, or text)

4. Pick themes to swap from and to (e.g. "ThemeB" → "ThemeC")

5. Swap all variables and styles within a selection with just one click!

Save time and effort in your design process by quickly adapting your screens to various themes.

Unlike Figma Modes, this gives you unlimited amount of Themes you can create and use!

---

Supported Figma Variables:

1. Fill color
2. Stroke color
3. Stroke width
4. Gradient stop color
5. Corner radius
6. Shadow color
7. Size
8. Gap, Padding
9. Opacity
10. Show/Hide
11. Component prop binds

Supported Figma Styles:

1. Color
2. Text
3. Effect

Will be adding more, let me know if something is not working as expected!

Enjoy! 😎