Theming in Figma

Most of the time you would need to use Reshaped with a custom theme that matches your brand. By default Reshaped is using styles from the default theme, so a good starting point is usually to create a custom theme and apply it to the library. To achieve that, you can follow these steps:

This approach works the best when you only have one theme in your product, but it has to be different from the default Reshaped theme.

When using any Figma library together with theming – you would notice that components will switch back to their default theme when working with their properties. In case your product relies on a custom theme you've created and you want all components to use it by default – you can apply the theme directly to the Figma library and publish it with the theme applied. To achieve that, you can follow the same approach as when your applying a theme to your product but do it inside the library file itself.

Depending on your Figma license and your theming requirements, you can use either of the following options to create multiple themes.

The easiest way to switch between themes in Figma and do it natively is by using Figma variable modes. However it comes with a few limitations:

There is a limitation of 4 modes per file when using the Team plan. This means that you will be able to work with 2 themes maximum, considering that each has 2 color modes. If you're on the Enterprise plan, you have a limitation of 40 modes, which means you can create up to 20 themes.

Another limitation is that you can only switch variables with modes, but not styles. It means that you can only change the values for the colors, border radius and spacing this way. Typography and effects have to stay the same in all themes.

If it's fine for you to stay within these boundaries – using variable modes is a solid option.

In case you don't fit into the requirements of using variable modes, you can create themes as separate files. It means that you will still use Figma variables but only for defining the color modes within the theme.

To use this approach, you should:

We've built a Figma plugin that lets you switch between multiple style libraries. It works locally and does it blazingly fast. It supports theming for color, text, and effects, as well as Figma variables. Download it from the Figma Community.

When we first launched Reshaped, it relied on external plugins, but soon enough, the community was reporting that something didn't work or wasn't intuitive enough. We decided to build a simple plugin that covers the basics, doesn't require complex integration or intricate token setup: open the plugin, sync styles and apply a theme. That said, we can still recommend other plugins like Tokens Studio.

That's pretty much everything you need to know. We hope you enjoy using Reshaped!