Figmaのバリアブルとスタイル

Figmaには、テキストや色を定義するために、バリアブルとスタイルといった概念があります。役割や違いについて、コーダーに馴染みのあるSassの機能に例えながら確認していきましょう。

バリアブルとスタイルはデザインモードの右のパネルから定義できる。

Figmaの「バリアブル」と「スタイル」の違い

バリアブルとは？

• 「色」「数字」「文字列」といった単一の値を定義する変数
• テーマ切り替えや値の一元管理に便利
• Sassでいうところの $変数 に近い

$font-size-md: 16px;
$font-family-ja: 'Noto Sans JP';
$font-weight-bold: 700;

$color1: #000;
$color2: #fff;

🎨 スタイルとは？

• Figma上で 「テキスト」や「色」などのスタイル群 を名前付きで定義
• 実際のコンポーネントに適用できる、見た目のテンプレート
• Sassでいうところの %placeholder に近く、@extend で再利用するイメージ

%text-base {
  font-size: $font-size-md;
  font-family: $font-family-ja;
  font-weight: $font-weight-bold;
}

%color-gradation {
  background-image: linear-gradient(to right, $color1, $color2);
}

バリアブルとスタイルの関係

例えば以下のように構成できます：

• バリアブルで：
  • font-size-md = 16
  • font-family-ja = 'Noto Sans JP'
  • font-weight-bold = 700
• スタイルで：
  • text-base というスタイルに対して
    • font-size = font-size-md
    • font-family = font-family-ja
    • font-weight = font-weight-bold

バリアブルで定義した値を、スタイルで使用可能です。

コーダー視点での理解：Sassとの対応イメージ

CSS変数としての利用

コーダーがCSS変数として使えるもの

CSS変数の命名規

基本構造

var(--バリアブル名)

例：black → var(--black)

階層構造（Figmaグループ/スタイル名から変換）

• グループが font-size、バリアブル名が md の場合：

var(--font-size-md)

• スタイル名が text/heading/large の場合：

var(--text-heading-large)

使い分けの指針

• バリアブルは“値”の定義
  • 例：色コード、数値、フォント名など
  • → 変化や切り替えが必要な単一のプロパティに使う
• スタイルは“見た目”のパッケージ
  • 例：フォントサイズ＋太さ＋行間など
  • → UIコンポーネントにまとめて適用したい場合に使う

単位の粒度としては、バリアブル → スタイル → コンポーネント、のイメージ。

🧑‍💻 実装連携の利点

• バリアブルは、実装者が CSS変数としてそのまま使える
  • var(--font-size-md) など
• スタイルは、デザイン意図の共通認識を保つのに便利（命名ベースでUIの整合性が保てる）