Skip to main content

Figma Variables — Fixing Skipped Tokens (Border)

Case: Border tokens in TS often combine width + colour (+ sometimes style/dashes/radius) in a single token, so they’re skipped on export. We’ll rebuild the border directly in Figma with variables for width and colour (and optional dash pattern), then bind them to Icon Button.

Goal: Create border Width (Number) and colour (colour) variables in Figma, bind them to the Icon Button’s border, and make them brand/mode/state aware — all without changing Tokens Studio.

Context: Composed border tokens don’t export as variables. For Icon Button, we’ll create Figma variables for border width and border colour, then bind them on the component so brand/mode/state changes ‘just work’.

Step‑by‑step​

1. Create border variables in Figma​

  1. Open Variables panel (Right sidebar → Local variables).
  2. Click + Create variable and add:
    • icon-button/hightlighted/inverse/border/width → Type: Number → e.g., sm/border-width/small
    • icon-button/hightlighted/inverse/border/colour → Type: colour → e.g., gb/colours/neutral/010
  3. (Optional states)
    • icon-button/border/colour/focus → colour → e.g., brand primary
    • icon-button/border/colour/error → colour → e.g., semantic red
    • icon-button/border/width/focus → Number → e.g., sm/border-width/none
  4. (Optional dashes)
    • icon-button/border/dash → Number → e.g., 4
    • icon-button/border/gap → Number → e.g., 2
  5. Add modes (Light/Dark or Brand) and provide alternate values for each variable.
Export Button
note

Keep names semantic (icon-button/border/*) so they’re easy to discover and reuse.

2. Apply / Bind variables on the Icon Button component​

  1. Select the Icon Button outer container (the frame that visually renders the field outline).
  2. In the right sidebar, under Stroke:
    • Weight → click the variable icon → pick {icon-button/hightlighted/inverse/border/width}
    • colour → link to {icon-button/hightlighted/inverse/border/colour} (from the colour chip’s variable icon)
    • Position: choose Inside (recommended for crisp corners). (Position isn’t variable-bindable)
    • Style: leave Solid (style type isn’t variable-bindable)
  3. If your Icon Button has circular shape:
    • Corner radius can be bound to another variable (e.g., {icon-button/radius}) from your Border-Radius flow.
Export Button
note

You can also bind corner radius to a variable (from your Border-Radius script) if needed.

3. Optional — Per-side borders​

If your design needs different borders per side:

Option A — Per-side strokes (if available on your shape)

  1. Click the individual sides control for stroke.
  2. Bind each side’s weight/colour to side-specific variables, e.g.:
    • icon-button/border/width/top, icon-button/border/colour/top, etc.

Option B — Wrapper layers (universal fallback)

  1. Nest thin helper rectangles for top/bottom/left/right inside the container (auto-layout works fine).
  2. Fill each helper with {icon-button/border/colour}; set height/width to match stroke width (cannot variable-bind size; set via component variant if needed).
  3. Use constraints to pin them to edges.
note

Prefer per-side strokes when your shape supports it. Use helper layers only when you must.

4. States (focus / error / hover)​

  1. Create variants: Default / Focus / Error / Hover.
  2. In each variant, re-bind stroke:
    • Focus → colour {icon-button/border/colour/focus}, weight {icon-button/border/width/focus}
    • Error → colour {icon-button/border/colour/error}
  3. (Optional focus ring) Add an Effect Style shadow to simulate an outer glow; set shadow colour to a colour variable (e.g., focus.ring.colour).
note

Variants keep your bindings intact and make state visuals predictable.

5. Test brand & mode switching​

  1. Open Variables panel.
  2. Confirm the Icon Button’s border updates (colour/width) across variants.
  3. If density modes exist, try smaller/larger width values per mode.

6. Publish & PR​

  1. Don`t forget to always publish the updated Variables library.
  2. Also publish the updated Component library.
  3. If you are already working in a branch, Open a PR with all the token changes and the new exported variables
note

“When border tokens are skipped on export, create Number and colour variables directly in Figma, bind them to the component’s stroke, and switch states with variants. Brand and mode switches will flow through — no Tokens Studio edits required.