# Table of Contents - [Why Studio? | Studio](#why-studio-studio) - [Inviting members | Studio](#inviting-members-studio) - [Connect Studio to Figma | Studio](#connect-studio-to-figma-studio) - [Import from Figma variables | Studio](#import-from-figma-variables-studio) - [Features | Studio](#features-studio) - [Platform | Studio](#platform-studio) - [Editing | Studio](#editing-studio) - [Creating a Graph Based Set | Studio](#creating-a-graph-based-set-studio) - [Theme Groups and Theme Options | Studio](#theme-groups-and-theme-options-studio) - [Getting Started | Studio](#getting-started-studio) - [Token Sets | Studio](#token-sets-studio) - [Using Companion by Tokens Studio | Studio](#using-companion-by-tokens-studio-studio) - [Introduction | Studio](#introduction-studio) - [Tokens Studio for Figma Plugin | Studio](#tokens-studio-for-figma-plugin-studio) - [Types | Studio](#types-studio) - [Token flow | Studio](#token-flow-studio) - [Releases | Studio](#releases-studio) - [Connect Studio to Code | Studio](#connect-studio-to-code-studio) - [API keys | Studio](#api-keys-studio) - [Setting up Studio | Studio](#setting-up-studio-studio) - [Nodes | Studio](#nodes-studio) - [Project | Studio](#project-studio) - [Organisation | Studio](#organisation-studio) - [Using Tokens Studio for Figma | Studio](#using-tokens-studio-for-figma-studio) - [Configuration | Studio](#configuration-studio) - [Accounts | Studio](#accounts-studio) --- # Why Studio? | Studio [](#welcome-to-studio) Welcome to Studio --------------------------------------------- Studio is your central hub for managing design tokens across your entire organization. We help bridge the gap between design and development, making it easier to maintain consistent, scalable design systems. ### [](#why-choose-studio) Why choose Studio? #### [](#seamless-design-to-code-workflow) Seamless design-to-code workflow Transform your design tokens from Figma directly into production-ready code. No more manual updates or synchronization issues between design and development teams. #### [](#single-source-of-truth) Single source of truth Maintain all your design tokens in one place. Whether you're working with colors, typography, spacing, or other design elements, everything stays synchronized across your entire design system. #### [](#built-for-scale) Built for scale From small teams to large enterprises, our platform grows with you. Manage multiple themes, versions, and environments while maintaining complete control over your design system. #### [](#team-collaboration) Team collaboration Enable designers and developers to work together seamlessly. With built-in version control and clear documentation, everyone stays on the same page. ### [](#getting-started) Getting started Ready to transform your design system workflow? Follow our step-by-step guide: 1. [Start your journey](/getting-started) - Create your account and first project 2. [Connect to Figma](/connect-studio-to-figma) - Sync your design tokens 3. [Connect to code](/connect-studio-to-code) - Integrate with your development workflow ### [](#key-features) Key features * [**Token Management**](/platform/features/tokens) - Create, organize, and maintain your design tokens * [**Theming**](/platform/features/themes) - Build and manage multiple themes with ease * **Version Control** - Track changes and manage releases * [**Team Management**](/platform/platform/organisation) - Collaborate with your team effectively Join the growing number of teams using Tokens Studio to create more consistent, efficient design systems. [NextGetting Started](/getting-started) Last updated 24 days ago * * * --- # Inviting members | Studio * * * [PreviousAPI keys](/platform/platform/api-keys) [NextIntroduction](/graph-engine/introduction) Last updated 0 minutes ago You can invite your team members to your organisation using the following steps. 1 ### [](#under-your-project-name-youll-find-a-small-menu) Under your project name, you'll find a small menu. 2 ### [](#click-on-invite-members) Click on 'Invite members. This will open a page. 3 ### [](#here-you-see-all-the-current-members) Here you see all the current members. Via the button 'Invite users' you will be able to invite new members 4 ### [](#just-drop-the-mail-address-and-hit-the-button) Just drop the mail address and hit the button! An invite will be sent to the email address. ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FpIVZ0gPxL59w7jfnqcTk%252FInviteMembers01.png%3Falt%3Dmedia%26token%3De9b85de6-e74d-4039-bac8-67b6da38c363&width=768&dpr=4&quality=100&sign=1bd4acba&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FS1soAiW0GxQ8EHac15vx%252FInviteMembers02.png%3Falt%3Dmedia%26token%3D0d24ffad-0424-40c5-99b4-ed0867b6ddb6&width=768&dpr=4&quality=100&sign=64877ff1&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FmbKnwdZJjB9ETuHJ5rYw%252FInviteMembers03.png%3Falt%3Dmedia%26token%3D1d3660a9-a46d-43c2-ad95-2e613fdb0a1c&width=768&dpr=4&quality=100&sign=b204f3f6&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FSaCCBGrXZvb7lWYa4xYa%252FInviteMembers04a.png%3Falt%3Dmedia%26token%3Dc1e1bb44-d803-4f1c-9325-5093f1c19c5e&width=768&dpr=4&quality=100&sign=93fb0240&sv=2) --- # Connect Studio to Figma | Studio * * * There are two ways Studio can be connected to Figma [PreviousImport from Figma variables](/setting-up-studio/import-from-figma-variables) [NextUsing Tokens Studio for Figma](/connect-studio-to-figma/using-tokens-studio-for-figma) Last updated 27 days ago --- # Import from Figma variables | Studio * * * [PreviousImport from Tokens Studio for Figma](/setting-up-studio/import-from-tokens-studio-for-figma) [NextConnect Studio to Figma](/connect-studio-to-figma) Last updated 14 days ago If you already have design tokens or variables in Figma, you can easily import them into Studio. Below is an example workflow using the Tokens Studio for Figma plugin. ### [](#export-from-figma) Export from Figma 1 ### [](#open-figma-and-your-design-file) Open Figma and Your Design File In Figma, ensure you have set up Figma Variables that you want to migrate. 2 ### [](#install-launch-the-tokens-studio-for-figma-plugin) Install/Launch the Tokens Studio for Figma Plugin 1. Go to Plugins > Tokens Studio for Figma. 2. In the plugin’s interface, open a "New empty file". 3 ### [](#import-figma-variables) Import Figma Variables 1. In the plugin, look for an Import Variables button. 2. Choose whether to convert numbers to dimensions, use rem values, etc. 3. Click Import. _Tip: You might see collections such as “foundation” or “light” and “dark” in Figma, which will become token sets groups and the modes will become token sets in Studio. The Figma collections will be mapped as Theme Groups and modes as Theme Options in Studio._ 4 ### [](#export-to-a-zip-file) Export to a Zip File 1. In the bottom-left of the plugin, click Export file and folders. 2. Choose Multi-file export and then Export. 3. This will download a .zip file containing your tokens in JSON format. 5 ### [](#return-to-studio) Return to Studio 1. Go to your Project Dashboard. 2. Click Upload tokens or drag-and-drop the .zip file into the upload area. 6 ### [](#review-your-imported-sets) Review Your Imported Sets 1. Studio will parse the .zip file and create matching sets (e.g., foundation, light, dark). 2. Verify that your sets and tokens appear correctly in the left-hand panel. 7 ### [](#organizing-and-theming-your-tokens) Organizing and Theming Your Tokens Studio supports theming through the concept of Theme Groups and Theme Options. This allows you to toggle between sets like light and dark, or any other variant (for more information on Themes check out [Features > Themes](/platform/features/themes) ). The Figma collections will be created as Theme Groups and modes will be created as Theme Options. 1. Open the Theme Panel • In your project, click the Themes tab. 2. Verify that your collections have been created as Theme Groups (e.g., Color Mode, breakpoint) 3. Verify that the modes in your collections have been created as Theme Options under the corresponding Theme Group (e.g., Light and Dark in Color Mode) 4. Click on the Theme Option on the left panel to see the sets that are enabled for the Theme Option. 5. Open the Tokens tab on the left panel. • At the bottom of the left-hand panel, you can select which theme is active (e.g., Default + Light or Default + Dark). • This will update the token values displayed in the UI. ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FDd7B9UXRhaSq5uOpxPaE%252Fimage.png%3Falt%3Dmedia%26token%3Dde901464-b0e1-4033-8e4f-35e4c522705b&width=768&dpr=4&quality=100&sign=37202ec9&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252F05vRmplp1NLrmDg8GNe9%252Fimage.png%3Falt%3Dmedia%26token%3D928e1f4b-227c-4eba-9c35-d320165e65b5&width=768&dpr=4&quality=100&sign=207fc93c&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FrEYTFa4uK1GLzVkUcKvv%252Fimage%2520%286%29.png%3Falt%3Dmedia%26token%3Dba5fefb1-5081-44d5-8a90-9a6e6fdec59f&width=768&dpr=4&quality=100&sign=6d19727e&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FodnVk8TokGhpntSiHBx3%252FImport%2520Tokens.gif%3Falt%3Dmedia%26token%3Da693f810-aca0-473a-88e3-db46c2dcaa70&width=768&dpr=4&quality=100&sign=1b0abf14&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FRkgyDiAwH9GB4fnEbeuf%252FCleanShot%25202025-02-14%2520at%252013.55.01%25402x.png%3Falt%3Dmedia%26token%3Dff00843b-7f72-41ea-9064-2f69a12d788b&width=768&dpr=4&quality=100&sign=97326c07&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FYavn6g5ctpyLVUopSVxD%252FCleanShot%25202025-02-14%2520at%252013.55.12%25402x.png%3Falt%3Dmedia%26token%3Ded966320-b64b-4127-b8f0-2e2c7a0120ac&width=768&dpr=4&quality=100&sign=bfd3263e&sv=2) --- # Features | Studio [Tokens](/platform/features/tokens) [Themes](/platform/features/themes) [Configuration](/platform/features/configuration) [Releases](/platform/features/releases) [PreviousConnect Studio to Code](/connect-studio-to-code) [NextTokens](/platform/features/tokens) * * * --- # Platform | Studio [Accounts](/platform/platform/accounts) [Organisation](/platform/platform/organisation) [Project](/platform/platform/project) [API keys](/platform/platform/api-keys) [Inviting members](/platform/platform/inviting-members) [PreviousReleases](/platform/features/releases) [NextAccounts](/platform/platform/accounts) * * * --- # Editing | Studio * * * The Graph Engine’s node editor is designed for flexibility and ease, letting you build and tweak graphs with simple actions. Here’s how to edit your workflows efficiently. ### [](#adding-and-moving-nodes) Adding & Moving Nodes Add nodes to your canvas in three ways, each with a handy description to guide you: * **From the Nodes Panel**: * Open the Nodes Panel (usually on the left), find a node (e.g., "Add" or "Color to String"), and drag it onto the canvas. * **Hover Tip**: Pause over a node in the panel to see its description (e.g., "Adds two numbers together"). * **Through Shift + K Menu**: * Press **Shift + K** to open a searchable menu. * Type to filter nodes (e.g., "color" for color-related nodes), select one, and hit Enter to add it where your cursor is. * **Bonus**: Each node shows a description in the menu for quick reference. * **From the Top Action Bar**: * Click the **Nodes Icon** in the toolbar (top of the screen), pick a node from the dropdown, and it lands on the canvas. * **Moving Nodes**: Click and drag any node to reposition it. ### [](#connecting-nodes) Connecting Nodes Link nodes to flow data between them using two methods: * **Drag Method**: Click an output port (right side), drag to a matching input port (left side), and release. A blue edge appears if the types match; a red edge means they don’t. * **Click Method**: Click an output port, then click an input port. The editor auto-draws a blue edge if compatible. **Tip**: Hover over ports to check types (e.g., "color", "number") if "Port Types" is enabled. ### [](#disconnecting-nodes) Disconnecting Nodes Break connections easily: * Click an edge (the line between ports), then press **Delete**. The edge vanishes, and data stops flowing. ### [](#split-connections-pass-through) Split Connections (Pass Through) Insert a node into an existing connection to modify the flow: * **Double-Click Method**: Double-click an edge, pick a node from the menu that pops up (e.g., "Log Value"), and it splits the edge, wiring the new node between the original two. ### [](#duplicate) Duplicate Make an exact copy without clipboard fuss: * Right-click a node (or selected nodes) and choose **Duplicate** from the menu. The copy appears nearby, with settings intact but no edges. ### [](#grouping-nodes) Grouping Nodes Keep your graph organized visually: * Select multiple nodes (click or drag a box), right-click, and choose Create Group. * What Happens: A colored background wraps the nodes, making them a visual unit without changing their logic (unlike a Subgraph). * Manage Groups: Right-click the group to Ungroup (removes the background) or Delete (removes the group and all nodes inside). ### [](#testing-your-graph) Testing Your Graph See your work come to life as you edit: * Live Updates: The Output Panel and Inline Values (if enabled) update instantly as you connect or tweak nodes. * Preview Nodes: Connect an output to a specialized Preview Node for a polished view: * Color Scale Node: Shows a full color palette as swatches, neatly organized. * Color Swatch: Renders a single color with its value. * More preview options are in the Nodes Panel under "Preview Nodes". Example: Connect a color array output to a Color Scale Node to see all swatches at once while you adjust inputs. ### [](#extra-editing-tools) **Extra Editing Tools** * **Zoom & Pan**: Scroll the mouse wheel to zoom in/out, or drag the canvas to pan—great for navigating big graphs. ### [](#saving-and-sharing) Saving & Sharing Keep and share your graphs easily: * Download/Upload: Export your graph as a .json file via the toolbar’s Save icon, then upload it later with the Import option. * Team Collaboration: In Studio, your team can access and edit your graphs directly—perfect for collaborative projects. * Coming Soon: A community marketplace to exchange graphs and full design system projects. Stay tuned! [PreviousTypes](/graph-engine/types) [NextTokens Studio for Figma Plugin](/plugins/tokens-studio-for-figma-plugin) Last updated 2 days ago --- # Creating a Graph Based Set | Studio * * * [PreviousEditor](/graph-engine/editor) [NextNodes](/graph-engine/nodes) Last updated 13 days ago In Studio, you can create different types of sets to manage your design tokens effectively. This guide walks you through the process of creating a **graph-based set**. 1 ### [](#navigate-to-the-tokens-module) **Navigate to the Tokens Module** * Open Studio. * In the **left panel**, click on the **Tokens module**. 2 ### [](#access-the-sets-panel) **Access the Sets Panel** * Here, you will see the existing token sets in your project. * Click on **Create New Set**. 3 ### [](#choose-the-set-type) **Choose the Set Type** * A dialog will appear, prompting you to choose between: * [**Static Set**](/platform/features/tokens/token-sets#static-sets) (manually managed tokens). * [**Graph-Based Set**](/platform/features/tokens/token-sets#graph-based-sets) (dynamic token relationships using graph logic). * Select **Graph-Based Sets.** 4 ### [](#configure-your-graph-based-set) **Configure Your Graph-Based Set** * **Enter a Name** for the set. * _(Optional)_ Add a **Description** to clarify its purpose. 5 ### [](#create-the-set) **Create the Set** * Click **Create**, and your graph-based set will be generated. 6 ### [](#next-steps) **Next Steps** * The newly created graph-based set is now available in the UI. * You can now start defining relationships, nodes, and logic within the graph editor. ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FpXuBYcqdrKHhXOSSxWAg%252FCleanShot%25202025-02-28%2520at%252019.53.05%25402x.png%3Falt%3Dmedia%26token%3D47f6206b-b871-4d88-a067-0143bb8c321e&width=768&dpr=4&quality=100&sign=32f10584&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FrXgR3DkAG0h5JjuUuLJV%252FCleanShot%25202025-02-28%2520at%252020.07.05.gif%3Falt%3Dmedia%26token%3D70ed26e2-804e-49f2-abcf-461bd201c1b2&width=768&dpr=4&quality=100&sign=c6357ced&sv=2) --- # Theme Groups and Theme Options | Studio * * * [](#theme-groups-and-theme-options) Theme Groups and Theme Options ----------------------------------------------------------------------- Studio provides a powerful theming system through **Theme Groups** and **Theme Options**. These allow users to manage multiple variations of their design tokens dynamically. ### [](#understanding-theme-groups) **Understanding Theme Groups** A **Theme Group** is a collection of theme options that define different token variations. Theme groups help structure different modes or styles within a design system. * Each **Theme Group** corresponds to a **collection in Figma**. * Each **Theme Option** within a Theme Group maps to a **Mode in Figma**. For example: * A **Theme Group** called **Color Mode** may contain **Light** and **Dark** options. * A **Theme Group** called **Breakpoints** may contain options like **320px** and **1440px**. ### [](#creating-a-theme-group) **Creating a Theme Group** 1. Navigate to the **Themes** module in Tokens Studio. 2. Click **Create New Theme Group**. 3. Provide a name for your theme group (e.g., "Color Mode"). 4. Add one or more theme options (e.g., "Light", "Dark"). 5. Click **Save** to confirm. > **Note**: You can have **more than four theme options**, but only **four will work in Figma** if you're on the **Organization plan** (not Enterprise). ### [](#managing-theme-options) **Managing Theme Options** Theme Options represent the different variations within a theme group. 1. Within a **Theme Group**, click **Add Theme Option**. 2. Name the option (e.g., "Light Mode"). 3. Provide a description (optional). 4. Click **Save**. #### [](#assigning-token-sets-to-theme-options) **Assigning Token Sets to Theme Options** Each **Theme Option** can have different token sets assigned to it. This defines which tokens are active when the theme is selected. * For each **Theme Option**, enable the corresponding token set: * **Light Mode** → Assign the **Light Token Set**. * **Dark Mode** → Assign the **Dark Token Set**. * Ensure that your **Foundation Set** is enabled as a source (reference) for both themes. ### [](#selecting-an-active-theme) **Selecting an Active Theme** 1. At the bottom-left of the Tokens Module interface, locate the **Active Theme Selector**. 2. Choose an active theme (e.g., **Default + Light** or **Default + Dark**). 3. The interface updates to reflect the selected theme’s token values. ### [](#deleting-a-theme-group-or-theme-option) **Deleting a Theme Group or Theme Option** * To delete a **Theme Group**, go to the Themes panel, select the group, and click **Delete**. * To remove a specific **Theme Option**, navigate to the group, select the option, and delete it. ### [](#use-cases-for-theme-groups) **Use Cases for Theme Groups** Theme Groups and Options help manage different token variations efficiently. Some common use cases include: * **Light/Dark Mode** switching. * **Brand Variants** (e.g., Primary Brand vs. Partner Brands). * **Breakpoints** for responsive design. * **Accessibility Themes** (e.g., High Contrast Mode). [PreviousThemes](/platform/features/themes) [NextConfiguration](/platform/features/configuration) Last updated 14 days ago --- # Getting Started | Studio * * * [PreviousWhy Studio?](/) [NextSetting up Studio](/setting-up-studio) Last updated 29 days ago ### [](#sign-up) Sign up If you're already signed up you can skip ahead. If you haven't signed up yet, you can sign up here: [https://app.tokens.studio/auth/register](https://app.tokens.studio/auth/register) Sign up with your email or Google account. ### [](#activating-your-account) Activating your Account After confirming your email you will land on the Waitlist page. You should have received an activation code in your onboarding email. Please use this inside the "Redeem" field to get access to Studio. ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252F3UQSIjT09rmt46qiS9ZU%252FCleanShot%25202025-02-12%2520at%252013.42.50%25402x.png%3Falt%3Dmedia%26token%3D0d3ed8aa-19ec-41cb-ac99-25c4bdd59c3b&width=768&dpr=4&quality=100&sign=d9c32d21&sv=2) --- # Token Sets | Studio * * * [PreviousTokens](/platform/features/tokens) [NextToken flow](/platform/features/tokens/token-flow) Last updated 17 days ago [](#static-and-graph-based-sets) Static and Graph-Based Sets ----------------------------------------------------------------- Studio supports two distinct types of token sets. Understanding the differences between **Static Sets** and **Graph-Based Sets** is key to optimizing your token management workflow. ### [](#static-sets) Static Sets Static sets are the traditional token sets you are familiar with. They have the following characteristics: * **Editable in Table View:** Static sets are displayed in a table editor, where each token is represented in a JSON format behind the scenes. * **Manual Token Management:** You directly edit token values and metadata—ideal for straightforward token collections that do not require dynamic logic. * **Predictable Structure:** Since the values are manually set, static sets offer consistency without additional computation. > **Tip:** Use static sets for standard tokens that do not need dynamic calculations. ### [](#graph-based-sets) Graph-Based Sets Graph-based sets leverage our powerful graph engine to build logic-driven token structures: * **Logic-Based Calculations:** Instead of directly editing tokens, you define a logical decision tree using nodes. These nodes perform dynamic calculations (for example, building color or type scales) that generate a static output token set. * **Dynamic Output:** The result is a dynamically generated token set, which you can view in both the graph view and the table view. * **Foundational Usage Only:** Graph-based sets should only be used on the foundational layer. They are designed to drive core logic, and you should avoid referencing a graph-based set on top of another logic-driven set. This limitation is due to current constraints in consuming platforms (such as Figma or CSS) regarding the translation of complex logics. > **Note:** For advanced dynamic calculations like semantic scaling or automated color adjustments, graph-based sets offer powerful capabilities. However, keep them simple to ensure compatibility when the tokens are consumed in different platforms. ### [](#switching-between-views) Switching Between Views In graph-based sets, you have the flexibility to switch between: * **Graph View:** Where you build and modify the logical structure of your token set. * **Table View:** Where you can inspect the final output of your dynamic calculations in a familiar tabular format. ### [](#best-practices) Best Practices * **Use Static Sets** when your tokens require minimal or no dynamic logic. * **Employ Graph-Based Sets** for foundational layers where dynamic calculations (such as generating color or type scales) are necessary. * **Avoid Nesting Graph-Based Sets:** Do not reference one graph-based set inside another, as this can complicate logic translation to consuming platforms. ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252F4cALwTYA0HozXrqootKt%252FStatic%2520Sets.png%3Falt%3Dmedia%26token%3Ddb4dcf93-48f9-4854-a38b-1391ebba90f0&width=768&dpr=4&quality=100&sign=b72ae36e&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FmqneIwArkv3FRPjGJxVe%252FGraph%2520Based%2520Set.png%3Falt%3Dmedia%26token%3D02e75320-6c22-4a7e-8791-442bb9313831&width=768&dpr=4&quality=100&sign=e422752c&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252Ffj4XKquCN8UWpwMfwUhL%252FSwitch%2520between%2520Graph%2520and%2520Static%2520set.gif%3Falt%3Dmedia%26token%3Db9c60011-55d4-4dbc-9591-624f6a5b5360&width=768&dpr=4&quality=100&sign=89e11d5e&sv=2) --- # Using Companion by Tokens Studio | Studio * * * [PreviousUsing Tokens Studio for Figma](/connect-studio-to-figma/using-tokens-studio-for-figma) [NextConnect Studio to Code](/connect-studio-to-code) Last updated 27 days ago Companion by Tokens Studio is a Figma plugin which is meant purely for consumption of design tokens from Studio as variables in Figma. 1 ### [](#open-a-figma-design-file) Open a Figma design file This can be a new empty file to ensure that your production design files are not affected while setting up a connection between Studio and Figma. 2 ### [](#install-launch-the-plugin) Install/Launch the plugin 1. Go to plugins > Companion by Tokens Studio. 2. Run the plugin. 3 ### [](#setting-up-studio-sync) Setting up Studio sync 1. Return to Studio. 2. Click on Find your API key. You can also jump to the API keys page by using the keyboard shortcut cmd+k. 3. The API key is linked to the user which means that it gives access to all the Organisations and Projects that a user is part of. For more info read [Platform > API keys](/platform/platform/api-keys) . 4 ### [](#creating-your-api-key) Creating your API key 1. Click on create a new key. 2. Give your API key a name. 3. (Optional) Give your API key a description. 4. Click create. 5. Copy your API key. IMPORTANT: Your API key will not be visible again, so make sure to copy it. 5 ### [](#syncing-to-companion-by-tokens-studio) Syncing to Companion by Tokens Studio 1. Return to Figma and the plugin. 2. Enter your API key. 3. Choose the Organisation that you want to connect. 4. Choose the Project that you want to connect. 5. You are now connected to Studio and your tokens should reflect in the plugin. For more information on the features of Companion by Tokens Studio, see [Companion by Tokens Studio](/plugins/companion-by-tokens-studio) . ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252F29J9QYcXu4VdkSy7XJQM%252FFind%2520API%2520Key.png%3Falt%3Dmedia%26token%3D87bf2511-8a90-46c0-88ef-5e307e135d5a&width=768&dpr=4&quality=100&sign=54053af4&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FSvtdTEXN9oJvrjkKUXZz%252FCreate%2520API%2520Key.gif%3Falt%3Dmedia%26token%3D13c4462b-7e02-4527-b436-5b99fc7686d9&width=768&dpr=4&quality=100&sign=f5770c49&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252Fszfz8cNRvdp7q3Ha9Mxd%252FApi%2520key%2520to%2520companion.gif%3Falt%3Dmedia%26token%3D6121b7a8-03c0-4cff-80e9-bd3b7846ea2a&width=768&dpr=4&quality=100&sign=65484f0e&sv=2) --- # Introduction | Studio * * * [PreviousInviting members](/platform/platform/inviting-members) [NextEditor](/graph-engine/editor) Last updated 2 days ago ### [](#whats-a-node-editor) What’s a Node Editor? A node editor is a visual tool where you build workflows by connecting **nodes**—little blocks of functionality—together with **edges** (lines). Think of it like a flowchart for design logic: each node does something specific (e.g., converts a color to a hex string), and the edges show how data flows between them. In Studio's Graph Engine, this editor lets you create, tweak, and scale design systems without writing code manually. It’s built to be intuitive, combining the visual ease of tools like Figma with the procedural power of something like Blender’s node system. Whether you’re a designer organizing tokens or a design engineer generating outputs for developers, it’s your playground for visual logic. ### [](#what-can-you-do-with-it) What Can You Do With It? The Graph Engine transforms how you manage design systems by letting you define logic visually. Here’s what you can achieve: * **Generate Design Tokens Dynamically**: Create tokens (e.g., colors, sizes) based on rules, not static lists—like generating a full color scale from a single base color using math and color theory. * **Automate Multi-Brand Systems**: Switch between brand themes (e.g., Light vs. Dark) instantly by adjusting inputs, perfect for companies managing multiple products. * **Scale Complex Designs**: Use subgraphs to reuse workflows (e.g., a button styling recipe) across projects, or map arrays to process lists (e.g., converting 10 colors to hex codes at once). * **Bridge Design and Code**: Output agnostic JSON tokens or even CSS variables that developers can use directly, reducing handoff friction. * **Experiment Freely**: Test ideas—like creating a type scale with a multiplier—without breaking your system, thanks to non-destructive editing. **Example**: Imagine you need a color palette for a brand. Start with a base color (#FF5733), use nodes to adjust its lightness for variants (e.g., +10%, -20%), and output a set of hex codes—all in real-time, synced to Figma variables if you want ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252Fj5R33y30FxfitRKtXSNw%252FGraph%2520Engine.png%3Falt%3Dmedia%26token%3Dbcbad601-970f-4cb4-928f-71da36d08b29&width=768&dpr=4&quality=100&sign=16606cba&sv=2) --- # Tokens Studio for Figma Plugin | Studio * * * [PreviousEditing](/graph-engine/editing) [NextCompanion by Tokens Studio](/plugins/companion-by-tokens-studio) Last updated 20 days ago **Tokens Studio for Figma** is a [Figma Plugin](https://jansix.at/resources/figma-tokens) allowing you to integrate Tokens into your Figma designs. Read the official documentation [here.](https://docs.tokens.studio/) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252F145eb3YoRN1vWhphwZhB%252Fheader.png%3Falt%3Dmedia%26token%3D6ac6c921-d4dd-4a9f-a8c8-67ad26bab679&width=768&dpr=4&quality=100&sign=9cd413e&sv=2) --- # Types | Studio * * * ### [](#why-strong-typing-matters) Why Strong Typing Matters Every port in the Graph Engine is **strongly typed**, meaning it only accepts specific data types (e.g., a "number" port won’t take a "color"). This keeps your graphs reliable by: * Catching mistakes early (e.g., no connecting a string to a math node). * Ensuring predictable outputs for design tokens or code. * Making complex systems easier to debug and scale. ### [](#what-are-types) What Are Types? Types define what kind of data a port handles—like "number" for 42, "color" for #FF5733, or "array" for a list. They’re the rules that keep your graph running smoothly. #### [](#how-to-identify-the-type-of-an-input-or-output) How to Identify the Type of an Input or Output Ports use visual cues: * **Colors**: Show the type (see legend from the Top Action Bar > Layout > Legend ): * Red: Color * Magenta: Curve * Green: String * Gold: Boolean * Blue: Number * Teal: Object * Purple: Any * **Shapes**: * **Dot**: Single value (e.g., one color). * **Square**: Array (e.g., list of colors). Hovering over a port shows its type label (e.g., "color") if "Port Types" is enabled in settings. * Type Labels: * Enable the labels for Port to easily identify the type. This can be done from Top Action Bar > Graph Setting > Show Inline Types. ### [](#supported-types) Supported Types Here’s what you’ll work with: * **Number**: Integers or decimals (e.g., 5, 3.14). * **String**: Text (e.g., "bold", "#FF5733"). * **Color**: Color objects (e.g., RGB, HSL formats). * **Array**: Lists (e.g., \[10, 20, 30\], \["#FF5733", "#33FF57"\]). * **Object**: Key-value pairs (e.g., { "primary": "#FF5733" }). * **Boolean**: True/false. * **Token Set**: A special type for design token collections (e.g., a JSON-like structure). ### [](#type-conversion) Type Conversion Mismatched types block connections, but conversion nodes fix this: * **Why It’s Needed**: * Example: A "Color Generator" outputs a color object, but a "Create Design Token" needs a hex string. They won’t connect directly. * **How to Convert**: * **Scenario**: Convert a color to a hex string. 1. Connect the "Create Color" output (color) to a "Color to String" node’s input. 2. The node outputs a hex string (e.g., "#FF5733"). 3. Plug this into the "Create Design Token" input, which now works. * **Other Conversions**: "Stringify" (e.g., 10 → "10"). [PreviousNodes](/graph-engine/nodes) [NextEditing](/graph-engine/editing) Last updated 2 days ago ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252Ft0k7bqCO1VrUDEXJ2Vby%252Fimage.png%3Falt%3Dmedia%26token%3D1204ee86-6810-447e-9985-67ef35c9aab1&width=768&dpr=4&quality=100&sign=4377ac82&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FDxBtogVLNZzmk3ZvKdFh%252FType%2520Conversion.png%3Falt%3Dmedia%26token%3Da4bacc0b-5a1a-4792-92d0-ffa93943c3dd&width=768&dpr=4&quality=100&sign=77db1335&sv=2) --- # Token flow | Studio * * * [PreviousToken Sets](/platform/features/tokens/token-sets) [NextThemes](/platform/features/themes) Last updated 13 days ago [](#token-flow-in-tokens-studio) Token Flow in Tokens Studio ----------------------------------------------------------------- ### [](#overview) Overview Token Flow in Tokens Studio provides a visual way to understand the relationships between tokens. It allows you to track references, dependencies, and how tokens are connected across different sets and themes. This feature helps in managing design tokens efficiently and ensuring consistency across your design system. ### [](#accessing-token-flow) Accessing Token Flow 1. **Navigate to the Tokens Module** * Open **Tokens Studio** and go to the **Tokens** module from the left-hand panel. * Here, you will see a list of **Token Sets**. 1. **Selecting a Token Set** * Click on any **Token Set** to view all the tokens it contains. 1. **Opening Token Flow** * Select a token by clicking the checkbox next to it. * At the bottom of the screen, the option to **Open Token Flow** will appear. * Click on **Token Flow** to visualize the token's connections. ### [](#understanding-token-relationships) Understanding Token Relationships Once Token Flow is open, you can: * **View token references**: See where the token is being referenced across different sets. * **Check dependency paths**: Identify which other tokens rely on the selected token. * **Explore theme-based variations**: Understand how token values change across different themes. ### [](#example-use-case) Example Use Case 1. Select a token, such as a color token. 2. In **Token Flow**, observe: * Which other tokens reference it. * Whether it pulls values from another token (e.g., from a dark or light theme). * How changing the theme affects the resolved token value. 3. If you switch the theme from **Light** to **Dark**, you will see: * The reference update from the light token set to the dark token set. * The resolved token value changing accordingly. ### [](#navigating-between-token-sets) Navigating Between Token Sets * You can click on any referenced token within Token Flow to jump directly to its token set. * This makes it easier to track how tokens interact across different sets. ### [](#benefits-of-token-flow) Benefits of Token Flow * **Improved visibility**: Easily see how tokens are structured and related. * **Efficient debugging**: Quickly identify and resolve issues with token dependencies. * **Seamless theming**: Understand how token values change dynamically across different themes. ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FpXuBYcqdrKHhXOSSxWAg%252FCleanShot%25202025-02-28%2520at%252019.53.05%25402x.png%3Falt%3Dmedia%26token%3D47f6206b-b871-4d88-a067-0143bb8c321e&width=768&dpr=4&quality=100&sign=32f10584&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FmZL4jEwG03be8fm9m2zS%252FCleanShot%25202025-02-28%2520at%252019.54.37%25402x.png%3Falt%3Dmedia%26token%3D67d62dfe-fc6c-4066-ae32-58157f55a85c&width=768&dpr=4&quality=100&sign=f223dcde&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252F0xhTtB8EUN12LKCWsFjS%252FCleanShot%25202025-02-28%2520at%252019.55.58.gif%3Falt%3Dmedia%26token%3D920f63f9-32da-4d3b-aca8-aa4b0554e725&width=768&dpr=4&quality=100&sign=d64d5798&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FSPiq3zAEfAEAjrcRm6i8%252FCleanShot%25202025-02-28%2520at%252020.00.19.gif%3Falt%3Dmedia%26token%3Dbe363d64-04c6-4d69-aa31-b24b17ad2f0a&width=768&dpr=4&quality=100&sign=22231034&sv=2) --- # Releases | Studio * * * [PreviousConfiguration](/platform/features/configuration) [NextPlatform](/platform/platform) Last updated 1 day ago The **Releases** feature in Tokens Studio allows you to create structured versions of your design tokens, enabling version control similar to Git workflows. With this feature, you can manage changes, track updates, and export token configurations for seamless integration with your projects. ### [](#creating-a-release) Creating a Release Before you create a release, ensure that: * Your design tokens are set up. * Your themes are set up. * Your export configurations (e.g., web, mobile, etc.) are defined. To create a release: 1. Navigate to the **Releases** module in the left panel. 2. You will see a list of previously created releases. 3. Click **Create New Release**. ### [](#defining-a-release-version) Defining a Release Version When creating a new release, you can select a versioning type: * **Patch Version** – For minor fixes or adjustments. * **Minor Version** – For small feature updates. * **Major Version** – For significant changes or breaking updates. * **Canary Version** – For testing purposes before full deployment. Additionally, you can: * Add **Release Notes** to document changes. * Choose to **Export Style Dictionary Configurations**, which include all predefined configurations for various platforms. ### [](#publishing-a-release) Publishing a Release 1. Review and select the desired configuration. 2. Click **Publish Release**. 3. The newly created release will now be visible in the Releases list. ### [](#reviewing-and-downloading-releases) Reviewing and Downloading Releases Once a release is published: * Click on the release to view details, including: * Release notes * Date of publication * Publisher details * **Artifacts** (exportable files) The release artifacts include: * **Tokens (.json)** – A downloadable ZIP file containing all design tokens. * **Style Dictionary Configuration** – A structured JSON file that defines token relationships and export settings. For more details, explore [**Configuration**](/platform/features/configuration) and [**Tokens**](/platform/features/tokens) . _This is the first iteration of the Releases module. Help shape its future by sharing your feedback on the roadmap_ [_here_](https://studio.featurebase.app/p/releases) _._ ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252F0lYFVlxeznddC929W2PS%252FCleanShot%25202025-03-08%2520at%252017.25.54%25402x.png%3Falt%3Dmedia%26token%3Dd8b89640-a82a-41a5-98d8-722d9bf444dc&width=768&dpr=4&quality=100&sign=b1246131&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FYsLmF1ypi1iKipuRNpid%252FCleanShot%25202025-03-12%2520at%252016.58.55%25402x.png%3Falt%3Dmedia%26token%3Dc323f946-1e68-49de-8094-9854cfb02118&width=768&dpr=4&quality=100&sign=ec8dd779&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FgdIVx11KgZnQ345eDRET%252FCleanShot%25202025-03-08%2520at%252017.27.52.gif%3Falt%3Dmedia%26token%3D1473a4ef-6592-4009-bd6b-331f4eb53c9e&width=768&dpr=4&quality=100&sign=14175350&sv=2) --- # Connect Studio to Code | Studio * * * [PreviousUsing Companion by Tokens Studio](/connect-studio-to-figma/using-companion-by-tokens-studio) [NextFeatures](/platform/features) Last updated 24 days ago [](#using-the-studio-cli-and-api) **Using the Studio CLI and API** ----------------------------------------------------------------------- This documentation provides a detailed guide on how to use the Studio CLI and API for managing design tokens efficiently. 1 ### [](#accessing-the-sdk-and-cli-documentation) **Accessing the SDK and CLI Documentation** 1. **Navigate to Studio:** * Open the Studio application. * Go to your **organization dashboard**. * Click the **SDK and CLI** button. 2. **Review the SDK Documentation:** * This page contains the **Studio Software Development Kit (SDK)** and CLI instructions. * It might seem overwhelming, but the focus is on pulling your tokens into your local file system via the CLI. 2 ### [](#creating-an-api-key) **Creating an API Key** 1. **Generate a Key:** * Go to **Personal Settings** in Studio. * Select **API Keys** (below "Edit Profile"). * Create a new API key (e.g., "Test Key"). 2. **Copy and Store the Key:** * Copy the key string and **store it securely** (e.g., in a password manager or vault). * You won’t be able to view the key again after closing the window. 3 ### [](#using-the-api-key-with-graphql) **Using the API Key with GraphQL** 1. **Understanding GraphQL:** * The API operates on a **GraphQL interface**. * You can use tools like **Postman**, **Curl**, or the **Apollo Sandbox** to interact with it. 2. **Access the Apollo Sandbox:** * Open the **GraphQL endpoint**. * Use Apollo Sandbox to explore the API schema. 3. **Configuring the Authorization Header:** * In Apollo Sandbox: * Navigate to **Settings > Connection Settings**. * Add an authorization header: `Bearer ` (replace `` with your API key). 4. **Run a Query:** * Use the query editor in Apollo Sandbox to explore data (e.g., list all projects). * Add required fields like `name` and `organization ID`. 5. **Get Organization ID:** * Navigate to your organization in Studio. * Copy the **Organization ID** from the URL (after `/org/`). 4 ### [](#using-postman-to-call-the-api) **Using Postman to Call the API** 1. **Set Up a Request:** * Create a new **POST request** in Postman. * Use the same endpoint as Apollo Sandbox. 2. **Add Authorization:** * In the **Authorization** tab, select **Bearer Token**. * Paste your API key into the token field. 3. **Define the Body:** * Use the query from Apollo Sandbox and convert it into a single-line string. * Provide necessary variables (e.g., `organization ID`) in the payload. 4. **Send the Request:** * Execute the request to receive JSON responses similar to the Apollo Sandbox. 5 ### [](#using-the-token-studio-cli) **Using the Token Studio CLI** 1. **Install the CLI:** * Run `npm install tokenstudio-sdk`. * If you don’t have a `package.json`, initialize it first with `npm init`. 2. **Run the CLI:** * Use the `--help` flag to view available commands: Copy npx tokenstudio --help 3. **Set Up the CLI:** * Run the `setup` command: Copy npx tokenstudio setup * Enter your API key when prompted. * Select the desired **organization** and **project**. 4. **Pull Tokens:** * Specify the folder to pull tokens into (relative to the config file). * Use the `pull` command: Copy npx tokenstudio pull 5. **Automate the CLI:** * Pass the API key as an environment variable for automation: Copy TOKENSSTUDIO_APIKEY= npx tokenstudio pull 6 ### [](#key-features-of-the-cli) **Key Features of the CLI** 1. **Current Features:** * Pull token sets into local files. * Simplify organization and project selection. 2. **Planned Features:** * **Watch Mode:** Automatically sync changes from Studio to local files. * **Release Artifacts:** Pull releases directly instead of token sets. 7 ### [](#best-practices) **Best Practices** 1. **Secure API Key Storage:** * Use a password manager or secure vault. * Avoid storing keys in plain text. 2. **Automation:** * Use environment variables to prevent manual prompts in CI pipelines. 3. **Explore API Schema:** * Use Apollo Sandbox for schema introspection before creating complex queries. This documentation provides an overview of using Studio’s API and CLI effectively. For further assistance, refer to the official [SDK and CLI documentation page](https://tokens-studio.github.io/studio-app/) . ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FMFRHZO089hWnbrrQMmiY%252FCleanShot%25202025-02-17%2520at%252012.35.31.png%3Falt%3Dmedia%26token%3D7ed56e5e-f929-405b-82a0-5a6a72564dfa&width=768&dpr=4&quality=100&sign=6e6f7072&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252F3a6GKPvk2y57bQEBB1EC%252FCleanShot%25202025-02-17%2520at%252012.52.32.png%3Falt%3Dmedia%26token%3D0a9db65c-fbba-4c3e-ad99-63002b182c58&width=768&dpr=4&quality=100&sign=527bcbf9&sv=2) --- # API keys | Studio * * * [PreviousProject](/platform/platform/project) [NextInviting members](/platform/platform/inviting-members) Last updated 22 days ago ### [](#overview) Overview API keys provide a secure way to connect **Studio** to external platforms like **Figma**. These keys enable seamless integration while ensuring secure authentication. * * * ### [](#accessing-the-api-key-page) Accessing the API Key Page There are multiple ways to navigate to the **API Keys** page: #### [](#id-1.-from-the-project-dashboard) 1\. From the Project Dashboard 1. Open your **Project Dashboard**. 2. Click on **Find your API Key** to access the API Key management page. #### [](#id-2.-from-the-left-panel) 2\. From the Left Panel 1. Locate the **left-side panel** of the interface. 2. Click on the **API Keys** option to navigate directly to the API management page. #### [](#id-3.-using-a-keyboard-shortcut) 3\. Using a Keyboard Shortcut 1. Press **Cmd + K** (Mac) or **Ctrl + K** (Windows) to open the **Quick Menu**. 2. Type **"API Key"** in the search bar. 3. Select **Manage API Keys** to be redirected to the API Key page. * * * ### [](#creating-a-new-api-key) Creating a New API Key To generate a new API Key: 1. Navigate to the **API Keys** page. 2. Click on **Create New Key** (located at the top of the page). 3. Enter a **name** for your API key. 4. (Optional) Add a **description** for better identification. 5. Click **Create**. 🚨 **Important:** Once created, the API key will only be shown **once**. Make sure to copy and store it securely. * * * ### [](#managing-api-keys) Managing API Keys * The **API Keys** page displays a list of previously created keys. * You can **delete** old keys when they are no longer needed. * For security, API keys **cannot be viewed again** after creation. * * * ### [](#using-api-keys) Using API Keys * API keys can be used to authenticate connections between **Studio** and **Figma** (or other external platforms). * They are tied to your **user account**, meaning they grant access to all organizations and projects you are part of. For more details on using API keys for **Figma integration**, refer to the [Connecting Studio to Figma](/connect-studio-to-figma) guide. * * * ### [](#security-best-practices) Security Best Practices * Store API keys in a **secure password manager**. * Avoid sharing API keys publicly or committing them to version control. * Regularly **rotate** keys to maintain security. ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252F29J9QYcXu4VdkSy7XJQM%252FFind%2520API%2520Key.png%3Falt%3Dmedia%26token%3D87bf2511-8a90-46c0-88ef-5e307e135d5a&width=768&dpr=4&quality=100&sign=54053af4&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252F3a6GKPvk2y57bQEBB1EC%252FCleanShot%25202025-02-17%2520at%252012.52.32.png%3Falt%3Dmedia%26token%3D0a9db65c-fbba-4c3e-ad99-63002b182c58&width=768&dpr=4&quality=100&sign=527bcbf9&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FosFcmQxXjpMAvRjrO5Gh%252FCreate%2520api%2520key%2520with%2520cmd%2520k.gif%3Falt%3Dmedia%26token%3D1f49b378-3499-470c-9be0-d07d888f77a3&width=768&dpr=4&quality=100&sign=6f9bd078&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FSvtdTEXN9oJvrjkKUXZz%252FCreate%2520API%2520Key.gif%3Falt%3Dmedia%26token%3D13c4462b-7e02-4527-b436-5b99fc7686d9&width=768&dpr=4&quality=100&sign=f5770c49&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FBoUxxefa1uRuIhf5wWhl%252FManage%2520API%2520Keys.png%3Falt%3Dmedia%26token%3D30eac54f-c6ba-4d88-84aa-0f7c218d26e4&width=768&dpr=4&quality=100&sign=891bcb19&sv=2) --- # Setting up Studio | Studio * * * [PreviousGetting Started](/getting-started) [NextImport from Tokens Studio for Figma](/setting-up-studio/import-from-tokens-studio-for-figma) Last updated 1 day ago 1 ### [](#sign-up) Sign up If you're already signed up you can skip ahead. If you haven't signed up yet, you can sign up here: [https://app.tokens.studio/auth/register](https://app.tokens.studio/auth/register) Sign up with your email or Google account. 2 ### [](#email-confirmation) Email confirmation You will receive a confirmation email within a few seconds. If you don’t see it in your inbox, please check your spam folder. Look for the “Please confirm your registration” email from Tokens Studio. Click the Confirm button or copy and paste the confirmation link into your browser. 3 ### [](#activating-your-account) Activating your Account After confirming your email you will land on the Waitlist page. You should have received a redemption code in your email (or via your team contact). Copy the redemption code and paste it into the “Got a Studio redemption code already?” field. Click Redeem to unlock full access to Tokens Studio. 4 ### [](#creating-your-organization) Creating your Organization Once you have redeemed your code and logged in successfully, you’ll land in the Studio interface. #### [](#organization-setup) Organization Setup 1. On first sign in you will be prompted to create an organization. 2. Give your organization a Name. 3. (Optional) Upload an Icon for your organization. 4. Click Create. 5 ### [](#creating-your-first-project) Creating your first Project #### [](#start-a-new-project) Start a New Project 1. The next step is to create a project. You will be prompted to create a new project. 2. Name your project (e.g., “Test Design System” or “My Brand Tokens”). 3. (Optional) Choose an Icon for the project. #### [](#select-a-template-optional) Select a Template (Optional) 1. Tokens Studio offers starter templates for popular frameworks like Tailwind CSS, Radix UI, Chakra UI, and Open Color. 2. If you prefer a blank setup, leave the template option empty. 3. Click Create. 4. You’ll be taken to the Project Dashboard, where you can start adding or uploading tokens. 6 ### [](#setting-up-your-tokens) Setting up your tokens You can now start setting up your design tokens on Studio. If you already have your design tokens set up in Tokens Studio for Figma plugin you can follow the steps in section [Import from Tokens Studio for Figma](/setting-up-studio/import-from-tokens-studio-for-figma) . If you have your design tokens set up as Figma variables follow the steps in the section [Import from Figma variables](/setting-up-studio/import-from-figma-variables) . If you are starting from scratch, you can click on the button Create your first token set which prompts you to create a token set. 1. Name your token set (e.g., "global", "core", "primitives"). 2. (Optional) Give your token set a description. 3. Select the type of token set you want to create: Static set or Graph based set. 4. Click create. ### [](#watch-the-video-walkthrough) Watch the video walkthrough ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252F8P23sf5OHMQQhwm52kK7%252Fimage%2520%284%29.png%3Falt%3Dmedia%26token%3Df8430d88-207c-4087-a3ab-caa8fb739ac1&width=768&dpr=4&quality=100&sign=bd6d301c&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252F3UQSIjT09rmt46qiS9ZU%252FCleanShot%25202025-02-12%2520at%252013.42.50%25402x.png%3Falt%3Dmedia%26token%3D0d3ed8aa-19ec-41cb-ac99-25c4bdd59c3b&width=768&dpr=4&quality=100&sign=d9c32d21&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FeRYJCZVAdXbckeCXdiwY%252Fimage%2520%285%29.png%3Falt%3Dmedia%26token%3Dea5a0ce7-9bca-47f7-a2ca-3d996bf005bf&width=768&dpr=4&quality=100&sign=9bba4e18&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FAzzwGQABLjdtLyDSEapO%252FNew.png%3Falt%3Dmedia%26token%3D17fcb077-a78d-4e57-a6c1-07757f222658&width=768&dpr=4&quality=100&sign=1e1ccb30&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FIG08wVndrZWJAzSLsOOU%252Fimage%2520%289%29.png%3Falt%3Dmedia%26token%3Ddde93fe2-0f90-4ff6-8a59-9b65ceb21e4b&width=768&dpr=4&quality=100&sign=ea3a8154&sv=2) --- # Nodes | Studio * * * [PreviousCreating a Graph Based Set](/graph-engine/creating-a-graph-based-set) [NextTypes](/graph-engine/types) Last updated 2 days ago ### [](#introduction) Introduction Every node in the Graph Engine follows a consistent design, making them predictable and easy to use. They’re the building blocks of your graph, each handling a specific task—like adding numbers or merging objects—and passing data along to the next step. ### [](#parts-of-a-node) Parts of a Node * **Title**: Tells you what the node does (e.g., "Add" or "Color Scale Generator"), shown at the top. * **Inputs**: Ports on the left where data comes in. You can: * Enter values manually in the **Input Panel** (e.g., type "10" or "#FF5733"). * Connect an output from another node to feed data dynamically. * **Outputs**: Ports on the right where results come out. These can: * Connect to other nodes’ inputs. * Show results in the **Output Panel** for inspection (e.g., see "30" after adding 10 + 20). * **Inline Values (Optional)**: If turned on, displays the current value at each port (e.g., "#FF5733" next to a color output). This can be turned on from the Top Action Bar > Graph settings > Show Inline values. * **Port Types (Optional)**: If enabled, shows the data type (e.g., "number", "color") next to each port for clarity. This can be turned on from the Top Action Bar > Graph settings > Show Inline types. ### [](#types-of-nodes) Types of Nodes **Overview** Nodes range from simple helpers (e.g., adding two numbers) to powerful tools (e.g., generating token sets). They’re grouped into categories to keep things organized, covering math, data manipulation, design-specific tasks, and more. ### [](#node-categories) **Node Categories** * **Token Sets**: Gives access to existing static token sets in the project. * **Design Token Nodes**: Build or tweak tokens (e.g., "Create Design Token" creates a Design Token from inputs). * **Naming Nodes**: Generates dynamic names (e.g., "Numeric Scale" generates numeric scale with optional prefix, suffix, and multiplier). * **Tokens Studio:** Specific to Tokens Studio (e.g., "Themes" retrieves a list of all themes and their options). * **Figma Nodes:** Specific to Figma to allow better integration (e.g., "Scope Color" defines color variable scopes for Figma). * **Accessibility Nodes**: Specialized nodes designed to enhance inclusivity and compliance with accessibility standards in digital products (e.g., "Color Blindness" converts provided colors to the colors as perceived by the specified color blindness type). * **Array Nodes**: Process lists (e.g., "Array Map" applies a graph to each item in an array). * **Color Nodes:** Manage and manipulate colors, enabling generation, blending, conversion, and validation of color values (e.g., "Scale colors" creates a scale/ramp of colors based on a given color by specifying the number of steps up and down). * **CSS Nodes:** Generate, modify, and output CSS properties (e.g., "CSS Map" exposes all the css properties. You can link the input of any other node to the any property that is there in the css map node). * **Curve Nodes:** (e.g., Bezier Curve creates a bezier curve from two control points) * **Generic Nodes:** These nodes help with input/output management, debugging, data structuring, and control flow (e.g., Input allows you to provide initial values for the whole graph). * **Gradient Nodes:** Handles the creation, manipulation, and interpolation of gradient colors (e.g., Gradient Stop creates a gradient stop). * **Logic Nodes**: Make decisions (e.g., "If" checks conditions like "is this number > 5?"). * **Math Nodes**: Handle calculations (e.g., "Add" sums numbers, "Multiply" scales values). * **Preview Nodes:** Provide a visual representation of the node’s output (e.g., "Color Scale" previews a color scale). * **Search Nodes: F**indins specific values within lists or datasets (e.g., "Linear Search" performs a linear search on an array to find the index of a target value). * **Series Nodes:** Generates and manipulates mathematical sequences (e.g., "Geometric Series" generates a geometric series f(n)= c \* (f(n-1)) of numbers based on the base value, steps down, steps and increment). * **String Nodes:** Handles text-based operations, enabling manipulation, formatting, and analysis of string data (e.g., "Lowercase" converts a string to lowercase). * **Typing Nodes:** Ensures data integrity by validating, converting, and managing data types (e.g., "Pass unit" adds a unit to a value if it doesn't already have one). * **Typography Nodes:** Handles text styling, font properties, and typographic calculations (e.g., "Base Font Size" calculate the base font size with DIN 1450. The output is a number representing the font size in pixels.) * **Vector2 Nodes:** Deals with **2D vector operations**, enabling calculations, transformations, and manipulations of two-dimensional coordinate-based data (e.g., "Create vector2" allows you to create a vector2). ### [](#subgraph-and-array-map-nodes) **Subgraph & Array Map Nodes** These are nodes with big-picture concepts: * **Subgraph Node**: * **What It Does**: Groups multiple nodes into one reusable node, showing only the key inputs and outputs. * **How**: Select nodes, right-click, and choose "Create Subgraph". Click on **Subgraph Explorer** to edit inside. * **Array Map Node**: * **What It Does**: Runs a graph on each item in an array and collects the results. * **Example**: Input an array of colors (\["#FF5733", "#33FF57"\]), use an internal graph to convert each to HSL, and output \["hsl(14, 100%, 60%)", "hsl(150, 100%, 60%)"\]. * **How**: Drag in an Array Map node, define its internal graph, and connect an array to its input. ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FVxYGCvC1scFENxKraxkC%252Fimage.png%3Falt%3Dmedia%26token%3D5ead31c8-88fc-47aa-a8ad-5e94d0fe6b31&width=768&dpr=4&quality=100&sign=18cf4aa3&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252F3Z7i12VUmgFabCh5eeLe%252FCleanShot%25202025-02-28%2520at%252020.11.03%25402x.png%3Falt%3Dmedia%26token%3D7f8bcfb8-0c3e-47d4-a4d7-224637a9df06&width=768&dpr=4&quality=100&sign=c92c7401&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FN68letTXQ081RZ4Jg9tr%252FSample.gif%3Falt%3Dmedia%26token%3D4128074c-bc08-45b0-bd61-6cac655f860e&width=768&dpr=4&quality=100&sign=3bc8bd54&sv=2) --- # Project | Studio * * * [PreviousOrganisation](/platform/platform/organisation) [NextAPI keys](/platform/platform/api-keys) Last updated 24 days ago [](#managing-projects-in-studio) Managing Projects in Studio ----------------------------------------------------------------- Studio supports managing multiple projects within an organization, allowing teams to work on separate design systems or initiatives efficiently. This guide walks you through viewing, creating, and managing projects. ### [](#creating-a-new-project) Creating a New Project To create a new project: 1. Click the dropdown at the top of the interface, next to the current project name. 2. Select **Create New Project**. 3. In the popup modal: * Enter a project name. * (Optional) Choose a project icon. * Select a starter template or begin with a blank project. #### [](#starter-templates) Starter Templates Tokens Studio provides starter templates for popular frameworks: * **Tailwind** * **Radix UI** * **Chakra UI** * **Open Color** Choose a template that matches your design system needs, or opt for a blank setup to create your project from scratch. Once the project is created, you’ll be redirected to the **Project Dashboard**. ### [](#viewing-your-projects) Viewing Your Projects To view your projects, navigate to the **Projects** section in the side panel. Here, you'll see a list of all the projects associated with your organization. * Switch between projects by selecting the desired project from the list. * Access **Project Settings** directly from this panel. ### [](#accessing-project-settings) Accessing Project Settings Each project has a dedicated settings page, where you can: * **View project details** such as the project name and icon. * **Update the project icon** to better reflect the project identity. * **Delete the project** if it's no longer needed. To open project settings: 1. Click the project name in the side panel. 2. Select **Settings** from the dropdown menu. Alternatively, access **Project Settings** from the side panel. ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FPHXh6ODJZpuGbeeJUvDz%252FCreate%2520New%2520Project.gif%3Falt%3Dmedia%26token%3D8448545b-e4db-4a46-96e8-7079e4fb79a9&width=768&dpr=4&quality=100&sign=5bb2fa84&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FAzzwGQABLjdtLyDSEapO%252FNew.png%3Falt%3Dmedia%26token%3D17fcb077-a78d-4e57-a6c1-07757f222658&width=768&dpr=4&quality=100&sign=1e1ccb30&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FaGCU5DajqnMOHmoq9H11%252FCleanShot%25202025-02-17%2520at%252017.54.08.png%3Falt%3Dmedia%26token%3De3d78f3a-7019-48e9-8209-d67cb975802c&width=768&dpr=4&quality=100&sign=5253c177&sv=2) --- # Organisation | Studio * * * [PreviousAccounts](/platform/platform/accounts) [NextProject](/platform/platform/project) Last updated 23 days ago Studio supports **multi-organisation management**, allowing users to be part of multiple organisations. This feature enables seamless collaboration across different teams and projects while maintaining control over access and policies. ### [](#accessing-organisations) Accessing Organisations To manage your organisations: 1. Click on the **organisation dropdown** at the top of the left panel. 2. At the bottom of the dropdown, you will see: * **Organisation Settings** – to manage settings and policies. * **Switch Organisation** – to move between different organisations. ### [](#organisation-settings) Organisation Settings The **Organisation Settings** page provides an overview of your organisation and various management options: * **Policies** – Create and manage organisation-wide policies. * **Users & Groups** – View active users, manage invitations, and organise users into groups. * **Organisation Icon** – Upload a custom icon for your organisation. * **Delete Organisation** – Permanently remove an organisation if necessary. **Managing Policies** 1. Navigate to the **Policies** tab. 2. View existing policies or click **Create Policy** to define a new one. 3. Provide: * A **name** for the policy. * A **description** outlining its purpose. * The **definition** that specifies the policy rules. 4. Click **Create** to save the new policy. #### [](#managing-users) Managing Users The **Users** tab provides a list of active users and pending invitations. * To **invite a new user**: 1. Click **Invite Users**. 2. Enter the user's email. 3. Select the appropriate group for the user. 4. Click **Send Invite**. * You can also see **pending invitations** and resend them if needed. #### [](#managing-groups) Managing Groups Groups allow you to assign policies to multiple users efficiently. * To **create a new group**: 1. Click **Create Group**. 2. Enter a **group name**. 3. Select an associated **policy**. 4. Click **Create**. ### [](#switching-between-organisations) Switching Between Organisations To switch between organisations: 1. Open the **organisation dropdown** at the top of the left panel. 2. Click **Switch Organisation**. 3. A list of all the organisations you are part of will appear. 4. Click on an organisation to switch to it. ### [](#creating-a-new-organisation) Creating a New Organisation If you need to create a new organisation: 1. Open the **organisation dropdown** at the top of the left panel. 2. Click **Switch Organisation**. 3. Click on **Create Organisation**. 4. Provide: * The **organisation name**. * An optional **organisation icon**. 5. Click **Create**. After creating the organisation, you will be directed to set up your first project. ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FDiBIfwohbSTbyV6GTuUV%252Fimage.png%3Falt%3Dmedia%26token%3D6780db4b-9112-49c6-925b-d8a93b02d1b6&width=768&dpr=4&quality=100&sign=d96059d8&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FnomjTeFuXWFdc0a6wII2%252FCleanShot%25202025-02-18%2520at%252009.24.41.png%3Falt%3Dmedia%26token%3D20879e0b-1690-4607-9143-d45fa4089526&width=768&dpr=4&quality=100&sign=a8296602&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FyXAA1xfCvhdnCkXlVZ6E%252Fimage.png%3Falt%3Dmedia%26token%3Dbbc0044a-3d62-49d6-be41-4b4968d4b26e&width=768&dpr=4&quality=100&sign=3c897c6d&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FLsIpjh1nmACtaqPzCibQ%252Fimage.png%3Falt%3Dmedia%26token%3D9d43808f-8b54-4efd-badb-adf9140f964d&width=768&dpr=4&quality=100&sign=412ecbdf&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FU5lOZBtFzWXiglWqxDdD%252Fimage.png%3Falt%3Dmedia%26token%3D346b55d4-ab08-4db8-a563-e790e441561a&width=768&dpr=4&quality=100&sign=e50e5db8&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FR0HINWy8btAYnB8aVaw2%252FSwitch%2520Organisation.gif%3Falt%3Dmedia%26token%3De58bb012-fec4-4990-8e39-ad4c2056c081&width=768&dpr=4&quality=100&sign=f0c5cf0b&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FFJIICVAI2ayVf4EmdcCj%252FCreate%2520Organisation.gif%3Falt%3Dmedia%26token%3Dc1d9b169-4907-47f3-ae34-9df7656c2ad7&width=768&dpr=4&quality=100&sign=eb50579f&sv=2) --- # Using Tokens Studio for Figma | Studio * * * [PreviousConnect Studio to Figma](/connect-studio-to-figma) [NextUsing Companion by Tokens Studio](/connect-studio-to-figma/using-companion-by-tokens-studio) Last updated 27 days ago 1 ### [](#open-a-figma-design-file) Open a Figma design file This can be an empty file to ensure that your production designs are not affected while setting up connection with Studio. 2 ### [](#install-launch-tokens-studio-for-figma) Install/Launch Tokens Studio for Figma 1. Go to Plugins > Tokens Studio for Figma. 2. In the plugin’s interface, open a "New empty file". 3 ### [](#adding-a-new-sync-provider) Adding a new sync provider 1. Open the Settings tab on the plugin. 2. Click on Add new sync provider. 3. Select Token Studio from the list. 4 ### [](#setting-up-token-studio-sync) Setting up Token Studio sync 1. Return to Studio and go to the dashboad on the left panel. 2. Click on Find your API key. You can also jump to the API keys page by using the keyboard shortcut cmd+k. 3. The API key is linked to the user which means that it gives access to all the Organisations and Projects that a user is part of. For more info read [Platform > API keys](/platform/platform/api-keys) . 5 ### [](#creating-your-api-key) Creating your API key 1. Click on create a new key. 2. Give your API key a name. 3. (Optional) Give your API key a description. 4. Click create. 5. Copy your API key. IMPORTANT: Your API key will not be visible again, so make sure to copy it. 6 ### [](#finish-adding-studio-sync-on-the-plugin) Finish adding Studio sync on the plugin 1. Return to Figma, on the plugin click already have access. 2. Give a name for the sync for easy identification. 3. Enter the API key in the Personal Access Token field. 4. Choose the Organisation that you want to connect. 5. Choose the Project that you want to connect. 6. You are now connected to Studio and your tokens should reflect in the plugin under the Tokens tab 7 ### [](#bi-directional-syncing) Bi-directional syncing 1. Connection with Studio and the plugin is a bi-directional sync. 2. Any changes on Studio can be pulled in the plugin by clicking on sync icon at the bottom left of the plugin. 3. Any changes on the plugin will be automatically updated on the studio. ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FDd7B9UXRhaSq5uOpxPaE%252Fimage.png%3Falt%3Dmedia%26token%3Dde901464-b0e1-4033-8e4f-35e4c522705b&width=768&dpr=4&quality=100&sign=37202ec9&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FjsCEZEnVlYukes0ZmoLi%252FAdd%2520New%2520Sync%2520Provider.png%3Falt%3Dmedia%26token%3D3e49365a-41eb-4384-9b62-d41fded69a15&width=768&dpr=4&quality=100&sign=47125a88&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252F29J9QYcXu4VdkSy7XJQM%252FFind%2520API%2520Key.png%3Falt%3Dmedia%26token%3D87bf2511-8a90-46c0-88ef-5e307e135d5a&width=768&dpr=4&quality=100&sign=54053af4&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FSvtdTEXN9oJvrjkKUXZz%252FCreate%2520API%2520Key.gif%3Falt%3Dmedia%26token%3D13c4462b-7e02-4527-b436-5b99fc7686d9&width=768&dpr=4&quality=100&sign=f5770c49&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FYrMk9gxndCQ2Avf7IGkk%252FApi%2520key%2520to%2520plugin.gif%3Falt%3Dmedia%26token%3Dc414948f-a693-4234-aefe-436f1468d4d0&width=768&dpr=4&quality=100&sign=be4a439e&sv=2) --- # Configuration | Studio * * * [PreviousTheme Groups and Theme Options](/platform/features/themes/theme-groups-and-theme-options) [NextReleases](/platform/features/releases) Last updated 1 day ago The Configuration Module in Studio allows you to generate one or more output files for your tokens—leveraging Style Dictionary under the hood. By creating multiple configurations, you can target different platforms (Android, Web, iOS, etc.) and formats (CSS, XML, JSON). Each configuration can include one or more themes, apply custom transforms, and expand complex tokens. This page walks through how to set up, preview, and manage these configurations. ### [](#overview) Overview 1. Configurations List (Left Pane) 2. You can create and manage multiple configurations. For example, you might have one configuration for Android (XML output), another for Web (CSS output), etc. 3. Configuration Details (Center Pane) * Name: The name of your configuration (e.g., “Android”, “CSS”, “Web-Mobile”). * Included Themes: Select which theme groups (e.g., “Color Mode”, “Breakpoint”) should be processed in this configuration. Studio will generate separate output files for each theme permutation if you use the `{theme}` placeholder in your destination paths. * Configuration (Visual or Code): Switch between a user-friendly UI or a code editor. In code view, you can add [Style Dictionary](https://amzn.github.io/style-dictionary/) transforms, custom functions, and advanced filtering. * Files & Output: Define multiple files within a single configuration—each with its own output path, transforms, and format. 4. Preview & Output (Right Pane) * Preview Theme Permutations: Toggle between each theme combination (e.g., “light” and “dark” in your CSS config) to preview the generated file. * Copy or Download: Quickly copy the generated code or download all output files. * Code Preview: A read-only preview of the final file (e.g., `.css`, `.xml`, etc.). ### [](#creating-or-editing-a-configuration) Creating or Editing a Configuration 1. Add a New Configuration * Click Add configuration in the left pane. * Give it a Name. * Pick themes from the list of theme groups you wish to include. Each chosen group can create multiple permutations (e.g., light/dark, web/mobile). 2. Visual Editor vs. Code View #### [](#visual-editor) Visual Editor: * Add an Output File (e.g., `css {theme}.css` or `{theme}.xml`). * Choose one or more Transform Groups or single transforms (e.g., `name/pascal`, `tokens-studio`). * Pick the Format (e.g., `css/variables`, `android/resources`). * Specify the build path (folder where files will be generated). * Optionally add a prefix to your token names. #### [](#code-view) Code View: * Exposes the underlying Style Dictionary configuration JSON. * You can write custom transforms or custom filter functions if needed. * Refer to the Style Dictionary documentation for examples of advanced usage. ### [](#expanding-complex-tokens) Expanding Complex Tokens * Under Expand tokens, select which “composition” tokens (typography, border, shadow, etc.) should be decomposed into separate properties. * For example, a typography token could be expanded into separate font size, line height, and font family properties. ### [](#saving) Saving * Click Save changes to persist your configuration. The configuration can now be used in: * Releases: Generate final output from the Releases page. * CLI: Pull or generate tokens in your build pipeline (CLI Documentation). ### [](#previewing-and-downloading-output) Previewing and Downloading Output In the right pane, you’ll see a preview of each generated file: * Theme Permutations: Use the dropdown to switch among the different permutations created by your selected themes (e.g., `web_light`, `web_dark`, `mobile_light`, `mobile_dark`). * File Content: Shows the actual code or XML/JSON structure that Style Dictionary produces. * Copy & Download: Quickly copy the content or download all files at once. ### [](#deleting-a-configuration) Deleting a Configuration If you no longer need a particular configuration: 1. Select the configuration in the left pane. 2. Scroll to the bottom of the center pane and click Delete config. 3. Confirm the deletion. ### [](#next-steps) Next Steps * Run your configuration in the Releases module to package and version your outputs. * Use our CLI or SDKs to automate token export in your build pipeline. * Explore Style Dictionary further for custom transforms, attribute definitions, and filter logic. With the Configuration Module, you can seamlessly produce multiple platform-specific outputs from the same token sets—fully integrated with your themes and custom logic ### [](#watch-the-video-walkthrough) Watch the video walkthrough ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252F0PnuG5U8tsvQEsDFo1nl%252FConfiguration.png%3Falt%3Dmedia%26token%3D1cd69f24-2104-4ced-ad07-906dc10ca17d&width=768&dpr=4&quality=100&sign=368563b1&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FHFmGbOPhzqRiWDT2eyiV%252FConfigurations.png%3Falt%3Dmedia%26token%3D65a6f6b0-e22b-4dc7-a0ad-a5b064246c22&width=768&dpr=4&quality=100&sign=dd4c070a&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FAp13uMf4IXE6XUIoAwEe%252FConfigurations.png%3Falt%3Dmedia%26token%3D6e9f219f-226a-4a70-b2b5-24463650a3a6&width=768&dpr=4&quality=100&sign=287178aa&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FvnJ5rRC9e3eJKcDPW4vV%252FView%2520Code%2520and%2520UI%2520-%2520configurations.gif%3Falt%3Dmedia%26token%3D7fc929f8-e2dd-440c-9dca-2d2080662a4c&width=768&dpr=4&quality=100&sign=c0c695e5&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FdZ2K047Rsb6CUNvk1LAg%252FMultiple%2520Output%2520files.gif%3Falt%3Dmedia%26token%3D4ef987ba-e923-4f9a-b71c-de081e504038&width=768&dpr=4&quality=100&sign=499f2185&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252F6YM7ZN9WRB7NX8ddmy9I%252FPreview%2520Pane.gif%3Falt%3Dmedia%26token%3Dd4520eb5-552e-411c-a9a3-dc5456ad77ae&width=768&dpr=4&quality=100&sign=8aabece9&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FGeLC4zIwtEuA9PKIbgPF%252FCreating%2520%2526%2520Editing%2520Configuration.gif%3Falt%3Dmedia%26token%3D182d6515-3d2b-4ac6-89cb-904f1ed92018&width=768&dpr=4&quality=100&sign=a3b23d6c&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FMutpwEN4BnIuMFn7WHjv%252FOutput%2520File.png%3Falt%3Dmedia%26token%3D8d2df62a-7262-4a85-b5a2-62f9d1207bc3&width=768&dpr=4&quality=100&sign=5adb9430&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FhvGC5FPhGfIn7rENSkYN%252FCode%2520View%2520of%2520Configurations.png%3Falt%3Dmedia%26token%3D9ba29eb3-f796-437c-b573-2fa274073e09&width=768&dpr=4&quality=100&sign=e7b3a1e&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FO5ck1mm3XUqWjKr2BefN%252FExpand%2520Complex%2520Tokens.png%3Falt%3Dmedia%26token%3Ddd116ed9-5619-435d-9682-177c227ab233&width=768&dpr=4&quality=100&sign=2f6f6f1&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252F6YM7ZN9WRB7NX8ddmy9I%252FPreview%2520Pane.gif%3Falt%3Dmedia%26token%3Dd4520eb5-552e-411c-a9a3-dc5456ad77ae&width=768&dpr=4&quality=100&sign=8aabece9&sv=2) --- # Accounts | Studio * * * [PreviousPlatform](/platform/platform) [NextOrganisation](/platform/platform/organisation) Last updated 20 days ago The **Accounts Menu** in Studio provides users with access to profile settings, API keys, feedback options, theme preferences, and sign-out functionality. ### [](#accessing-the-accounts-menu) Accessing the Accounts Menu 1. **Open Studio** and locate the left panel. 2. Scroll to the **bottom left corner** to find your **name and email address**. 3. Click on your **profile** to open the accounts menu. ### [](#account-menu-options) Account Menu Options After clicking on your profile, you’ll see the following options: * **Edit Profile** – Modify personal details such as name, description, and avatar. * **API Keys** – Manage personal access tokens for authentication and integration. * **Share Feedback** – Redirects to the **feature request** and feedback submission platform. * **Switch to Dark Mode** – Toggle between **light** and **dark** themes. * **Sign Out** – Log out of your account securely. ### [](#editing-your-profile) Editing Your Profile 1. Click **Edit Profile** in the accounts menu. 2. Modify your **name** or add a short **description**. 3. Upload an **optional avatar** if desired. 4. Click **Save** to confirm changes. ### [](#managing-api-keys) Managing API Keys For **API key management**, visit the [**API Keys**](/platform/platform/api-keys) section. Here, users can: * Generate new API keys. * View and manage existing API keys. * Copy keys for integration with Studio. > 📌 **Important:** API keys are only shown once upon creation—ensure you store them securely. ### [](#providing-feedback) Providing Feedback * Selecting **Share Feedback** redirects to the **Tokens Studio feedback platform**, where users can submit feature requests and report issues. ### [](#changing-the-theme) Changing the Theme * Users can **switch to Dark Mode** directly from the account menu to adjust their interface preferences. ### [](#signing-out) Signing Out * Click **Sign Out** to securely log out of Studio. ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252F7Rd1h0eiJF4e2WtTjE8A%252Fprofile.png%3Falt%3Dmedia%26token%3D77ddae23-e0a8-4038-bf2d-153b550fd81c&width=768&dpr=4&quality=100&sign=82e51f12&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252Fkp1vkmW92I5cfMHjD9LI%252FCleanShot%25202025-02-21%2520at%252013.24.53%25402x.png%3Falt%3Dmedia%26token%3Dd29394d9-68a5-4a10-b2d5-a0b7f0d4b704&width=768&dpr=4&quality=100&sign=9f5ed32c&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FN8eifpNujIuE6gAvzdq8%252FCleanShot%25202025-02-21%2520at%252013.25.04%25402x.png%3Falt%3Dmedia%26token%3D8618fdab-f91a-4816-ae7d-1a3cd2a1c743&width=768&dpr=4&quality=100&sign=af0dd7e6&sv=2) ![](https://documentation.tokens.studio/~gitbook/image?url=https%3A%2F%2F3657049418-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fy0SFXZjN1sdgdxYM7QPE%252Fuploads%252FD7xMtieuoQjvlm69Y7wM%252FCleanShot%25202025-02-21%2520at%252013.27.06.gif%3Falt%3Dmedia%26token%3D7aa76e58-3fa0-4fae-a317-e06ab07cfbce&width=768&dpr=4&quality=100&sign=9aeff6a2&sv=2) ---