Round-trip a token edit from Figma to a PR
A designer changes a colour or spacing in Figma. The plugin captures the diff and opens a pull request against your tokens. Five steps, free tier, ships today.
When this applies
The token round-trip is the path for token-only changes on existing components — colour values, spacing scale, corner radii, typography sizes, shadows. The surface is small and structured, so the plugin can map a Figma Variable edit 1:1 to a specific CSS variable (or DTCG token) update.
For other kinds of change, take a different path: new components start with bootstrap from a Figma frame, and structural component edits (layout, variants, copy) are the Pro research track — follow it on the pricing page.
The flow, in five steps
1. Edit a Figma Variable
Open the Variables panel and change a token — for example, swap the primary colour on the Secondary theme, or bump radius-md from 6 to 8. The Figma design system Inkbridge generated already has every fill, stroke, and text colour bound to these Variables, so the edit propagates across the whole Figma page instantly.
2. Open the plugin → click Push Tokens to Code
The plugin reads the current Variables, compares them to the values it recorded last time it generated the design system, and stages the diff. No setup beyond having a GitHub token configured in the plugin settings (one-time).
3. Preview the code diff
Inkbridge shows you the exact file paths and lines that will change before anything is committed. In CSS-first mode the target is usually src/app/tokens.css; in DTCG mode it’s design-tokens/tokens.dtcg.json. If the design system is already in sync — nothing changed since the last push — the plugin reports it instead of opening an empty PR.
4. Create the pull request
Add a commit message, click Create Pull Request. The plugin opens a branch, commits the diff, and pushes the PR — all from inside Figma, no terminal. The PR shows up on GitHub like any other code change: CI runs, preview deploys build, reviewers comment.
5. Review, merge, refresh
Review the diff like any code change. Merge. The next time someone runs Generate Design System Page in Figma, the plugin reads the updated tokens and the Figma view rebuilds with the merged values. Production code already picked them up at the next deploy. Both views — Figma and live site — converge on the merged source.
What the PR actually contains
Token PRs are deliberately tiny. A typical colour-swap PR is a single-line change in your token source file. For example, a primary colour adjustment in CSS-first mode:
.secondary {
- --primary: oklch(50% 0.16 250);
+ --primary: oklch(56% 0.18 245);
--primary-foreground: oklch(0.982 0.018 250);
}No story files touched. No component files touched. No JSX surgery. The PR is small enough to review at a glance — which is what makes this loop safe to run on every token tweak.
Why this round-trips cleanly
Design tokens have a small, structured surface: a colour value, a pixel, a font size. There’s no ambiguity about what changed or where it should land in code. The plugin tracks exactly which CSS variable (or DTCG token path) backs each Figma Variable, so the mapping is mechanical — not a translation.
That’s why this part of the loop ships on the Free plan today and stays free. Structural edits (changing a component’s layout, adding a variant, moving an element) don’t round-trip this cleanly — there’s real interpretation involved between a Figma frame and a JSX tree. That’s the Pro research track.
Where the loop closes
Once the PR merges, the story file (and every component that references the tokens) reads the new value. Production code picks it up at the next deploy; the Figma design system page picks it up at the next Generate. The designer’s edit in Figma is now reflected in the canonical artifact, with a full audit trail in git. Other designers opening the Figma file get the merged value automatically.
Limitations
Today: tokens only. Structural component edits (layout, variants, new sub-elements, copy changes inside the component) are the Pro research track — see the two shapes of the loop for context, and the Pro waitlist to follow that work as it ships.