Setting up Studio

1

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

Sign up with your email or Google account.

2

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

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

Once you have redeemed your code and logged in successfully, you’ll land in the Studio interface.

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

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)

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

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.

If you have your design tokens set up as Figma variables follow the steps in the section 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