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.
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
- Spot what a change will ripple into, before you make it
- Group and filter by collection, mode, and type
- Color by tag, gaps, and scopes — 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 [JSON, etc. — your supported formats]. 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
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. variableJar 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
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?
It works with the String Variables you use for multilingual copy. [Alias, Mode, etc. — actual supported scope] can be confirmed before you connect.
Do I have to change my existing Variable structure?
No. It brings in your current structure and values as-is. That said, [any required naming rules or structure] applies.
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?
[If team collaboration is supported] invite teammates to see values in progress, who is on them, and translation state together.
How does it work in a dev environment?
Export confirmed values as [JSON, etc. — actual supported formats]. Your dev team connects that file to their localization resources or token workflow.
Can I apply straight to Figma?
[Per the actual sync method — from the plugin or web app] select confirmed values and apply them to Figma Variables.
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.