Figmaには、デザインの管理や修正を効率化する「スタイル」と「バリアブル」という機能があります。
しかし、機能の説明だけでは「実際にどう使うのかわからない」と感じる方も多いのではないでしょうか。
そこで今回は、実務でも活用できるシンプルなワイヤーフレームテンプレートを作成しながら、スタイルとバリアブルの基本的な使い方を解説します。
見出しや本文のテキストスタイル、カラーや余白のバリアブルを設定し、修正しやすいデザインデータの作り方を学んでいきましょう。

※本記事は2026年6月時点のFigma Desktop（無料のStarterプラン）の画面で解説しています。アップデートにより画面表示が異なる場合があります。

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

Figmaには、デザインを効率よく管理するためのスタイル（Styles）とバリアブル（Variables）という機能があります。
どちらもデザインの統一や修正をしやすくするための機能ですが、役割が異なります。
まずは、それぞれの特徴を見ていきましょう。

スタイルとは？

例えば、テキストスタイルならフォントや文字サイズ、太さ、行間などをまとめて保存できます。
見出しや本文など、同じデザインを繰り返し使いたい場合に便利です。

テキストやグラデーション(※)など、複数の設定をまとめて管理したいものはスタイルが向いています。
一方、単色カラーのように「値」を管理したいものは、バリアブルで管理するのが現在のFigmaでは扱いやすい方法です。

※バリアブルではグラデーションそのものを管理できないため、実務でもグラデーションはスタイルを使用しています。

バリアブルとは？

例えば、サイト全体で使用するメインカラーや余白をバリアブルとして登録しておけば、値を変更するだけで適用箇所へ一括で反映できます。
デザインの修正やテーマカラーの変更など、後から値を変更する場面で力を発揮します。

スタイルとバリアブルは何が違うの？

スタイルとバリアブルは、どちらか一方が優れているわけではありません。

スタイルはデザインをひとまとまりで管理するための機能、バリアブルはデザインで使う共通の値を管理するための機能です。
管理したいものが違うからこそ、Figmaでは両方の機能が用意されています。
今回は、この2つを組み合わせてワイヤーフレームテンプレートを作成していきます。

今回作成するワイヤーフレームテンプレート

ここからは実際に、スタイルとバリアブルを活用したワイヤーフレームテンプレートを作成していきます。

まずは、新しいデザインファイルを作成しましょう。
※Figmaでは、デザインファイルはチーム内で管理します。まだチームを作成していない場合は、最初にチームを作成してください。

ファイル名は後から見返しても分かりやすいように、wireframe_templateやweb_templateなど、テンプレートであることが分かる名前を付けておくのがおすすめです。

ファイルを作成したら、 ここからは実際に、スタイルとバリアブルを活用したワイヤーフレームテンプレートを作成していきます。
今回は、コーポレートサイトや採用サイトでも活用しやすい、シンプルな構成のテンプレートを作成します。
まずは完成イメージを見てみましょう。

• Header

• FV（ファーストビュー）

• Message

• Feature

• CTA

• Footer

実際のデザインでは、ここに画像や装飾が加わりますが、今回はワイヤーフレームとして必要な要素のみで作成します。
このテンプレートを作成しながら、テキストスタイルの登録方法とバリアブルを活用した色・余白の管理方法を学んでいきます。

テキストスタイルを作成しよう

まずは、見出しや本文で使用するテキストスタイルを登録しておきましょう。
テキストスタイルを作成しておくことで、フォントサイズや太さ、行間などをひとまとめに管理できます。
後からデザインを変更したい場合も、スタイルを編集するだけで適用しているテキストへ一括で反映されます。
今回は、以下の3種類のテキストスタイルを作成します。

• h1…48px

  ファーストビューの見出し

• h2…32px

  各セクションの見出し

• body…16px

  本文

h1スタイルを作成する

まずは、ファーストビューで使用するメインコピーのスタイルを作成します。

• 1.テキストツールで見出しを作成します。
• 2.フォント、サイズ、太さ、行間などを設定します。
• 3.右側のプロパティパネルからテキストスタイルを作成し、typography/h1という名前で保存しましょう。

※テキストスタイルは「typography」や「text」などのグループ名で管理することが一般的です。
どちらが正しいというわけではなく、チーム内で命名ルールを統一することが大切です。
今回はデザインシステムや海外のUIキットでもよく使われるtypographyで作成していきます。

h2スタイルを作成する

次に、各セクションで使用する見出し用のスタイルを作成します。
サイト全体で同じ見出しデザインを使用するため、ここでスタイル化しておくことで、統一感のあるデザインになります。

h1と同じようにtypography/h2として保存しましょう。

bodyスタイルを作成する

最後に、本文で使用するテキストスタイルを作成します。
本文は最も使用頻度が高いため、最初にスタイル化しておくことで、作業効率が大きく向上します。
typography/bodyとして保存しましょう。

画面右のスタイルプロパティに「typography」グループが追加され、各テキストスタイルが登録されていることを確認してみてください。

カラーバリアブルを作成しよう

次に、ワイヤーフレーム全体で使用する色をバリアブルとして登録します。
ワイヤーフレームはグレーを基調として作成することが一般的ですが、バリアブルの使い方を学ぶことも目的としているため、実際のWeb制作でよく使用するprimaryカラーもあわせて登録します。
今回は、以下のようなカラーバリアブルを作成します。

• color/primary

• color/text

• color/background

• color/border

• color/white

これらを最初に登録しておくことで、後から色を変更したい場合も、一括で更新できるようになります。

primary（メインカラー）

ボタンやリンクなど、アクセントとなる要素で使用する文字色です。
ワイヤーフレームでは、濃いグレーなどにし、CTAボタンの背景色などに適用していきます。
color/primaryとして保存しましょう。

text（文字色）

見出しや本文で使用する文字色です。
文字色をバリアブルで管理しておくことで、サイト全体の文字色を簡単に変更できます。
color/textとして保存しましょう。

background（背景色）

セクションやページ全体の背景色に使用します。
背景色を変更したい場合も、バリアブルを更新するだけで一括反映されます。
今回作成するのはワイヤーフレームなので、白や薄いグレーなど、シンプルな色を設定し、
color/backgroundとして保存しましょう。

border（枠線の色）

枠線や区切り線に使用します。
カードや入力フォームの枠線など、さまざまな要素で使い回せるため、あらかじめ登録しておくと便利です。
borderのカラーは、例えば

• カードの枠線

• セクションの区切り線

• フォームの入力枠

• テーブル

等で濃さを変えることがよくあります。

なので

• border/light

  セクションの区切り線や補助的な線など、目立たせたくない部分で使用

• border/base

  カードやフォームなど、通常使用する枠線

• border/dark

  重要な情報を囲む枠線や、コントラストを高めたい場面で使用

のように役割で管理しておくと、後々色の変更や修正があっても、名前を変更する必要がありません。

※base、lightなどの命名ルールに決まりはありません。実務では「100」「200」のような番号や、「subtle」「strong」など、チームごとのルールで管理することもあります。

white（白色）

白い文字やアイコン、背景などで使用します。
例えば、color/primaryを適用したボタンの文字色や、白背景のセクションなどで使用します。

color/whiteとして保存しましょう。

カラーバリアブルを適用してみよう

作成したバリアブルを、ボタンや文字、背景などに適用してみましょう。
その後、primaryの色を変更すると、同じバリアブルを使用しているボタンやリンクの色が一括で更新されます。
このように、バリアブルを活用することで、デザインの修正やブランドカラーの変更にも効率よく対応できます。

これで、ワイヤーフレームで使用するカラーバリアブルの準備ができました。
次は、余白を統一して管理するためのスペーシングバリアブルを作成していきます。

余白用バリアブルを作成しよう

色だけではなく、余白もバリアブルで管理できます。
以前ブログでもご紹介した8pxルールでスペーシングしていきましょう。

▼8pxルールについて詳しく知りたい方は、こちらの記事もご覧ください。
Figmaで使う「8pxルール」とは？初心者でもレイアウトが整う余白設計の基本

あらかじめバリアブルとして登録しておけば、あとから全体的に余白を広げたい、もうすこしせまくしたいといった修正が入っても、一括で変更できるようになります。
分かりやすいように、余白の数値で命名していきます。

• spacing/8

• spacing/16

• spacing/24

• spacing/32

• spacing/48

• spacing/64

これで、よく使う余白をいつでも同じルールで適用できるようになりました。
今回はワイヤーフレーム用で大まかに余白を作成しましたが、細かく8px毎に登録しておいてもOKです。

次は、作成したテキストスタイルとバリアブルを実際にワイヤーフレームへ適用していきましょう。

ワイヤーフレームに適用しよう

• 1.テキストスタイルを適用する
• 2.カラーバリアブルを適用する
• 3.余白用バリアブルを適用する

下図のような六角形がバリアブル設定アイコンです。
各所のこのアイコンをクリックしてバリアブルを適用していきます。

修正が楽になることを体験してみよう

スタイルやバリアブルは、デザインを効率よく作成するためだけでなく、後から発生する修正にも役立ちます。

例えば、以下のような変更も、スタイルやバリアブルを編集するだけで適用箇所へ一括で反映されます。

• 1.見出しサイズを変更する
• 2.テーマカラーを変更する
• 3.セクション間の余白を変更する

実際に数値や色を変更しながら、デザイン全体へ反映される様子をぜひ試してみてください。

テンプレート化して今後の案件に活用しよう

お疲れ様です！
ここまでで、テキストスタイルとバリアブルを活用したワイヤーフレームテンプレートが完成しました。
このテンプレートは、自分だけでなく社内のメンバーと共有することで、今後の案件でも繰り返し活用できます。

テンプレートを社内で共有する

テンプレートを社内で活用するには、まずテンプレートを管理するチームへメンバーを招待しましょう。
チームの「共有」をクリックし、メンバーのメールアドレスを入力するか、招待リンクを発行して共有します。
メンバーがチームへ参加すると、テンプレートファイルへいつでもアクセスできるようになります。

案件ごとにテンプレートを複製する

例えば、新しい案件が始まったら、以下のような流れで運用すると便利です。

• 1.テンプレートファイルを複製する
• 2.ファイル名を案件名に変更する
• 3.複製したファイルを編集しながらデザインを進める

新しい案件が始まったら、まずテンプレートファイルを複製します。
テンプレートは社内共通のひな形として残しておき、制作は複製したファイルで進めましょう。

複製したファイルは、案件用のチームへ移動して管理します。
これにより、テンプレートは常に同じ状態を維持したまま、案件ごとに自由に編集できます。
ブランドカラーが異なる案件ではcolor/primaryの値を変更するだけでボタンなどの色を一括で更新できます。
また、見出しサイズや余白もスタイルやバリアブルを編集するだけでデザイン全体へ反映されるため、効率よく制作を進められます。

まとめ:テンプレートを育てていこう

今回は、実務で使えるワイヤーフレームテンプレートを作成しながら、Figmaのスタイルとバリアブルの使い方をご紹介しました。
テンプレートを使い続ける中で、

• 見出しの種類を追加する

• カラーバリエーションを増やす

• よく使う余白を追加する

など、自分やチームの制作スタイルに合わせて育てていくのもおすすめです。
最初はシンプルな構成で十分です。
案件を重ねながら少しずつ改善していくことで、自分やチームにとって使いやすいテンプレートへ育てていきましょう。