Keep Figma in step

Install the plugin

1. 1Download the Stoaken plugin and unzip it somewhere it can stay.
2. 2In the Figma desktop app: Plugins › Development › Import plugin from manifest, and choose its manifest.json.
3. 3Run it and press Sign in with Stoaken (below). An API key from Settings › Developer access (API keys) still works too: Use an API key instead.

Sign in with Stoaken

1. 1In the plugin, press Sign in with Stoaken. Your browser opens a Stoaken page (sign in there if you aren’t).
2. 2The page says who the plugin will act as and what it can do. Check it shows the same four letters as the plugin, then press Connect Figma.
3. 3It shows a code like ABCD-EFGH: Copy it, paste it into the plugin and press Sign in. The plugin then says Signed in as your name.

The code works once, for 10 minutes, and only in the plugin that opened the page: the plugin keeps a secret of its own that goes with the code, so a code seen on someone’s screen is no use to anyone else. A wrong code says so, with Try again; after 5 wrong codes, or after 10 minutes, start again (a few seconds).

Why sign in rather than paste a key? Signed in, the plugin acts as you and only does the plugin’s own work (it can’t change settings, invite people or delete anything). And the releases you send from it count as yours: with velocity on, one that breaks nothing goes live by itself once its checks pass. With a pasted API key, which any script could use, a release from the plugin always waits for a person to approve it.

The sign-in is kept only in Figma on your computer (never in the file), and lasts 30 days from the plugin’s last use (at most 180 days, then sign in again). Sign out in the plugin, or Sign out… under Figma plugin (you) on Settings › Developer access, ends it at once.

Bring a release in

Pick the Brand and theme, then Bring v1.4 into Figma. The theme becomes a variable collection with a mode per Stoaken mode; colours, sizes, numbers and font families become variables, linked where your tokens are linked. After each approval, the release’s rollout window reminds you to update Figma.

Waiting for a release to be approved? Press ↻ (Check for new releases) at the top of the release card: the plugin reads Stoaken again and says when a new one is live. It also checks by itself when you come back to the plugin after a while.

Bringing a release in makes the collection match it exactly, removals included: a token a release removed is removed from Figma too, even a variable made before (in a collection you adopted, or by another copy of the plugin). Your own variables that were never Stoaken tokens are left alone.

Find them in Figma’s Variables: with nothing selected, open Local variables in the right sidebar and choose the “Brand · Theme” collection. The plugin shows these steps after each update, with Deselect for me.

Send changes back

Edit, rename, add or delete Stoaken’s variables in Figma, then open the plugin: Changes in Figma lists them. Tick the ones you mean and Propose for review. They go into the right token sets as a release (marked From Figma, with the file’s name), reviewed in the Command Center like any change, and reach Figma once approved. Stoaken stays the source of truth.

Send components

In the plugin’s Components tab, select component sets, components or instances on the canvas (or a frame that holds them) and Read the selection. The plugin works out, on your computer, what would come in: how many components (with the ones they use), a first reckoning of how close each one is, which variables and styles became tokens, and anything that needs a decision. Seeing that is free on every plan and sends nothing. An instance you select comes in with its own choices (its variant and its text) as the component’s defaults.

What comes in is Figma’s look, property by property: auto layout as flex (gaps, padding per side, alignment, wrap, hug, fill or fixed per side, min and max, absolutely placed layers), fills and gradients, strokes per side (inside, centre or outside, dashed), corner radii, shadows and blurs, blend modes, clipping, and text with its font, weight, line height, spacing, case, decoration, truncation and mixed styles. Every bound variable becomes a token, keeping Figma’s value where your Brand has no such token. A picture fill comes in as a placeholder, and anything only roughly matched is named in the component’s receipts.

Send N components stores it for the Brand’s Review (importing comes with the Light and Team plans; the 14-day trial includes it), with a picture of each from Figma, so the Review can measure how close it came. Review it in Stoaken opens it: answer any questions there and import. The plugin never imports by itself, and Stoaken never reads your Figma files: it only gets what you send. If something fails, Try again is right there; changed the selection? Read the selection again.

Icons go the same way: select them, or the frame or row that holds them. An icon is a drawing of vectors up to 128 px a side: a component (a variant of an icon set too), an instance of one, a frame or group of vectors (a background shape is fine), a boolean operation or a plain vector. They become the Brand’s shared icons, stored once, and the components that use them link to them; the Review settles each name clash. Anything the plugin didn’t pick up is listed with why (it holds text, it’s bigger than an icon); if those are icons after all, Send them as icons anyway.

Something came in wrong? Copy details for support (in the Components and Icons tabs) copies what the plugin read of the selection: layer types, sizes, layout, styles, properties and variable ids, with short texts and no pictures. Paste it into a message to Stoaken.

Bring icons in

In the plugin’s Icons tab, choose Live release (what the newest live release carries) or Working set (the icons as they are in Stoaken now), then Bring icons in. Each icon becomes a component on a “Stoaken icons” page, named as in Stoaken, sized by its viewBox, and bound to the Brand’s colour variable when it has a colour token. One read of Stoaken, however many icons.

Bring them in again to update them: each icon stays the same component (wherever you moved it), so every instance follows and nothing is copied. The plugin lists what was added, updated, deprecated and retired; retired icons are kept, so instances keep working, until you delete them.