Import from Figma

Import variables & styles reads the local variables and styles of the open Figma file and writes them into token JSON files. It is the reverse of export: a convenient way to start from an existing Figma library or to pull edits made directly in the Variables panel back into JSON.

Import works only with the local collections and styles of the current file. It does not read variables from linked libraries; to copy values from another file use Cross-file Sync.

#How to import

1. On the Tokens tab press Import variables & styles at the bottom of the tree. The Import from Figma window opens.
2. Tick the variable collections and style groups to import. The checkbox in a section header selects or clears all. At least one collection or group must be selected.
3. Check the types: the Color, Number, String, Boolean, Timing, Easing switches for variables and Typography, Fill, Gradient, Shadow, Blur, Effects, Glass, Grid for styles.
4. Choose the mode and options, then press Import. New files appear in the tree and config.json is updated.

The Import from Figma window: variable collections, style groups, types and options.

A style group is the first segment of a style name: the Brand/Primary and Brand/Secondary styles fall into the Brand group.

#Modes

If config.json cannot be read or fails validation, the Smart and Strict modes stop the import with an error message and write nothing. Fix the file or choose Generate.

#Options

#Where the files go

• In the Smart and Strict modes the data goes into the files listed for the collection and mode in config.json.
• New paths in the Generate and Smart modes are created as <collection>/<mode>/….
• Styles without a route of their own are written into styles/imported-styles.json.

#What you get in JSON

• Color, Number, String and Boolean variables become tokens of the matching types; Timing and Easing become duration, cubicBezier and easing tokens.
• A colour with a bound opacity variable comes back as a colour reference with an alpha modifier that references the opacity token.
• Text styles become typography tokens, paint styles fill or gradient, grid styles grid with the pattern, count, gutterSize, sectionSize, offset and alignment fields. Only the first layer of a multi-layer paint style is imported.
• Effect styles come back as layers: a style made of shadows only gives a shadow token, a style with mixed effect kinds, including noise, texture, glass and progressive blur, gives an effects token. A style made of glass layers only is imported by the Glass switch, a mixed one by Effects. Variables bound inside styles are kept as references.
• Images in paint styles are imported as img tokens with an empty address that you fill in by hand.
• Variable names turn into token paths; the / separator becomes group nesting.

A minimal result:

{
  "color": {
    "brand": {
      "primary": { "$type": "color", "$value": "#0057ff" }
    }
  },
  "typography": {
    "body": {
      "md": {
        "$type": "typography",
        "$value": { "fontFamily": "Inter", "fontSize": "16px", "lineHeight": "24px" }
      }
    }
  }
}

#If something does not work

#See also

• Exporting variables and styles
• Token JSON format
• Cross-file Sync