Import Variables & Styles

#What this feature does

Import Variables & Styles converts local Figma Variables and Styles from the current file into DTCG-compatible token JSON.

During import, SXL Studio can also:

• update or generate config.json
• update diff-id.json for future diff-safe export

This is the reverse flow of Export Variables & Styles.

#Important scope

• Import works with local collections/styles in the currently opened Figma file.
• It does not use REST import pipelines.
• It can work with or without an existing config.json.

#How to open

1. Open the Tokens tab.
2. Click Import variables & styles in the bottom actions.

In the modal header, the UI title is currently Import from Figma.

#What you select before import

#Variable collections

• Source: local Figma variable collections.
• Header toggle = select all / clear all.
• If collections exist, you must keep at least one selected.

#Style groups

• Source: local Figma text/paint/effect/grid styles.
• Grouping rule: first style path segment (Group/Name -> group Group).
• If groups exist, you must keep at least one selected.

#Type filters

Only enabled types are imported.

#Variables

#Styles

#Config mapping modes

If Strict is selected in UI while no valid config is available, the run is blocked until you switch mode.

#Import behavior options

#Where imported files are written

#With Smart / Strict and config routes

Data is written into enabled paths from config.json (collections[].modes[].files).

#With Generate (or Smart greenfield additions)

A new route layout is created under:

• <collection-slug>/<mode-slug>/...

#Style fallback path

If no route is available for styles, importer can write to:

• styles/imported-styles.json

#How values are serialized

• Variable aliases become {token.path} when alias preservation is enabled.
• Bound style variables (for typography, paint, effects) are serialized with the same alias policy.
• Imported token paths are normalized from Figma names.

#Current limitations and notes

• Image paint styles import as img with empty URL placeholder ({ "url": "" }).
• Some complex effects may be imported as an effects object and require manual cleanup.
• Strict mode depends on an accurate config.json; missing routes are skipped.
• Import updates only selected collections/groups and enabled type toggles.

#Minimal result example

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

#Related sections

• Export Variables & Styles
• Token JSON format
• Scopes & Code Syntax