Figma Variables · 8 languages
Manage the copy in your designs like code.
Translate and review the strings linked to your Figma Variables, language by language. Approved values flow straight to Figma and your code.
Every language you add is one more place to maintain.
-
Translations are scattered
Figma, spreadsheets, chat. Finding a single string means digging through three places.
-
You can't tell which is current
The source and its translations get edited at different times. The copy in your design and in your translation doc quietly drift apart.
-
One edit becomes five tasks
Change one source line and you check every language, apply it screen by screen, and hand it back to the developers again.
Design and translation start from the same data.
- 01
Bring it in as-is
No new translation doc to build. Pull in your existing Variable structure, values, and metadata — scopes and descriptions included — exactly as they are.
- 02
Side by side, by language
Compare source and translation on one screen, and add the languages you need.
- 03
State you can see
Who changed which value, and what stage each translation is at — it stays on the record.
- 04
Export only what you approve
Only reviewed strings go back to Figma, exported in the format your developers need.
- 05
Export to code
Generate paste-ready CSS, SwiftUI, and Jetpack Compose right from the web — plus DTCG, JSON, CSV, a read-only API, and an MCP server for AI tools. Your tokens, no lock-in.
- 06
One token set, many projects
Keep your design system in a library project. Publish a change and each product project reviews it in its Updates inbox — applying only what it wants.
- 07
Each translator, their own languages
Add translators when you create a sheet and pick the languages each one edits. Other languages stay visible for context but locked. Translators are always free.
Real-time collaboration
See who's editing which string, right now
Values being edited and who's on them are shown. Fewer double-edits, less redoing finished work.
- Shared cursors and cursor chat — talk right where the work is
- Role-based access — designers, editors, and translators each see the right scope
- Comment threads on any cell — resolve discussions in place
See your token structure
Trace how far one value reaches
See referenced Variables and their connections. Before you change one, see which strings and screens change with it.
- Primitive → semantic references, laid out visually
- Click a token for 'Changing this affects N' — the impact lens shows how far a change reaches before you make it
- Token Map — the whole project as clusters, narrowed down by search and type or tag filters
- Color by 'Scopes' or 'Not in Figma', tag colors as dots beside each token — token state at a glance
AI drafts, you approve
Translate, check, confirm
AI drafts translations; people compare against the source and refine. Only reviewed strings are confirmed.
- AI first drafts you can accept, edit, or reject
- A glossary that remembers your corrections for next time
- Review and approve before anything reaches your file
Built for developer handoff
Design and code use the same copy
Export approved values as DTCG, JSON, or CSV — or generate them as CSS, SwiftUI, and Jetpack Compose. Design and development stop using different translations.
- CSS, SwiftUI, and Jetpack Compose — deterministic, ready to paste
- Pull the latest tokens over a read-only API from your CI pipeline
- An MCP server so AI coding tools fetch tokens as code
Change the structure, keep the links
Rename variables, move them around — the links stay
Rename a variable, group, or collection and every alias that points to it updates across the project. Tidying up your tokens no longer breaks references or Figma links.
- Rename — variable, group, or collection, every alias pointing to it follows automatically
- Move to collection — for unpublished collections, the file's Figma layers are re-linked to the moved variable on the next Sync
- Delete a referenced variable — referrers keep its last value, like Figma, and it's undoable · circular references are blocked up front
Three steps is enough.
- 1
Connect Figma
Connect a Figma file and it pulls in the Variables and values you're using.
- 2
Translate and review
Add the languages to manage and translate them. Confirm after comparing against the source.
- 3
Apply to Figma and code
Apply confirmed values to Figma and export in a format your dev environment can use.
What matters more than tokens is how they change.
A string isn't a value you register once and forget. When the source changes, the translation needs another look; confirmed content has to reach both design and code. variable Jar connects that process on the record — who edited it, which languages passed review, which properties it targets, and where it was last applied.
- Translation workflow built in — not bolted on
- A glossary that learns your product's language
- Translators join free, with full context
- Sync that round-trips scopes and descriptions — not just values
- Sync that never silently overwrites — conflicts stop, and you pick per row
Simple pricing
Free
$0
Translate, review, and sync to Figma — free
Pro
$19 /seat/mo
Unlimited projects + 30,000 AI translation cells/month + team collaboration
Need a bigger team? Contact us
Questions, answered
Which Figma Variables can I bring in?
All four types — string, color, number, and boolean. Aliases (references) and modes come along as-is, so you manage color and spacing tokens alongside multilingual copy in one project.
Do I have to change my existing Variable structure?
No. It brings in your current structure and values as-is. There are no naming rules to follow — groups split by '/' in names are read exactly as they are.
Do I have to use AI translation?
No. You can enter and edit translations yourself. AI translation only drafts a starting point — review and confirmation are always yours.
How do I know when the source changes?
When the source is edited, the languages that need another look get flagged. Check the change, revise the translation, and confirm again.
Can several people work together?
Yes. Invite teammates to your workspace to see values in progress, who's on them, and translation state together. There are four roles — owner, team member, editor, and translator — and translator seats are free.
How does it work in a dev environment?
Export confirmed values as DTCG, JSON, or CSV, or generate paste-ready CSS, SwiftUI, and Jetpack Compose code. A read-only API and an MCP server let you pull the latest tokens directly, too.
Can I apply straight to Figma?
Yes. The plugin's single Sync button sends the file's variables to the web app and applies changes made in the web app back to the file. If both sides changed the same variable, you decide per row in the web grid which side to keep.
If I rename a variable or move it to another collection, does it lose its Figma link?
No. A rename reaches Figma as a rename, so layer bindings stay. A variable moved to another collection has its layers in the file re-linked on the next Sync, and anything that can't be re-linked is flagged on the row; if either collection is a published library, the move is refused rather than applied. Aliases pointing to it follow the new name automatically.
Start with the Figma Variables you're already using.
Before building a new translation doc, connect the copy inside your design first. Translation, review, and applying to Figma and code all follow in one flow.
variable Jar is a web app and Figma plugin for the text in your Figma Variables: translate and review it on the web, then sync it back to Figma and export it to code. When you sign in with Google, we receive only your name, email address, and profile image, to create your account. Privacy Policy