# 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.

<figure><img src="https://3657049418-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy0SFXZjN1sdgdxYM7QPE%2Fuploads%2FNpHzN6cM0ZSzP8WPxlTR%2FCOVER%20-%20Framer%20Plugin.png?alt=media&#x26;token=ba53205c-e1c7-4f19-ab21-8267ca81a250" alt=""><figcaption></figcaption></figure>

### Setting up Tokens Studio for Framer

{% stepper %}
{% step %}

### Install and launch the plugin

* Go to your Framer project.
* Click on **Plugins** option.
* &#x20;Search for **Tokens Studio for Framer**.&#x20;
* Click on the plugin to launch it.

<figure><img src="https://3657049418-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy0SFXZjN1sdgdxYM7QPE%2Fuploads%2F5Q6iyCy09Jo3AtXIEAzX%2FCleanShot%202025-04-09%20at%2017.26.21%402x.png?alt=media&#x26;token=588d285c-f7b1-4685-89d2-2e2325f0e76c" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Syncing Design Tokens from Studio

* On launching the plugin, it will ask for the API key from Studio.
* Follow the steps [here](https://documentation.tokens.studio/settings/api-keys) to generate an API key on Studio.
* Enter the API key in the required field to connect to Studio.

<figure><img src="https://3657049418-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy0SFXZjN1sdgdxYM7QPE%2Fuploads%2FRTI2BcYPv25hOIUwBqXP%2FCleanShot%202025-04-07%20at%2018.01.09%402x.png?alt=media&#x26;token=77d6da80-25a2-4637-9398-749de278a319" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3657049418-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy0SFXZjN1sdgdxYM7QPE%2Fuploads%2FpaLWdC2VefzILqvGHXtB%2FCleanShot%202025-04-07%20at%2018.50.52%402x.png?alt=media&#x26;token=1103aa97-85fb-4702-b9e5-ee91d40a162d" alt=""><figcaption></figcaption></figure>

* The themes will be available in the plugin.

<figure><img src="https://3657049418-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy0SFXZjN1sdgdxYM7QPE%2Fuploads%2Fv80F0spoKkCMnebMWQMY%2FCleanShot%202025-04-07%20at%2018.53.44%402x.png?alt=media&#x26;token=3797dc28-edf0-467a-b064-396529a15db4" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Creating Framer styles

* Select the main theme that you want to export.&#x20;
* 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.

<figure><img src="https://3657049418-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy0SFXZjN1sdgdxYM7QPE%2Fuploads%2FxK34fnB3cXQL2dCDOn7u%2FCleanShot%202025-04-09%20at%2017.54.42.gif?alt=media&#x26;token=3389b2e8-6fe4-49ad-9cbc-d0cdbcd9a38a" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Checking the themes

* Apply the color styles and typography in your designs.
* Switch to dark mode to see your designs in dark mode.

<figure><img src="https://3657049418-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy0SFXZjN1sdgdxYM7QPE%2Fuploads%2F11QiswGIMoihLHotFs63%2FCleanShot%202025-04-09%20at%2018.05.00.gif?alt=media&#x26;token=b199949b-2e98-49e8-8e3a-ba608d2ea266" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Exporting other modes

* To export other modes, open the Tokens Studio plugin.
* Select another mode and click create.

<figure><img src="https://3657049418-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy0SFXZjN1sdgdxYM7QPE%2Fuploads%2FpALBCHLB106qWoA0ui5M%2FCleanShot%202025-04-09%20at%2018.14.47.gif?alt=media&#x26;token=434db510-37d3-472f-aa20-f61049cf570f" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}