Figma
The Stoaken plugin keeps a Figma file’s variables on your live release, and sends designers’ changes back to Stoaken as a release for review. Stoaken stays the source of truth: nothing reaches Figma until it’s approved.
Install
- Download the plugin and unzip it somewhere it can stay.
- In the Figma desktop app: Plugins › Development › Import plugin from manifest…, and choose
manifest.jsonfrom the folder. - Run it from Plugins › Development › Stoaken. Connect with an API key from Settings › API keys in Stoaken; it acts as you, with your access.
Bring a release in
Pick the Brand and theme. The plugin shows the live release and what this file has. Bring v1.4 into Figma (or Update Figma to v1.4) makes the file’s variables match it exactly: tokens added, changed and removed. Do it whenever a release is approved; the release’s rollout window in Stoaken reminds you.
If the variables have changes that aren’t in Stoaken yet, it asks first: send them back for review, or replace them.
How tokens become variables
| Stoaken | Figma |
|---|---|
| A theme | A variable collection, “Brand · Theme” |
| Its modes (light, dark…) | The collection’s modes; the default mode first |
color.brand.primary | color/brand/primary (slashes group variables in Figma) |
| color | Colour, with transparency (sRGB) |
| dimension | Number, in pixels (rem × 16); scoped by what it’s for: gap, corner radius, width and height, font size… |
| number, fontWeight | Number (opacity scoped to opacity, line height to line height) |
| fontFamily | Text (the first family) |
| An alias, like {color.brand.primary} | A link to that variable, where it holds in every mode |
| The token’s description | The variable’s description |
Each variable also carries its CSS name as Figma’s code syntax (var(--color-brand-primary)), so developers inspecting a design see the token they’ll use.
A release stores each token’s final value. Links between tokens come from the theme’s tokens and are kept only where the linked token has the same value as the release in every mode, so Figma always shows exactly what was approved.
Send changes back
When a designer edits a Stoaken variable (a value, a name, a description), adds one to the collection or deletes one, the plugin lists it under Changes in Figma. Tick the ones you mean and Propose for review:
- each edit goes into the token set the token comes from (new tokens into the set you choose), the same edits the API takes;
- a release is proposed with the next version (major for renames and removals, minor for new tokens, patch for values);
- reviewers approve it in the Command Center as any other change; then bring it into Figma and everyone has it.
Proposing needs Editor access on the Brand. Edits in modes other than the default are listed for you to make in Stoaken, where each mode’s values live.
{
"base_hash": "…",
"operations": [
{ "op": "rename", "path": "radius.lg", "to": "radius.large" },
{ "op": "set", "path": "spacing.md", "value": { "value": 10, "unit": "px" } }
]
}What stays in Stoaken
Figma variables hold colours, numbers, text and true/false. Typography, shadows, borders, gradients, transitions and motion (durations, easing) stay in Stoaken; the plugin says how many after each update. Colours outside sRGB and dimensions in units other than px and rem stay too.
Troubleshooting
| If | What to do |
|---|---|
| Stoaken doesn’t accept the key | It was revoked or mistyped. Make a new one in Settings › API keys. |
| “This theme has no live release yet” | Approve a release in Stoaken first; the plugin only brings in approved tokens. |
| Fewer modes than in Stoaken | Figma’s plan limits modes per collection. The default mode is always in; the plugin names the rest. |
| A variable was left alone | One of your own had a token’s name but another type. Rename it, then update again. |
| Proposing is refused | You need Editor access on the Brand, or the set changed in Stoaken since: bring the live release in again and redo the edit. |