All integrations
Figmaintegrations.figma

Design tools

Figma

Keep a Figma file's variables on your approved release, mode for mode, and send designers' changes back for review.

  • release to variables
  • edits to review

Vendor docs

What it does

The Stoaken plugin turns a theme's live release into a Figma variable collection, one column per mode, and keeps it there as releases are approved. Designers' edits to those variables come back to Stoaken as a proposed release, so nothing changes in Figma until it's approved. The full reference is /docs/figma.

Before you start

  • The Figma desktop app.
  • A Stoaken API key from Settings > API keys (it acts as you, with your access).
  • Editor access on the Brand to send changes back. Bringing variables from Figma into Stoaken needs no key, on any plan.

Setup

  1. Download the plugin from /docs/figma and unzip it somewhere it can stay.
  2. In Figma: Plugins > Development > Import plugin from manifest… and choose manifest.json.
  3. Run Plugins > Development > Stoaken and connect with your API key.

Configuration

  • Starting from Figma: under From this file into Stoaken, choose a collection and Copy for Stoaken, then in Stoaken use New Brand > From Figma. The default mode becomes a token set; each other mode becomes a mode on the theme.
  • Bring a release in: pick the Brand and theme, then Bring v1.4 into Figma. Variables are updated in place, so layers stay linked.
  • Each variable carries its CSS name as code syntax, like var(--color-brand-primary).

Try it

Change a colour in Stoaken, release and approve it, then press Update Figma in the plugin: the variable changes in every layer that uses it. Edit a variable in Figma and Propose for review: the release appears in the Command Center marked From Figma.

Troubleshooting

  • The key isn't accepted: it was revoked or mistyped. Make a new one in Settings > API keys.
  • "This theme has no live release yet": propose and approve the first release, then press ↻ in the plugin.
  • Can't find the variables: deselect everything, then Local variables > Open variables and choose "Brand · Theme".

Limits

Figma variables hold colours, numbers, text and true/false. Typography, shadows, borders, gradients and motion stay in Stoaken, as do colours outside sRGB and units other than px and rem. Edits in non-default modes are listed for you to make in Stoaken.

Product names and logos are trademarks of their owners, shown only to say Stoaken works with their products; it doesn’t mean they endorse Stoaken.