デザインファイルが増えていくほど、「どこで何を使っているか」が分かりづらくなり、後から修正するときに作業が複雑になりがちです。
特に、エンジニアと一緒にプロダクトを作る場合は、デザインのルールが整理されているかどうかで、実装のしやすさが大きく変わります。

Figmaのバリアブルとスタイルは、デザインを“見た目”だけでなく“仕組み”として管理するための重要な機能です。どちらをどう使い分けるか理解しておくと、デザインの変更に強くなるだけでなく、エンジニアがコードに落とし込みやすいデザインファイルを作ることができます。

この記事では、その違いを整理しながら、初心者でも簡単に使うことができる「スタイル」設定の方法をまとめました。

テキストスタイルの設定

1. 文字を選択して、タイポグラフィの右上のボタンをクリック
2. プラスボタンをクリック
3. 名前を記入。今回は「title/lg」
4. 「スタイルの作成」をクリック

スラッシュを入れることで、階層分けできるので便利です。

テキストスタイルの変更（文字を大文字のみにする）

1. 何も無いとこをクリック
2. 右にテキストスタイルが出てくるので、変更したい箇所のボタンをクリック
3. テキストスタイルを編集の「…」をクリック
4. 大文字と小文字の設定を「AG」にする

おすすめの名前

色スタイルの設定

1. 登録したい色を選択
2. 塗りの四角が四つのボタンをクリック
3. 「＋」をクリック
4. 「スタイル」をクリック
5. 名前を設定
6. 「スタイルの作成」をクリック

こちらも文字同様に、「名前/名前」のようにスラッシュを入れると階層分け出来る

バリアブルの設定

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

Figmaでは、デザインのルールをまとめて管理する方法として「バリアブル」と「スタイル」があります。
どちらも設定を共有できるという点は同じですが、それぞれ役割が少し異なります。

スタイルは、単純に「見た目を揃えるための設定」をまとめたものです。
色、文字、グリッド、シャドウなどのデザインの外見を統一したい時に、パパッと適応することが可能です。

一方、バリアブル（Variables）は、もっと柔軟で、プロパティそのものをデータのように扱える仕組みです。
色や数値だけでなく、スペーシング、ブレークポイント、テーマ切り替えなど「デザインを構造的に管理する」ために使います。

複数の値をまとめて切り替えることもできるので、ライト／ダークテーマの変更や、デバイスサイズごとの調整がしやすいのがメリットです。

簡単に言えば
スタイル → 見た目を揃えるための“固定の設定”
バリアブル → デザインの仕組み全体をコントロールする“変化する値の集合” というイメージ。

なので、基本的にはバリアブルで設定するのが良いです。 ただ現在では課金しないと複数のバリアブルを作成できないので注意。

バリアブルの作成方法

1. 何も無いとこをクリック
2. 右のメニューの「バリアブル」を選択
3. 「+」作成をクリック
4. 色の場合は「色を選択」

バリアブルは「シフト」＋「リターン」で複製可能