# Styles and Tokens Studio

## Manage Styles in Figma with Tokens Studio 

If your team is working with Styles in Figma, you can use the Tokens Studio Plugin to attach Design Tokens to Styles (and Variables). This allows you to manage your Tokens and Styles in the same place, and easily sync your design decisions to a code repository.

### Style Types as Token Types

*You can select a Token Type below to learn more about it.*

| Figma Style Type | Token Type                                                                          |
| ---------------- | ----------------------------------------------------------------------------------- |
| Color Style      | [Color Token](https://docs.tokens.studio/manage-tokens/token-types/color)           |
| Text Style       | [Typography Token](https://docs.tokens.studio/manage-tokens/token-types/typography) |
| Effects Style    | [Box Shadow Token](https://docs.tokens.studio/manage-tokens/token-types/box-shadow) |

### Guides on working with Styles 

Select a card below to jump to a comprehensive guide on working with Styles, or scroll down to see the[ answers to frequently asked questions ↓](#frequently-asked-questions).

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Export to Figma</strong><br>Create Styles from Tokens using the Plugin.</td><td><a href="https://3704321769-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fds8Db2rgs9JSaG6grP0o%2Fuploads%2FXpF0bqcTa55eT5303TKa%2Fcard-header-figma-styles.png?alt=media&#x26;token=60982acc-63e6-42d3-8f7c-5e7c67e961ef">card-header-figma-styles.png</a></td><td><a href="export">export</a></td></tr><tr><td>Create <strong>Styles with Variable References</strong><br></td><td><a href="https://3704321769-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fds8Db2rgs9JSaG6grP0o%2Fuploads%2FALB0ijN1FCGYOdgd71SF%2Fcard-header-figma-styles-var-references.png?alt=media&#x26;token=24756238-c207-4bb0-8775-e2b20b5d2236">card-header-figma-styles-var-references.png</a></td><td><a href="export/styles-variable-references">styles-variable-references</a></td></tr><tr><td><strong>Import from Figma</strong><br>Create Tokens from Styles</td><td><a href="https://3704321769-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fds8Db2rgs9JSaG6grP0o%2Fuploads%2FSiBNBFXEMY7AwaOVWCMv%2Fcard-header-figma-import-styles.png?alt=media&#x26;token=e51a014b-a1b3-430c-acf2-c287d75b3a93">card-header-figma-import-styles.png</a></td><td></td></tr></tbody></table>

***

### Frequently Asked Questions

&#x20;Select a question to reveal the answer.&#x20;

<details>

<summary>Which Token Types match the different Style types?</summary>

Tokens Studio supports 23 unique Token Types and there is only 4 Style Types. Head to the Export to Figma (overview) guide which shows the relationships.&#x20;

[#supported-token-types](https://docs.tokens.studio/export#supported-token-types "mention")

</details>

#### Manage Styles using Tokens Studio&#x20;

<details>

<summary>I exported my Typography Tokens as Text Styles using the plugin, how can I get variables linked to the text properties of the styles in figma? </summary>

This workflow is covered in the comprehensive guide to creating Styles with Variable References.&#x20;

[styles-variable-references](https://docs.tokens.studio/figma/export/styles-variable-references "mention")

</details>

#### Create Design Tokens in the Plugin from Styles

<details>

<summary>I've imported styles with Variable values, why aren't the references in the Tokens created in Tokens Studio?</summary>

This is a known limitation of the Plugin.&#x20;

You can still import them but any connection to Variables will need to be manually created. Head to the Import Styles guide for more details.&#x20;

[styles](https://docs.tokens.studio/figma/import/styles "mention")

</details>

<div data-full-width="true"><figure><img src="https://3704321769-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fds8Db2rgs9JSaG6grP0o%2Fuploads%2FZFWyIDJ8TTgum6566W4X%2Fspacer-image.png?alt=media&#x26;token=ca910cc6-4dd1-4019-940b-c67bbb539bd4" alt=""><figcaption></figcaption></figure></div>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.tokens.studio/figma/styles-overview.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.