Figmaのスタイル機能・バリアブル機能を活用する

• 今回のレッスンの内容
• Figmaのスタイル（Styles）機能
• Figmaのスタイルとは
• テキストスタイルを登録する
• カラーを登録する
• エフェクトを登録する
• Figmaのバリアブル（Variables）機能
• バリアブルとは
• 数値バリアブルを使ってみる
• カラーバリアブルを使ってみる

今回のレッスンの内容

Figmaにはフォントサイズやカラーなどを登録することができるスタイル機能、バリアブル機能が用意されています。

スタイル機能もバリアブル機能も、基本的な使い方はどんなデザインでも変わりありません。
本レッスンでは、前回のレッスンで上半分まで作成したデザインから、スタイルやバリアブルの登録を行います。
そして、次のレッスンで登録したものを活用して下半分のデザインを完成させます。

Figmaのスタイル（Styles）機能

Figmaのスタイルとは

Figmaでのスタイルとは、プロパティや属性のセットを登録するための機能。
定義で言うとわかりにくいのですが、よく使うテキスト設定や、色などを登録して、手軽に呼び出せるようにする機能と考えて下さい。

現時点では、4つのタイプがスタイル登録できるようになっています。

• テキスト
• 色
• エフェクト
• レイアウトグリッド

上3つのタイプは、ここまでの制作でも使ってきましたね。

最後のレイアウトグリッドとは、フレームに付属している機能です。
レイアウト制作の補助に使うガイド（グリッド）を自分で設定し、表示させる事ができます。

グリッドデザインを制作する時のガイドや、BootStrapなどのようなグリッドシステムに沿ったレイアウトを作りたい時に使うと便利です。

テキストスタイルを登録する

ファーストビューにある一番大きなテキストを選択して、スタイルを作成してみましょう。

デザインタブのテキスト項右上、: : のアイコンが“スタイル”です。

: :をクリックするとテキストスタイルが開きます。
右上にある + アイコン（スタイルを作成）を使って、選択しているテキストのスタイルを登録しましょう。

以下では名前を「XXL」としました。説明は入れても入れなくても構いません。

これでテキストのスタイルが登録されました。

登録したスタイルの変更は、スライダーのようなアイコン [スタイルを編集] から行います。
スタイルを編集すると、そのスタイルを使用しているテキスト全てに変更が反映されます。

先ほどと同じように、イベント部分の見出しもスタイルとして登録ておきましょう。
こちらは名前を「XL」にしました。

スタイルのグルーピング

今登録したテキストのスタイルは2つだけなので問題ありません。
が、数が多くなると目的のスタイルが探しにくい・紛らわしい……という状態になるかもしれません。

スタイルをグループ分けしておくと、わかりやすくなるのでやってみましょう。

キャンバス内で何も選択されていない状態にすると、右サイドバーでローカルスタイルの一覧が見えます。
全選択解除はEscキーを使うと便利です。

登録した２つのテキストスタイルを選択して右クリック。
[ 新しいフォルダの追加 ] を選択し、フォルダ名（グループ名）をつけるとグルーピングできます。

スタイルを作成する際、名前に半角スラッシュ（/）を入れて区切ることでも、グループの指定・作成が出来ます。
使いやすい方でスタイルを整理して下さい。

カラーを登録する

次に、色のスタイル登録を試してみましょう。
基本的な使い方はテキストとほぼ一緒です。

カラーの場合は、スタイル登録時にタブでスタイルかバリアブルかを選択する形になっています。
塗り、もしくは選択範囲の色 の右にあるスタイルとバリアブル（: :アイコン）から追加してみましょう。

登録はスタイルのタブの方で行います。

カラー名は、お好きに命名して構いません。
配色に変更があっても良いよう役割から名付ける（default、primaryなど）ことも多いですが、今回はわかりやすく色名を入れます。

スタイルでは、グラーデションや、複数の塗り設定を1つのスタイルとして登録することもできます。

エフェクトを登録する

これまで作ってきたデザインだと、カードに影を設定するのにエフェクトを使っています。
このカードのドロップシャドウ設定を、スタイル登録してみましょう。

メインコンポーネントの方からスタイルを登録します。

すでに設定されているスタイルを登録する場合は、名前をつけるだけでOK。
名前は、shadow-mdにしました。

Figmaのバリアブル（Variables）機能

色のスタイル登録時に登場したバリアブル。
こちらも色の登録ができる機能ではありますが、スタイルとは似て非なる存在です。

バリアブルとは

バリアブル（Variables）は、名前そのまま、変数を登録・利用できる機能です。

2023年からリリースされた比較的新しい機能で、本記事作成時点ではまだオープンβ版となっています。
バリアブルで設定できるものは、現在以下の４つ。

• カラー
• 数値
• 文字列
• ブーリアン（真偽値）

バリアブルを設定すると、デザインと開発のズレを減少できる（一貫性を保てる）、デザイン制作・更新作業の手間が削減できる、などの利点が期待できます。以下のようなこともFigmaだけで出来るようになります。

• デザイントークンに基づいた構築
• ダークモードなど、テーマ切り替えが出来る（バリアブルモード）
• プロトタイプモードで、実際の動きに近い操作ができる

バリアブルモード（テーマの切り替え）がFigmaの売りのようですが、残念ながら無料版では使えない機能。
プロフェッショナルプランでも4つ上限なので、カラーテーマや表示幅・多言語対応など広く使いたい場合は上位プランが必要そうです。

機能制限があるもの、開発領域にかかってくるものを除いて、Webデザイン制作で恩恵を感じやすいバリアブルは数値とカラーの２つ。
それぞれ簡単に見ていきましょう。

数値バリアブルを使ってみる

小規模Webデザインの場合でも、バリアブルの恩恵を感じやすいのが「数値」の設定です。
使ってみましょう。

キャンバス上で何も選択していない状態で、右サイドバーからローカルバリアブルをクリック。
バリアブルの作成を押して、数値を選択します。

登録したい名前と、値（数値/半角数字）を入力します。

以下では、今回のデザイン制作用に「pc-maxcontent：1200」としてコンテンツ幅を入力してみます。
入力できたら、右上のバツで閉じてください。

カード4つを囲んているフレームを選択します。

現在は、横幅（W）に手打ちで1200などの数を打ち込んでいるはずです。
プルダウンを開いて、バリアブルを適用を選んでみましょう。

登録した「pc-maxcontent」を選択します。

Wの表示が、薄いグレーの背景色になりました。
これはバリアブルから数値を参照していることを示しています。

バリアブルの登録を変更してみましょう。

Escキーで選択解除し、右サイドバーからバリアブル（ローカルバリアブル）を開きます。
pc-maxcontentの値を、別の数値に打ち替えます。

カードを並べたフレームを見ると、数値が更新されていることがわかります。

メインコンポーネントと同じく、大本であるバリアブルの値を変えれば全体に反映されます。
変更が出た時に、ページの構成要素1つ1つを直さなくて良いので、すぐ変更作業も終わりますね。

バリアブルに登録した数値は、幅だけではなく余白・角の丸み（border-radius）などの設定にも使えます。

上図のように余白用の数値を設定して、項目ごとにグループ化してまとめておくことも出来ます。

オートレイアウトの間隔、パディングなどの設定に使っても良いですね。

カラーバリアブルを使ってみる

カラー（色）の登録は、スタイルとバリアブルの両方で行うことが出来ます。

とりあえず、バリアブルの方で色を登録してみましょう。
方法はスタイル登録とほぼ一緒。名前をつける時に“バリアブル”タブを選択するだけです。

ライブラリの表示は、バリアブルが四角、スタイルが円で表示されることがわかります。
ただ、この時点だと、それ以外のスタイルとバリアブルの違いはわかりませんよね。

スタイルで色を登録するのと、バリアブルで色を登録する違いは大きく3つあります。

1. バリアブルのカラーは、複数の塗り・グラデーションを保存できない
2. バリアブルはモードの切替ができる
3. バリアブルで設定した値は、別のバリアブルにも継承できる

1. 登録できる色の数・種類

バリアブルのカラーで登録できるのは、単色１つだけです。

スタイルの場合は色・グラデーション・画像などを選択でき、複数登録することも可能です。

2. バリアブルモードを使った切替

こちらは、無料版では使えないと紹介したバリアブルモードを使った切り替え機能です。

同じtext-primaryという名前のバリアブルで、モードに応じて色を変えるように設定することが出来ます。
ダークモード用の表示、WordPress管理画面のようにユーザーがカラーテーマを切り替えられるようにしたい時などに便利です。

画像元：Figma tutorial: Intro to variables

3. 設定した値の継承

バリアブルで設定した値は、別のバリアブルやスタイルに利用することが出来ます。
例えば、設定した青色(blue）を使ってスタイルでグラデーションを作ったり。

text-linkという新しいバリアブルを作成したりできます。

バリアブルを使って継承していく利点は、大本であるblueの色を変えると、連動して全て色が変わることです。
今回のように blue → text-link とだけ登録すると「blueの１つで良くない？」となりますが、こうした設定はデザインシステム・デザイントークンを使った設計時に用いられます。

使用可能な色の一覧があって、そこから使う色をピックアップ。
その色をどこで（どういう目的で）使うか仕分けていくようなイメージです。

こうすることで、変更があった時・色味を変えたいパーツが出てきた時に、更新作業の手間を最小限に抑えることが出来ます。

ただし、こうしたデザインシステムから作り込むのはクロスプラットフォームアプリケーションや、大規模Webサイトが大半。小規模サイトやLPでは使いません。規模が大きくなければ、デザインシステム作りに工数をかけるよりも、そのまま制作・更新したほうが早いためです。

今回のようなデザインで「デザイン制作の効率アップに色を登録する」のであれば、スタイルでもバリアントでも、どちらでも良いです。
下図は複数回使用する色、登録しておいたら便利そうな色だけスタイル登録した場合です。

デジタル庁のデザインシステムが公開されており、Figmaで実際に作成されたデザインデータを閲覧・操作することも可能です。
シンプルでわかりやすく、Figmaの機能を使う例としても役立つので、デザインシステムを学びたい方はチェックしてみて下さい。