Figma Variables · 8言語
デザインの中の文言を、コードのように管理する。
Figma Variables に紐づく文字列を、言語ごとに翻訳してレビュー。承認された値はそのまま Figma とコードに届きます。
言語をひとつ増やすたびに、管理する場所がひとつ増える。
-
翻訳が散らばっている
Figma、スプレッドシート、チャット。文字列ひとつを探すのに三か所を探し回ります。
-
どれが最新かわからない
原文と翻訳は別々のタイミングで編集されます。デザインの文言と翻訳ドキュメントの文言が、気づかないうちにずれていきます。
-
ひとつの修正が五つの作業になる
原文を一行変えるだけで、全言語を確認し、画面ごとに反映し、また開発者に渡し直すことになります。
デザインと翻訳は、同じデータから始まる。
- 01
そのまま取り込む
新しい翻訳ドキュメントを作る必要はありません。既存の Variable の構造・値・メタデータ(スコープや説明も含む)をそのまま取り込みます。
- 02
言語ごとに並べて
原文と翻訳をひとつの画面で見比べ、必要な言語を追加できます。
- 03
見える状態
誰がどの値を変えたか、各翻訳がどの段階にあるか — すべて記録に残ります。
- 04
承認したものだけをエクスポート
レビュー済みの文字列だけが Figma に戻り、開発者が必要な形式でエクスポートされます。
- 05
コードにエクスポート
そのまま貼り付けられる CSS・SwiftUI・Jetpack Compose を Web から生成 — さらに DTCG・JSON・CSV、読み取り専用 API、AI ツール向けの MCP サーバーも。トークンはあなたのもの、ロックインはありません。
- 06
ひとつのトークンセットを、多くのプロジェクトに
デザインシステムはライブラリプロジェクトに置きます。変更を公開すると、各プロダクトのプロジェクトがアップデート受信箱で確認し、必要なものだけを適用します。
- 07
翻訳者ごとに担当言語を
翻訳シートを作るときに翻訳者を加え、それぞれが編集する言語を選びます。ほかの言語は参考として見えますが、ロックされています。翻訳者はいつでも無料です。
リアルタイム共同編集
誰がどの文字列を編集しているか、今すぐわかる
編集中の値と、その担当者が表示されます。二重編集が減り、終わった作業のやり直しも減ります。
- 共有カーソルとカーソルチャット — 作業している場所でそのまま会話
- 役割別のアクセス — デザイナー、編集者、翻訳者がそれぞれ適切な範囲を見る
- どのセルにもコメントスレッド — 議論はその場で解決
トークンの構造を見る
ひとつの値がどこまで届くかをたどる
参照されている Variables とそのつながりが見えます。変更する前に、どの文字列と画面が一緒に変わるかを確認できます。
- プリミティブ → セマンティックの参照を視覚的に配置
- トークンをクリックすると「変更すると N 件に影響」— 影響レンズで、変更前に影響範囲がわかる
- トークンマップ — プロジェクト全体をクラスターで表示し、検索や種類・タグのフィルターで絞り込み
- 「スコープ」や「Figma にない」で色分けし、タグの色を各トークンの横に点で表示 — トークンの状態がひと目でわかる
AI が下書きし、人が承認する
翻訳して、確認して、確定する
AI が翻訳を下書きし、人が原文と見比べて仕上げます。確定するのはレビューを通った文字列だけです。
- 採用・編集・却下できる AI の初稿
- 修正を覚えて次に活かす用語集
- ファイルに届く前にレビューして承認
開発への引き渡しのために
デザインとコードが同じ文言を使う
承認済みの値を DTCG・JSON・CSV でエクスポートするか、CSS・SwiftUI・Jetpack Compose として生成。デザインと開発で翻訳が食い違うことはもうありません。
- CSS・SwiftUI・Jetpack Compose — 決定的な出力で、そのまま貼り付けられる
- 読み取り専用 API で、CI パイプラインから最新トークンを取得
- MCP サーバーで、AI コーディングツールがトークンをコードとして取得
構造を変えても、つながりは保つ
変数の名前を変えても、移動しても — つながりは残る
変数・グループ・コレクションの名前を変えると、それを参照するエイリアスがプロジェクト全体で更新されます。トークンを整理しても、参照や Figma とのつながりは壊れません。
- 名前の変更 — 変数・グループ・コレクションのどれでも、参照するエイリアスが自動で追従
- コレクションへの移動 — 未公開のコレクションなら、次の同期でファイル内の Figma レイヤーが移動先の変数につなぎ直される
- 参照されている変数の削除 — Figma と同じく参照側は最後の値を保持し、元に戻すこともできる · 循環参照は事前にブロック
三つのステップで十分です。
- 1
Figma を接続
Figma ファイルを接続すると、使っている Variables と値が取り込まれます。
- 2
翻訳してレビュー
管理する言語を追加して翻訳します。原文と見比べてから確定します。
- 3
Figma とコードに反映
確定した値を Figma に反映し、開発環境で使える形式でエクスポートします。
トークンそのものより大切なのは、トークンがどう変わるか。
文字列は、一度登録して終わりの値ではありません。原文が変われば翻訳を見直す必要があり、確定した内容はデザインとコードの両方に届かなければなりません。variable Jar はその過程を記録に残しながらつなぎます — 誰が編集したか、どの言語がレビューを通ったか、どのプロパティが対象か、最後にどこへ反映されたか。
- 後付けではなく、最初から組み込まれた翻訳ワークフロー
- プロダクトの言葉を学ぶ用語集
- 翻訳者は無料で参加し、文脈をすべて見られる
- 値だけでなく、スコープと説明も往復する同期
- 黙って上書きしない同期 — 競合は止まり、行ごとに選べる
よくある質問
どの Figma Variables を取り込めますか?
文字列・カラー・数値・ブール値の四種類すべてです。エイリアス(参照)とモードもそのまま取り込まれるので、カラーやスペーシングのトークンも多言語の文言と一緒にひとつのプロジェクトで管理できます。
既存の Variable 構造を変える必要はありますか?
いいえ。今の構造と値をそのまま取り込みます。守るべき命名ルールはなく、名前の '/' で分けたグループもそのまま読み取ります。
AI 翻訳を使わなければいけませんか?
いいえ。翻訳は自分で入力・編集できます。AI 翻訳は出発点となる下書きを作るだけで、レビューと確定は常にあなたが行います。
原文が変わったことはどうやってわかりますか?
原文が編集されると、見直しが必要な言語に印が付きます。変更を確認し、翻訳を直して、もう一度確定します。
複数人で一緒に作業できますか?
はい。ワークスペースにチームメンバーを招待すれば、作業中の値、担当者、翻訳の状態を一緒に見られます。役割はオーナー・チームメンバー・編集者・翻訳者の四つで、翻訳者のシートは無料です。
開発環境ではどう使いますか?
確定した値を DTCG・JSON・CSV でエクスポートするか、そのまま貼り付けられる CSS・SwiftUI・Jetpack Compose のコードを生成します。読み取り専用 API と MCP サーバーで最新のトークンを直接取得することもできます。
Figma に直接反映できますか?
はい。プラグインの同期ボタンひとつで、ファイルの変数を Web アプリに送り、Web アプリでの変更をファイルに反映します。両側で同じ変数が変わった場合は、Web のグリッドで行ごとにどちらを残すかを選びます。
変数の名前を変えたり別のコレクションに移したりすると、Figma とのつながりは切れますか?
いいえ。名前の変更は名前の変更として Figma に届くので、レイヤーのバインドは保たれます。別のコレクションに移した変数は、次の同期でファイル内のレイヤーがつなぎ直され、つなぎ直せないものは行に表示されます。どちらかのコレクションが公開済みライブラリの場合、移動は反映されずに拒否されます。その変数を参照するエイリアスは新しい名前に自動で追従します。
すでに使っている Figma Variables から始めましょう。
新しい翻訳ドキュメントを作る前に、まずデザインの中の文言をつなぎましょう。翻訳、レビュー、Figma とコードへの反映がひとつの流れで続きます。
variable Jar は、Figma Variables のテキストを Web で翻訳・レビューし、Figma とコードに反映する Web アプリ兼 Figma プラグインです。Google でログインすると、アカウントの作成に必要な名前・メールアドレス・プロフィール画像だけを受け取ります。 プライバシーポリシー