Figma Color Variables Import / Export

About this plugin

Register the Color Token created with Token Studio etc. in Figma's Variables.

Usage

●Import from JSON to Variables

1. Export Color Token to JSON by Token Studio or other tools

2. Import Color Token to JSON by this plugin

●Export Variables to JSON

Click 「Export With Alias」 or「Export With RawValue」

(This JSON file can be read by Token Studio)

Function

• ✅ Solid (Fill 100%)
• ✅ Solid (Fill not 100%)
• 🙅 Gradient
• 🙅 String
• 🙅 Number

Sample Token

{
  "color": { // immediate object key to Collection name
    "primitive": {
      "white": {
        "value": "#FFFFFF",
        "type": "color"
      }
    },
    "semantic": {
      "background": {
        "light": {
          "value": "{color.primitive.white}",
          "description": "light background",
          "type": "color"
        }
      }
    }
  }
}