【Figma入門⑥】スタイルとバリアブルを理解し、デザイン作業の効率をアップしよう
デザイン制作を進めていく際、よく使う設定を登録しておいて呼び出せると楽ですよね。
Figmaにはフォントサイズやカラーなどを登録することができるスタイル機能、バリアブル機能が用意されています。各機能の特徴と使い方、どんな場面で活用できるのかをご紹介します。活用して作業効率をアップさせましょう！
本記事の流れについて
本記事では、Figmaのスタイル機能とバリアブル機能について学びます。
前回の記事で上半分まで作成したデザインから、スタイルやバリアブルの登録を行う → 登録したものを活用して下半分のデザインを完成させる、という流れで進めていきます。
とは言え、スタイル機能もバリアブル機能も、基本的な使い方はどんなデザインでも変わりありません。練習用に適当なオブジェクトを作ってお試しいただく事もできます。
【解説で使うデザイン】
Unsplashで提供されている以下の素材を使用させていただいています。
配布元：昼間の青空の下でのキリンの写真 size：L もしくは オリジナル |
配布元：木の上の灰色のぶちの子猫 size：S もしくは 中間 |
size：S |
size：S もしくは 中間 |
size：S もしくは 中間 |
配布元：芝生の上を歩くアライグマの写真 size：S もしくは 中間 |
size：中間 |
Figmaのスタイル（Styles）を使う
Figmaのスタイルとは
Figmaでのスタイルとは、プロパティや属性のセットを登録するための機能。
定義で言うとわかりにくいのですが、よく使うテキスト設定や、色などを登録して、手軽に呼び出せるようにする機能と考えて下さい。
現時点では、4つのタイプがスタイル登録できるようになっています。
- テキスト
- 色
- エフェクト
- レイアウトグリッド
上3つのタイプは、ここまでの制作でも使ってきましたね。
最後のレイアウトグリッドとは、フレームに付属している、レイアウトのためのガイド（グリッド）を自分で設定・表示させる機能です。デザインのガイドとして、またBootStrapなどのようなグリッドシステムに沿ったレイアウトを作りたい時に使われます。
テキストスタイルを登録する
ファーストビューにある一番大きなテキストを選択して、スタイルを作成してみましょう。
デザインタブのテキスト項右上、: : のアイコンが“スタイル”です。
: :で表示されるウィンドウの右上+アイコンから、スタイルを作成します。
名前は「XXL」としました。説明は入れても入れなくても構いません。
これでテキストのスタイルが登録されました。
登録したスタイルの変更は、スライダーのようなアイコン [スタイルを編集] から行います。スタイルを編集すると、そのスタイルを使用しているテキスト全てが変更されます。
同じように、イベント部分の見出しもスタイルとして登録します。
こちらは名前を「XL」にしました。
スタイルのグルーピング
今登録したテキストのスタイルは2つだけなので問題ありませんが、数が多くなると目的のスタイルが探しにくい・紛らわしい……という状態になるかもしれません。
スタイルをグループ分けしておくと、わかりやすくなるのでやってみましょう。
キャンバス内で何も選択されていない状態にすると、右サイドバーでローカルスタイルの一覧が見えます。選択解除はEscキーを使うと便利です。
登録した２つのテキストスタイルを選択して右クリック。[新しいフォルダの追加]を選択して、フォルダ名（グループ名）をつけるとグルーピングできます。
スタイルを作成する際、名前を半角スラッシュ（/）を入れて区切ることでもグループを指定・新規作成出来ます。
カラーを登録する
色のスタイル登録もしてみましょう。
追加方法やグループ分けなど、基本的な使い方はほぼ一緒です。
カラーの場合はスタイル登録時、タブでスタイルかバリアブルかを選択する形になっているので、そこだけ注意して下さい。
スタイルでは、グラーデションや、複数の塗り設定を1つのスタイルとして登録することもできます。
エフェクトを登録する
これまで作ってきたデザインだと、カードに影を設定するのにエフェクトを使っています。
このカードのドロップシャドウ設定を、スタイル登録してみましょう。
メインコンポーネントの方からスタイルを登録します。
すでに設定されているスタイルを登録する場合は、名前をつけるだけでOK。
名前は、shadow-mdにしました。
Figmaのバリアブル（Variables）を知る
色のスタイル登録時に登場したバリアブル。
こちらも色の登録ができる機能ではありますが、スタイルとは似て非なる存在です。
バリアブルとは
バリアブル（Variables）は、名前そのまま、変数を登録・利用できる機能です。
2023年からリリースされた比較的新しい機能で、本記事作成時点ではまだオープンβ版となっています。
バリアブルで設定できるものは、現在以下の４つ。
- カラー
- 数値
- 文字列
- ブーリアン（真偽値）
バリアブルを設定すると、デザインと開発のズレを減少できる（一貫性を保てる）、デザイン制作・更新作業の手間が削減できる、などの利点が期待できます。以下のようなこともFigmaだけで出来るようになります。
- デザイントークンに基づいた構築
- ダークモードなど、テーマ切り替えが出来る（バリアブルモード）
- プロトタイプモードで、実際の動きに近い操作ができる
バリアブルモードを使ってテーマの切り替えが出来る、というのがFigmaの売りなのですが、残念ながら無料版では使えない機能。プロフェッショナルプランでも4つまでなので、カラーテーマや表示サイズ・多言語対応などをすべて設定するなら上位プランが必要そうです。
機能制限があるもの、開発領域にかかってくるものを除いて、Webデザイン制作で恩恵を感じやすいバリアブルは数値とカラーの２つ。それぞれ簡単に見ていきましょう。
数値バリアブルを使ってみる
小規模Webデザインの場合でも、バリアブルの恩恵を感じやすいのが「数値」の設定です。使ってみましょう。
キャンバス上で何も選択していない状態で、右サイドバーからローカルバリアブルをクリック。バリアブルの作成を押して、数値を選択します。
登録したい名前と、値（数値/半角数字）を入力します。
以下では、今回のデザイン制作で分かりやすいように「pc-maxcontent：1200」としてコンテンツ幅を入力してみます。
右上のバツで閉じて、カードを並べたフレームを選択します。
現在は、横幅（W）に手打ちで1200と入力しています。
プルダウンを開いて、バリアブルを適用を選んでみましょう。
Wの表示が、薄いグレーの背景色になりました。
これはバリアブルから数値を参照していることを示しています。
バリアブルを変更してみましょう。
Escキーで選択解除し、右サイドバーからバリアブルを開きます。
pc-maxcontentの値を、別の数値に打ち替えます。
カードを並べたフレームを見ると、数値が更新されていることがわかります。
バリアブルを使うと、毎回手入力する必要もなくなり、変更があったときも大本であるバリアブルの値を変えただけで反映されます。
数値は、横幅だけではなく余白・角の丸み（border-radius）などの設定にも使えます。
上図のように余白用の数値を設定して、項目ごとにグループ化してまとめておくことも出来ます。
カラーバリアブルを使ってみる
カラー（色）の登録は、スタイルとバリアブルの両方で行うことが出来ます。
とりあえず、登録してみましょう。
方法はスタイル登録とほぼ一緒。名前をつける時に“バリアブル”タブを選択するだけです。
ライブラリの表示は、バリアブルが四角・スタイルが円で表示されます。
ただ、この時点だとスタイルとバリアブルの違いはわかりませんよね。
スタイルで色を登録するのと、バリアブルで色を登録する違いは大きく3つあります。
- バリアブルのカラーは、複数の塗り・グラデーションを保存できない
- バリアブルはモードの切替ができる
- バリアブルで設定した値は、別のバリアブルにも継承できる
1. 登録できる色の数・種類
バリアブルのカラーで登録できるのは、単色１つだけです。
スタイルの場合は色・グラデーション・画像などを選択でき、複数登録することも可能です。
2. バリアブルモードを使った切替
こちらは、無料版では使えないと紹介したバリアブルモードを使った切り替え機能です。
同じtext-primaryという名前のバリアブルで、モードに応じて色を変えるように設定することが出来ます。ダークモード用の表示、WordPress管理画面のようにユーザーがカラーテーマを切り替えられるようにしたい時などに便利です。
3. 設定した値の継承
バリアブルで設定した値は、別のバリアブルやスタイルに利用することが出来ます。
例えば、設定した青色(blue）を使ってスタイルでグラデーションを作ったり。
text-linkという新しいバリアブルを作成したりできます。
これらの利点は、大本であるblueの色を変えると、連動して全て色が変わることです。
今回のようにblue→text-linkだと「blueの１つで良くない？」となりますが、こうした設定はデザインシステム・デザイントークンを使った設計時に用いられます。あらかじめ使用可能色の一覧を作り、使う色をピックアップ→どこで（どういう目的で）使うか仕分けていくようなイメージです。
こうすることで、変更があった時・色味を変えたいパーツが出てきた時に、更新作業の手間を最小限に抑えることが出来ます。
ただし、こうしたデザインシステムから作り込むのはクロスプラットフォームアプリケーションや、大規模Webサイトが大半。小規模サイトやLPでは使いません。規模が大きくなければ、デザインシステム作りに工数をかけるよりも、そのまま制作・更新したほうが早いためです。
今回のサイトのようなデザインで「デザイン制作の効率アップに色を登録する」のであれば、スタイルからでもバリアントからでも、どちらでも良いです。下図は複数回使用する色、登録しておいたら便利そうな色だけスタイル登録した場合です。
デジタル庁のデザインシステムが公開されており、Figmaで実際に作成されたデザインデータを閲覧・操作することも可能です。シンプルでわかりやすく、Figmaの機能を使う例としても役立つので、デザインシステムを学びたい方はチェックしてみて下さい。
後半のデザインを作る
ページデザインの後半、下半分を作っていきましょう。
4. サイト紹介
コンポーネントの追加
改めて見ると、見出し部分は後半もほぼ一緒のデザインです。
共通部分をコンポーネント化しちゃいましょう。
見出し（大きい文字）とラインを選択し、コンポーネントの作成を行います。
オートレイアウトを追加し、アイテム同士の間隔を設定します。
バリアブル（数値）を設定している場合は、それを使っても良いですね。
メインコンポーネントもデザインに使っている人は、ここまでで完了。
デザインの外に避けておきたい方は、メインコンポーネントをカット・アンド・ペーストで移動させ、デザインの方にはインスタンスを配置して下さい。
全体枠と見出しの用意
イベントのセクションと同じく、塗りを設定したフレームを用意します。
見出しのインスタンスを挿入し、新しく作ったフレームの下（中）に置きます。
水平方向の中央揃えを設定し、Y座標に余白として開けたい数値（96）を入力。
文字色を緑色に設定します。
解説ではヘッダーの背景色を、スタイルgreenとして登録しています。
コンテンツ部分の用意
次に、見出し下にあるサイト説明部分を作ります。
フレームツールで適当な長方形を描きます。
Shiftキーを押しながらドラッグして、見出しブロックの下ピッタリに合わせます。
キーボードショートカットShift + Aでオートレイアウトを追加。
アイテムの並び順は [横に並べる] を選択して下さい。
Y座標に+80と入力し、見出しからの間隔をとります。
幅を固定幅：PCコンテンツ幅（1200）に設定。
水平方向の中央揃えで、フレームの横方向中央に配置します。
フレーム名をcontainerなど分かりやすいものに変更して下さい。
垂直パディング・水平パディングを共に0にしておきます。
コンテンツ部分の要素を作成
作成したフレーム（container）の中に、長方形ツールで長方形シェイプを1つ作ります。
作成した長方形シェイプを選択して、キーボードショートカットShift + Aでオートレイアウトを追加してください。
containerフレームの中に、オートレイアウトのために作成されたフレーム（デモではFrame2）。
Frame2の中に長方形シェイプが入っている状態にします。
Frame2のオートレイアウト設定で、垂直パディング・水平パディングを共に10に設定。
塗りを白色にして、カードと同じドロップシャドウを追加。
フレームの中にある長方形（Rectangle）を選択します。
塗りからパンダの画像を挿入。
画像サイズ・縦横比はあとで設定します。
右側にテキストを入れます。
2つテキストレイヤーを作って下さい。
都心でいちばん動物とふれあえる場所
動物園で、ありのままの動物たちの生活や行動、しぐさの中に「凄さ、美しさ、尊さ」を見つけ、「たくさんの命あふれる空間の居心地の良さ」を感じてほしい。家畜・ペット種との触れ合いを通じて「命の温もり、命の尊さ」を感じてほしい。そして、野生動物の保護や環境問題を考えるとき、動物たちは私たちと対等な生き物なんだと思うきっかけになれる、そのような動物園でありたいと思っています。
作成したテキストレイヤーを、2つとも選択状態にします。
キーボードショートカットShift + Aでオートレイアウトを追加。
[縦に並べる] を選択して、小見出しが上に来るようテキストレイヤーの順番を入れ替えます。
見出し部分を、フォントサイズ24の太字、緑色にします。
下の説明文のところは、標準の太さ・サイズを16にします。
スタイルを作っておいても良いですね。
テキストレイヤー２つそれぞれに、以下の設定を行います。
- 水平方向のサイズ調整を [コンテナに合わせて拡大] にする
- 段落を左揃えに設定する
その後、テキストレイヤー２つを囲うフレームも、水平方向のサイズ調整を [コンテナに合わせて拡大] に設定します。
オートレイアウトの項目を使って、アイテムの上下の間隔を24に設定。
水平パディングを「48, 0」と入力して下さい。
パディングは半角コンマで区切ることで、[左, 右]や[上, 下]と個別に入力ができます。
一旦選択を解除して、選択し直すと、上下左右個別の表示になります。
調整
パンダの画像と、テキスト部分のサイズを調整します。
画像を設定したRectangleのW,Hの値を、横長になるように変更します。
画像を囲っているフレームは、水平方向・垂直方向どちらも [コンテンツを内包]に設定して、上下左右のパディング設定を効かせます。
上部の見出しを打ち替えていませんでした。
「ズーロッパ東京とは」に変更します。
最後に、このセクション全体のフレーム（about）の長さを揃えます。
下辺をドラッグして、始まりと同じだけ余白をとった位置に合わせます。
5. お知らせ
全体フレームと見出し
これまで作成したフレームの下に、新しいフレームを追加します。
幅は横幅いっぱい、塗りでオレンジ系の背景色（下記では#FBB93D）を設定。
分かりやすい名前をつけて、上のフレームと隙間なく合わせます。
見出しのインスタンスを挿入し、新しく作ったフレーム（info）下に置きます。
水平方向の中央揃えを設定し、Y座標に余白として開けたい数値（96）を入力。
テキストを「お知らせ」に打ち替えます。
お知らせの枠を作る
フレームツールで、コンテンツ幅よりも狭い長方形を作ります。
とりあえず適当に描画しておいて、塗りを白、エフェクトでカードと同じドロップシャドウを設定。
キーボードショートカットShift + Aでオートレイアウトを追加。
水平方向の中央揃えに設定して、W（幅）を860に設定します。
見出しの線下ピッタリまで移動して、Y座標に+80と入力。
他のセクションと同じだけ余白をおいて配置します。
オートレイアウトのアイテム並びを縦方向に設定。
アイテム同士の間隔・余白は後で調整するので、特に設定しなくてOKです。
お知らせのコンポーネントを作る
お知らせの一覧表示部分は、同じアイテムの繰り返しです。
変更しやすいようにコンポーネントを作っておきます。
日付と、お知らせタイトルのテキストをそれぞれ作ります。
どちらも、段落は左揃え。
日付の部分はテキストのデフォルト（サイズ16・標準の太さ）、濃い灰色にします。
タイトルの部分はフォントサイズ16は同じですが、太字。
太さを変えるために、テキストスタイルを追加します。
色は、カードタイトルなどリンク色として使っている青に設定。
2つのテキストレイヤーを選択して、オートレイアウトを追加。
アイテムの並べ方を横並びにして、テキスト間の間隔を調整します。
40くらいにしておきましょう。
オートレイアウトの揃え位置を左－中央にして、垂直パディングを16にします。
フレーム名はTextに変えておきます。
Lキーで直線ツールに持ち替え、作成したフレームの下に線を引きます。
線色は薄めの灰色、下図では#CCCCCCにしています。
LineとTextを選択し、オートレイアウトを追加。
アイテムは [縦に並べる]、アイテムの間隔を0に設定します。
線（Line）のレイヤー、テキストのフレームを両方選択して、水平方向のサイズ調整を[コンテナに合わせて拡大] に変更します。
LineとTextを囲っているフレームを選択して、コンポーネント化します。
コンポーネント名をつけたら完成です。
コンポーネントの配置・調整
作成したコンポーネントのインスタンスを1つ挿入。
一覧を入れるために作ったフレーム内に配置します。
挿入したインスタンスを複製し、3つに増やします。
インスタンスを全て選択して、フレームの水平方向のサイズ調整を [コンテナに合わせて拡大] に変更。
下図のようにインスタンスの横幅が伸びます。
アセットパネルからボタンを選択。
3つ並べたインスタンスの下に配置します。
サイズをNormal、ファーストビューのボタンよりも小さいものに変更します。
サイズ切り替えの作り方は【Figma入門③】コンポーネント機能の基本で紹介しています。
オートレイアウトの中では、間隔で設定された余白が自動適用されます。
ボタンの上にはもう少し余白を多く入れたいので、フレームを増やしましょう。
ボタンのインスタンスを選択し、Shift + Aでオートレイアウトを追加します。
オートレイアウトの水平パディングで「8」と入力して、上下の間隔を広げます。
フレームの水平方向のサイズ調整を [コンテナに合わせて拡大] に変更。
オートレイアウトの揃え位置を上揃え－中央にして、ボタンを中央に置きます。
ボタンの文字を「もっと見る」に打ち替えたら完了です。
オレンジ色の背景色部分になっているフレームの長さを整えます。
テキストの打ち替え、余白の調節が必要であれば行って下さい。
見本は白背景の横パディングが10前後と狭いのですが、24くらい確保すると綺麗に見えます。
6.フッター
フッターは、ほとんど空、暫定という感じなので、簡単に設定しちゃいましょう。
ヘッダー部分を複製して、インスタンスを切り離します。
紛らわしいのでフレーム名を「footer」に変えて、左側logoのグループを削除。
テキストレイヤーも1つだけ残して削除。
残したテキストレイヤーを使って、文字を「footer」と打ち替えてます。
footerフレームをコンポーネントにします。
WindowならAlt、MacならOptionキーを押しならがドラッグして、トップページデザインの最下部にインスタンスを配置します。
これでWebページ（PC幅）のデザインが完成しました。
スタイルやバリアントが登録されていると、選ぶだけで良い部分が増えて楽ですね。毎回手打ちやドラッグして設定するより、制作が早く進められるうえに、デザインの規則性が守られやすいなどのメリットもあります。
ちょっとしたデザインでも、自分が楽するために活用してみて下さい。
お疲れ様でした！
まずは無料で14講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
5月5日まで