Import from Figma guide

You can create Design Tokens in Tokens Studio by importing your Styles or Variables from Figma into the Plugin. This allows Tokens Studio to be the single place to manage Tokens, Styles, and Variables in Figma.

Each time you Import from Figma, you choose:

• To import Variables or Variables.

• Which Types of Variables or Styles to import at that time.

A new Tokens Studio project screen is next to the Plugin's empty state, with the Styles and Variables menu open. Annotations highlight the user flow to start the Import process.

Variable Types as Token Types

When importing variables:

• Color Variables - creates Color Tokens.
• Boolean Variables - creates Boolean Tokens.
• String/Text Variables - creates Text Tokens.
• Number Variables - created Number or Dimension Tokens.

The Tokens page of the Plugin is shown on the left, and the Styles & Variables menu is opened. The annotations show that the Import Variables were selected to open the Import Variable Options shown on the right.

When you import variables from Figma, you may wish to manually adjust the Token Type.

→ Jump to the guide on Variable Types and Token Types

Style Types as Token Types

When importing styles:

• Color Styles - creates Color Tokens.
• Text Styles - creates Typography Composite Tokens and optional Text Property Tokens.
• Shadows - creates Box Shadow Tokens from Effects Styles.

The user flow from the Tokens page of the Plugin is annotated to show the Styles & Variables menu open and Import Styles as being selected on the left. The Import Styles options are shown on the right, annotated with the numbers 1, 2, and 3 to match their description above.

While the process for importing Styles or Variables is similar, there are some differences to be aware of, described in detail in their guides:

Import Styles from Figma

Import Variables from Figma