Keep a Figma file in sync with Flash
The plugin draws your system into Figma with Light and Dark variables, then keeps the file following Flash while the panel is open.
Why this is a plugin
Figma lets outside tools read and write variables through its Variables REST API, and that API only works on Figma Enterprise. Most teams aren't on Enterprise, so a "connect your Figma account and sync" button would fail for them with a 403. A plugin runs inside the file, where Figma's Plugin API can read and write variables on any Figma plan. So that's what we built.
- Build file draws your system into Figma: variables, styles and pages.
- Push sends a designer's variable and style edits to Flash as a proposal.
- Live sync keeps the file following Flash as the system changes.
The Figma plugin with variables and styles comes with Pro and up.
Install it
- In Flash, open [[Sync > Sources > Figma plugin]] and click Download plugin (.zip). The zip comes packaged with your system's tokens. You can also get it from [[Export > Figma]].
- Unzip it somewhere you'll find again.
- In the Figma desktop app, open any file and go to [[Plugins > Development > Import plugin from manifest…]]. Pick
manifest.jsonfrom the folder.
It appears as Flash. A connection strip sits at the top, with three tabs under it: Flash → Figma, Figma → Flash and Agents. The last one connects the Figma agent to Flash; Flash in the Figma agent covers it.
[!WARNING] If the panel says "Failed to fetch", the Flash host baked into
manifest.jsondoesn't match the one it's trying to reach. Don't edit the manifest by hand. Download the plugin again from Export > Figma and the right host comes with it.
Build the file
A plugin downloaded from Flash already contains your system, so the Flash → Figma tab opens on its name and only asks what to build. Leave all five ticked the first time: Variables + styles, Foundations page, Components page, Icons page, Modules page. Then click Build Figma file. A progress bar counts the steps off as it goes, and the panel remembers what you ticked for the next file.
| What gets built | What's in it |
|---|---|
| Variables | Collections with Light and Dark modes |
| Styles | Paint, text and effect styles, bound to the variables |
| Cover page | Counts of what was built |
| Foundations page | Your colours, type, spacing and the rest, drawn as specimens |
| Components page | Every component as a variant set, with every state drawn |
| Icons page | Every icon as a component, grouped by size |
| Modules page | The composed sections from your Modules view |
Run it again later and it updates in place. A variable that no longer exists in Flash is marked in Figma, not deleted, so a layer that used it doesn't lose its binding without warning.
Install your system's fonts on the machine before you build. If a font is missing, the build falls back to Inter, and every text style ends up pointing at the wrong typeface.
Pair the file with your system
Building needs no pairing. Push and live sync do.
- In Flash, go to [[Sync > Sources > Figma plugin]] and click Generate pairing code. You get 8 characters, a live countdown from 10 minutes, and a note that the code works once.
- In the plugin, click Connect at the top, paste the code into Pairing code and click Pair with Flash.
The strip changes to Paired, followed by your system's name.
New code cancels the code on screen, so don't press it while a colleague is halfway through typing. Pairing needs admin access on the system. And an unsaved system can't be paired: save it to your workspace first.
Push designer edits back
Under Mode to read, leave "Each collection's default" selected and a file with Light and Dark modes sends both. Click Push variables to Flash.
Push never edits your system directly. It sends the file's variables as a change set that waits in [[Sync > Review]]. Someone opens it, reads the diff, and clicks Apply, or Discard and then Yes, discard. When nothing is waiting, the tab says "Nothing waiting".
Push sends the file's variables plus its paint and text styles. Effect styles stay in Figma, so a shadow change belongs in Flash. A push never deletes anything either: a token the file cannot hold, like a blur stack or a composite border, stays exactly as it is in Flash.
Turn on live sync
Live sync goes the other way: the file follows the system. In the plugin's Live sync row, click Turn on, then pick how often it checks:
| Check every | Good for |
|---|---|
| 10 seconds | A pairing session where someone edits in Flash while you watch Figma |
| 30 seconds | The default, fine for most days |
| 1 minute | Large files where a refresh takes a moment |
| 5 minutes | Leaving the panel open all day |
Sync now checks immediately. When the tokens changed, the plugin refreshes variables and styles in place. Pages are never rebuilt. Every fill, stroke, radius and text property the plugin drew is bound to a variable, so everything re-themes where it stands and your layout stays put.
[!WARNING] Live sync only runs while the plugin panel is open. Figma has no background plugins. Close the panel and the file stops following Flash. Reopen it and the first check runs straight away.
Back in Flash, the Figma plugin card reports the last sync, for example "Live sync: last applied to “Checkout redesign” 4 minutes ago · revision 42". If the file has fallen behind, it says so: "Figma is 3 revisions behind".
Which system a file follows is stored in the file itself, so a new file never picks up another file's sync by accident. Reset this file makes the file forget what it follows. Your pairing and variables stay. It takes two clicks, because plugin panels can't open a confirm dialog. Disconnect removes the pairing itself.
When designers edit variables directly
They will, and that's fine as long as everyone knows the rule: Flash is the source, and Figma can propose.
| Situation | What to do |
|---|---|
| A designer tweaks a colour variable in Figma | Push it, review it in Sync > Review, apply. It's now in the system for everyone |
| A designer edits a variable and doesn't push | Push before the next change lands in Flash, or live sync can refresh over it |
| A designer changes an effect style | Make the change in Flash instead. Push carries variables, paint styles and text styles, not effects |
| Someone wants to explore without touching the system | Work in a copy and use Reset this file on it |
| A token was deleted in Flash | The Figma variable is marked, not removed. Rebind the layers, then clean up |
On Pro and up, the GitHub app on the Sync view can also open a pull request automatically when a Figma change is approved, so a push from a designer can end up as a PR for your developers with nobody copying values by hand. From there, getting your tokens into code covers the rest of the path.