# 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. - Source: https://flashdsm.com/blog/figma-plugin-live-sync - Published: 2026-09-11 - Author: Flash DSM Team - Track: Learn Flash - Reading time: 5 min read --- ## 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 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 1. 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]]. 2. Unzip it somewhere you'll find again. 3. In the Figma desktop app, open any file and go to [[Plugins > Development > Import plugin from manifest…]]. Pick `manifest.json` from the folder. It appears as **Flash DSM Builder**, with two tabs: **Build file** and **Sync with Flash**. > [!WARNING] > If the panel says "Failed to fetch", the Flash host baked into `manifest.json` doesn'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 **Build file** tab only asks what to build. Leave all four ticked the first time: Variables + styles, Foundations page, Components page, Modules page. Then click **Build Figma 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 | | 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. 1. 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. 2. In the plugin, open **Sync with Flash**, type the code into **Pairing code** and click **Pair with Flash**. The panel changes to "Connected to" 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 reads variables, not styles. If a designer changes a text style in Figma, that change stays in Figma. Type changes belong 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 a text or effect style | Make the change in Flash instead. Push only carries variables | | 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](/blog/export-tokens-to-code) covers the rest of the path.