Tokens Studio for Framer Plugin

Tokens Studio for Framer is a Framer plugin designed to allow teams to export their design tokens to Framer Styles. It ensures your design tokens are always structured and accessible within your Framer files, reflecting updates made in Studio.

Setting up Tokens Studio for Framer

1

Install and launch the plugin

• Go to your Framer project.

• Click on Plugins option.

• Search for Tokens Studio for Framer.

• Click on the plugin to launch it.

2

Syncing Design Tokens from Studio

• On launching the plugin, it will ask for the API key from Studio.

• Follow the steps here to generate an API key on Studio.
• Enter the API key in the required field to connect to Studio.

• Select the Organisation and Project that you want to connect.

• The themes will be available in the plugin.

3

Creating Framer styles

• Select the main theme that you want to export.

• Framer styles currently supports color and typography design tokens. Framer also supports light and dark themes at the moment.

• Select the theme that map will map to light and dark themes in Framer.

• Select other modes that will be static.

• Click on Create button. The color and typography styles will be created.

4

Checking the themes

• Apply the color styles and typography in your designs.

• Switch to dark mode to see your designs in dark mode.

5

Exporting other modes

• To export other modes, open the Tokens Studio plugin.

• Select another mode and click create.