Figma バリアブルとは

Figma バリアブルとは、色・数値・文字列・真偽値を Figma ファイル内に保存する名前付きの値で、ライトとダークのようなモードに対応します。Figma におけるデザイントークンの標準的な形ですが、Figma の REST API から読み出すには Enterprise プランが必要です。

何ができるのか

バリアブルを使うと、Figma ファイルは生の値を繰り返す代わりに名前付きの値を保持できます。対応する型は色・数値・文字列・真偽値の四つです。

コレクションにまとめることができ、各コレクションはモードを持てます。多くはライトとダークですが、密度・ブランド・プラットフォームなども使われます。バリアブルに結び付けたレイヤーはモードの切り替えで更新され、これによって Figma 内のテーマ切り替えが本来あるべき形で機能します。

バリアブルは別のバリアブルのエイリアスにもできます。こうしてセマンティック層を作ります。text/danger が red/600 を指す、という形です。

バリアブルは Figma の中の問題を解決します。外の問題は未解決のままで、チームが驚くのはここです。

Figma の REST API でバリアブルを読むには Enterprise プランが必要です。 エンドポイント自体は存在し、Professional と Organization のプランでは 403 を返します。

これはツールを評価するうえで無視できない帰結を持ちます。Figma のトークン同期を REST API 経由で謳うものは、Enterprise アカウントでは動き、多くのチームが使っているプランでは文字どおり何もしません。購入前に直接尋ねる価値があります。営業資料には通常書かれていないからです。

プラグインは影響を受けません。プラグイン API はファイルの内側からバリアブルを読み、プラグインはどのプランでも動きます。伝送路がプラグインであるツールは、あなたの Figma のプランに関係なく動作します。

Figma のバリアブルはデザイントークンの一形態であり、その適用範囲は Figma に限られます。それ自体では可搬性がありません。CSS、Tailwind、W3C のトークン JSON フォーマットへの書き出しは組み込まれていません。

その隔たりを埋めることこそ、トークン系ツールの役割です。選択は、どこでも動くプラグインか、そうではない REST API か、の二択になります。

Flash DSM がまさにこの理由で Figma プラグインを伝送路に使っています。どの Figma プランでもバリアブルを読み、公開をレビュー可能なトークン差分に変え、CSS・Tailwind・Tokens Studio JSON・GitHub のプルリクエストへ書き出します。