Bridge · #417

Tokens as Figma variables

Figma reads variables in a specific shape: one collection, one mode, colours as 0–1 RGBA channels and dimensions as numbers. This endpoint builds that shape from the same token parse the other exports use — 14 colour variables and 5 number variables, in a collection called “Motif UI” with a single Dark mode.

Download figma-variables.json The raw tokens →

The variables in the payload

color/bgcolour{"r":0.023529411764705882,"g":0.027450980392156862,"b":0.043137254901960784,"a":1}
color/panelcolour{"r":0.043137254901960784,"g":0.050980392156862744,"b":0.0784313725490196,"a":1}
color/raisedcolour{"r":0.06274509803921569,"g":0.07450980392156863,"b":0.11372549019607843,"a":1}
color/edgecolour{"r":1,"g":1,"b":1,"a":0.08}
color/edge-strongcolour{"r":1,"g":1,"b":1,"a":0.16}
color/inkcolour{"r":0.9294117647058824,"g":0.9411764705882353,"b":0.9686274509803922,"a":1}
color/ink-dimcolour{"r":0.6039215686274509,"g":0.6392156862745098,"b":0.7098039215686275,"a":1}
color/ink-faintcolour{"r":0.4549019607843137,"g":0.4823529411764706,"b":0.5294117647058824,"a":1}
color/accentcolour{"r":0.5450980392156862,"g":0.3607843137254902,"b":0.9647058823529412,"a":1}
color/accent-2colour{"r":0.13333333333333333,"g":0.8274509803921568,"b":0.9333333333333333,"a":1}
color/accent-3colour{"r":0.9568627450980393,"g":0.4470588235294118,"b":0.7137254901960784,"a":1}
color/mintcolour{"r":0.20392156862745098,"g":0.8274509803921568,"b":0.6,"a":1}
color/ambercolour{"r":0.984313725490196,"g":0.7490196078431373,"b":0.1411764705882353,"a":1}
color/dangercolour{"r":0.9725490196078431,"g":0.44313725490196076,"b":0.44313725490196076,"a":1}
radius/xsnumber6
radius/smnumber10
radius/mdnumber16
radius/lgnumber24
radius/xlnumber34

The file (5.7 KB, first 30 lines)

{
  "collections": [
    {
      "name": "Motif UI",
      "modes": [
        {
          "name": "Dark"
        }
      ],
      "variables": [
        {
          "name": "color/bg",
          "resolvedType": "COLOR",
          "description": "Motif bg",
          "valuesByMode": {
            "Dark": {
              "r": 0.023529411764705882,
              "g": 0.027450980392156862,
              "b": 0.043137254901960784,
              "a": 1
            }
          }
        },
        {
          "name": "color/panel",
          "resolvedType": "COLOR",
          "description": "Motif panel",
          "valuesByMode": {
            "Dark": {
              "r": 0.043137254901960784,

What was left out, and why

Nothing was skipped in this build: every colour parsed as a hex or rgba value and every radius parsed as a number. When one does not — a token that is a gradient, say — it will be listed here instead of being turned into a guessed colour.

Font stacks are absent by design: Figma's variable types are colour, number, string and boolean, and a font stack is none of those in a form Figma would apply. The tokens file carries them as arrays instead.

The import itself is manual — Figma has no public endpoint a static site can push to, and this page will not pretend otherwise. What it can do is guarantee that the file is built from the same values the site renders with, and that anything unrepresentable is reported in the panel above rather than quietly dropped.