Two-Way Component Sync
Changes in code are flagged in Figma. Changes in Figma flow back to code as a PR.
How it works
The plugin monitors your running dev server for component changes. When a class or token changes in code the corresponding Figma frame is flagged out of date. When a designer edits Variables in Figma the plugin can generate the matching token diff and open a PR. Both directions are covered, so design and code never silently drift apart.
Usage
- 1
Keep your dev server running while designing — the plugin monitors it for changes.
- 2
When a component's classes change in code, its Figma frame is flagged with an 'out of date' badge.
- 3
Click 'Sync from Code' to re-render only the affected frames without rebuilding the whole design system.
- 4
To push Figma Variable changes back to code, click 'Push Tokens to Code' — a PR is opened with the diff.
- 5
Merge the PR to complete the loop: Figma and code are back in sync.