Tokens Studio integration
For bigger teams, we recommend to look into more sophisticated Figma theming plugins. The most common approach right now is to use Tokens Studio, which lets you import the themes data from the style libraries and store themes using an external storage. It means that all your team members will be able to fetch the tokens from a single storage and automatically receive updates in the future.
For the best experience of working with themes, we recommend using the Pro version of the Tokens Studio, since it provides multiple important features. Let's go through the typical setup of the plugin with Reshaped.
Start with enabling an external storage of your choice to store the tokens data. On the screenshot we use Github for storing the themes since it provides a more granular control over fetching and uploading the tokens data.
- Open the plugin settings and press the "Add new" button in the sync providers section
- Fill the form with the data from the picked sync provider
- This should switch you to the new provider. In case your data is not syncing at some point in the future, come back here to check if the sync provider is active.
For more detailed steps, check the official Tokens Studio documentation:
Now that synchronization is ready, you can start adding the themes to the plugin. Note that we're using the Pro version of the plugin in this example, since it gives us access to swapping native Figma styles and theme management feature.
- Open the Reshaped light mode library. Make sure that it was published as a library during the installation steps.
- Enable the "Swap styles" setting in the bottom right corner of the plugin.
- Add a new empty token set to the list.
- Open the "Styles" menu and "Import styles" there to add all values to the light token set.
- In the theme management menu, create a new theme using the light token set.
- In the same menu, edit the created theme, select styles tab and attach the styles listed there. This way plugin will be able to swap native figma styles.
- Sync the data with your external storage
- Repeat the same for the dark mode
With both color modes added, you can now go to any other file and start using the plugin there. Make sure that your plugin is still using the same sync provider in those files.
You can switch the theme in the theme management menu and picking a different page. That should automatically switch styles in your file.