「エフェクト」「文字列」「数値バリアブル」でデザイン設定を標準化する
はじめに
前回は、デザイントークンを作成するためのバリアブルを用いて、カラーの標準化を理解しました。今回は、スタイルを用いて「エフェクト」の標準を作成し、続いて「バリアブル文字列」と「バリアブル数値」の使い方を理解します。
エフェクト
第3回でボタン「登録」のエフェクトプロパティに表1のような値を直接設定しました。今回はエフェクトをスタイルで設定し、ボタン「登録」のエフェクト設定でこのスタイルを適用するように変更します。
表1：コンポーネント「登録」のエフェクト設定値
| 種類 | X | Y | ぼかし範囲 | 広がり | 色 | 透過 |
|---|---|---|---|---|---|---|
| ドロップシャドウ | 0 | 1 | 5 | 0 | #000000 | 12％ |
エフェクトとは
まずは、エフェクトについてきちんと理解しましょう。エフェクトとは、オブジェクトに視覚的な効果を加える機能です。これを用いることでボタンに立体感を出したり、インプットに奥行きを感じさせたりすることができます。
かつてのハードウェアは機能だけが重視されており、デザインが角ばっていたり、質感がイマイチだったりしていました。しかし、現在では優れた機能に加えて美しいデザインも求められることが当たり前になっています。
ソフトウェアの世界でも全く同じです。どれほど機能が優れていても「ダサい」と感じられる画面デザインでは人々に愛用されません。そこでFigmaのようなツールを使って洗練されたデザインを作成するわけですが、エフェクトはそれを助けるために欠かせない要素となっています。
Figmaがサポートする4種類のエフェクト
Figmaでは4種類のエフェクトがサポートされています。以下、簡単に説明しましょう。
①ドロップシャドウ(Drop Shadow)
オブジェクトの外側に影を付けて浮かび上がっているような効果を作るもので、ボタンやカードの立体感を表現します。
②インナーシャドウ(Inner Shadow)
オブジェクトの内側に影を付けて凹んでいるような効果を作るもので、入力ボックスや窪んだスイッチなどのデザインに使用します。
③レイヤーブラ(Layer Blur)
適用されたレイヤー全体をぼかして柔らかい効果を作るもので、ぼんやりとしたソフトな背景を作成する場合に使用します。
④背景のぼかし(Background Blur)
レイヤーに背景のぼかしを適用すると、適用されたレイヤーの背景がぼかしとなりガラス風のエフェクトを作ることができます。これは、モーダルウィンドウなどに使用します。
エフェクトを対で理解する4つのエフェクトは、2つのペアで理解すると覚えやすいです。
- ドロップシャドウとインナーシャドウ
影を付けるのが外側か内側かの違い。前者が立体感、後者が凹み感を出す効果がある - レイヤーブラと背景のぼかし
ぼかす対象の違い。エフェクトを適用したレイヤーをぼかすのがレイヤーブラ、適用したレイヤーの背景をぼかすのが背景のぼかし
ドロップシャドウの設定値の意味
今回はボタンのエフェクト設定なのでドロップシャドウを適用します。まずは図1のようなサンプルのフレームを作成し、これに極端な値のエフェクトを適用して、それぞれの設定値が何を示すのかを説明しましょう。
図1：ドロップシャドウの効果
①位置(X,Y)
ドロップシャドウの影が右下に付けられます。Xを10、Yを20にするとフレームの形状のまま右に10px、下に20pxずれた影ができます。
②ぼかし範囲(半径)
ぼかし範囲を10に設定すると、シャドウエッジを中心に半径10pxの範囲にぼかしが入ります。シャドウエッジは、位置(X,Y)で付けた影の境界点で、この場合はフレームの右10px、下20pxのラインがシャドウエッジラインです。
ぼかしはエッジを中心にグラデーションのように適用され、エッジの中心が最もぼかしが強く(影の影響を消す)なります。エッジを中心にぼかしが入るので、エッジラインの外側にも影の影響がはみ出ることになります。
③広がり
広がりは影を拡大・縮小する場合に使用します。広がりを5に設定すると、影の中心からフレームの角に向かって外部に5pxずつ影が広がります。-3のように負の値を設定すると、逆に中心に向かって3px影が小さくなります。
④影の色と透過度(％)
影の色はデフォルトで＃000000(黒)ですが、通常、透過度を設定して薄くします。透過度が大きいほど元の影色がそのまま表れるため、例えば透過度20％より透過度80%の方が黒っぽくなります。
スタイルでエフェクトを作成
さて、エフェクトの4つの種類の違いとドロップシャドウの設定値の効果を理解したところで、Figmaのスタイルでエフェクトの標準を作成していきましょう。
エフェクトのドロップシャドウを設定
- ローカルスタイルでエフェクトを作成
キャンバスのプロパティにあるローカルスタイル右の「＋」ボタンをクリック、スタイルの種類メニューでは「エフェクト」を選んでください。 - ローカルスタイルの設定
「新しいエフェクトスタイルを作成」モーダルが表示されるので、スタイルの名前を「button」にします。種類はドロップシャドウのまま、左のアイコンをクリックしてください。 - ドロップシャドウの設定画面
ここでは、次の値を設定して「スタイルの作成」ボタンを押すとスタイルが作成されます。- X：0 px
- Y：1 px
- ぼかし範囲：5 px
- 広がり：0 px
- 色：＃000000
- 透明度：12％
図2：スタイルでエフェクト「button」を作成
- エフェクトスタイルの確認
キャンバスのプロパティの下の方にあるエフェクトスタイル欄に「button」というスタイルが作成されていることを確認できればOKです。 - 複数のエフェクト
実はエフェクトスタイルに付けられる効果は1つだけとは限りません。複数の種類のドロップシャドウを付けて、デザインに奥行きや立体感を追加できます。例えば、1つ目のシャドウは広い範囲にグレー(透過度が低い)影を付けて、2つ目のシャドウは小さめで濃いシャドウを付けると、より深みのある表現になります。
エフェクトにドロップシャドウを追加
先ほど作成したシャドウは1つ目の広い範囲のグレーのシャドウです。これにシャドウを2つ追加して、表2の3つのシャドウをスタイルに設定してみましょう。手順としては、前述「4.エフェクトスタイルの確認」で確認したスタイル「button」の右にあるスライダーアイコン「スタイルを編集」をクリックし、スタイルのプロパティ右にある「＋」ボタンからドロップシャドウを2つ追加します。
表2：エフェクトスタイル「button」のドロップシャドウ設定
| 種類 | X | Y | ぼかし範囲 | 広がり | 色 | 透過 |
|---|---|---|---|---|---|---|
| ドロップシャドウ | 0 | 1 | 5 | 0 | #000000 | 12％ |
| ドロップシャドウ | 0 | 2 | 2 | 0 | #000000 | 14％ |
| ドロップシャドウ | 0 | 3 | 1 | -2 | #000000 | 20％ |
デザインにエフェクトスタイルを適用
これでエフェクトスタイルを作成できました。続けて、図3を参考にしながら作成したスタイルをデザインに適用してみましょう。
図3：「ボタン」のエフェクトにスタイルを適用
- コンポーネント「ボタン」のエフェクト
コンポーネント「ボタン」を選択してプロパティのエフェクト欄を見てください。第3回で設定したエフェクト「ドロップシャドウ」が表示されるので、左のアイコンをクリックして設定内容を確認します。第3回で設定してない場合はそのまま次に進みます。 - エフェクトスタイル「button」を適用する
エフェクト欄右のスタイル適用アイコン
をクリックしてください。適用するエフェクトスタイルには、先ほど自分で作成したbuttonの他に「Material 3 Design Kit」「Simple Design System」などの候補が表示されます。これはGoogleやFigmaコミュニティが公開しているデザインシステムのライブラリで、複雑なドロップシャドウの組み合わせをリソースとして提供してくれます。実は、先ほど作成した3つのドロップシャドウもこの一部を使った設定です。ここでは、スタイル「button」を選択して、ボタン「登録」のエフェクトにスタイルを適用します。 - 残り2つのコンポーネントにもスタイルを適用
同じ要領で残り2つのコンポーネント「更新」と「検索」にもエフェクトスタイル「button」を登録しておいてください。
文字列のバリアブルを使ってみる
次は、バリアブルの「文字列」について説明しましょう。これがどういうものなのかを理解するために、「登録」という文字列を作成して設定してみます。
バリアブルの作成
- コレクション「ボタン」にバリアブルを作成
フレームのないところをクリックして、キャンバスのプロパティを表示してください。ローカルバリアブルのスライダーアイコン
をクリックします。コレクションから「ボタン」を選択して「＋バリアブルを作成」ボタンをクリックし「文字列」を選んでください(図4)。
図4：バリアブル「文字列」の作成
- バリアブルの設定
デフォルトで“文字列”というバリアブルが作成されるので、名前を「label/register」に変更してください。スライダーアイコンをクリックし、値をデフォルトの「文字列値」から「登録」に変更します。 - ③残りのボタンラベルの作成
同じ要領で「更新」と「検索」の文字列を表3のバリアブル名で作成してください。表3：バリアブル文字列の設定
バリアブル名 値 label/register 登録 label/update 更新 label/search 検索
デザインに適用
これで3つのバリアブル文字列を作成できました。さっそく図5を参考にしながらコンポーネント「登録」の文字にバリアブルを適用してみましょう。
- テキストを選択
登録ボタンの「登録」という文字を[ctrl]キー＋右クリックで表示される候補の中から
登録を選択してください。 - バリアブル/プロパティを適用
プロパティパネルを見ると「登録」という文字列が直接設定されていますね。右側のバリアブル適用アイコン
をクリックしてバリアブル候補を表示します。 - バリアブルの選択
先ほど作成した文字列バリアブルが表示されるので「register」を選択してください。 - 設定を確認
プロパティパネルを見ると「登録」という文字ではなく「label/register」という文字列バリアブルがセットされていることが確認できます。マウスをホバーするとバリアブルの説明(登録ボタン)と値(登録)が表示されます。 - 残りのボタンにも適用
同じ要領で更新ボタンに「label/update」、検索ボタンに「label/search」というバリアブルを適用してください(図5)。
図5：ボタンのテキストにバリアブルを適用
バリアブル文字列を使うかここまで説明しておいてなんですが、私はバリアブル文字列を使わない派です。ボタンのラベルを標準化するなら第4回で説明したバリアントでボタンそのものをプロパティ化すれば済みます。
「更新しました」などのアクセスメッセージや「エラーが発生しました」などのエラーメッセージの文言を統一化するのに使えそうとも考えたのですが、通常、画面ごとにこのようなメッセージをデザインすることはありません。どこか1箇所でメッセージ標準を定義するだけなので、メッセージのバリアブルの必要性を感じないからです。とは言え、私が使い方を知らないだけで有用な場面もあると思いますので、ここでどのようなものかを解説しました。
数値のバリアブル
数値のバリアブルは、2や4などの数値をバリアブルで標準化し、それをデザイン各所で設定数値に適用するものです。どのような場所に適用するのか、数値バリアブルのスコープを使って見ていきましょう。
数値バリアブルのスコープ
図6は数値バリアブルがデザインのどの部分に適用されるかを示したものです。中央の図がバリアブル数値のスコープで、右図がコンポーネント「検索」のプロパティ、左図がテキストスタイル「button/label」のタイポグラフィーです。
図6：数値バリアブルのスコープと設定場所
スコープを例に、数値の標準化を適用する各項目をざっと説明します。
①角の半径
第3回で長方形の「角の半径」を8と設定しました。これにより現在、ボタン「検索」の角は半径8pxの円弧の丸みになっています。この数値を直接入力するのではなく、例えば「radius-8」という名のバリアブルを作成して適用すると数値の統一が取りやすくなります。
②幅と高さ
ボタンの幅と高さをバリアブル「width-120」「height-48」などを作成して標準化する場合に使用します。ボタンだけでなくインプットやメッセージ、ヘッダー、フッターなどUI要素ごとにサイズを標準化する際に有効です。
③間隔(オートレイアウト)
オートレイアウトの「間隔」「水平パディング」「垂直パディング」の数値を、バリアブル「spacing-12」「padding-h-12」「padding-v-12」などを作成して標準化する場合に使用します。
④テキストコンテンツ
バリアント「文字列」ではテキストの文字列を標準化できますが、文字列を1や100などの数値に限定する場合はこちらでも適用できます。
⑤線
線の太さを「stroke-1」というようなバリアブルで標準化する際に使用します。
⑥レイヤー不透明度
外見の不透明度を「opacity-100」というようなバリアブルで標準化する際に使用します。
⑦エフェクト
エフェクトで使用する各数値を標準化する際に使用します。今回はすでにエフェクトをスタイルで標準化しているため使用しません。エフェクトスタイルを設定する際に適用できますが、標準化に標準化を重ねることになり冗長となるからです。
⑧〜⑬タイポグラフィー
タイポグラフィーで使用する各数値を標準化する際に使用します。今回はすでにタイポグラフィーをテキストスタイルで標準化しているため、同じ理由で使用しません。
バリアブルの名前に数字を入れるか上記の例では「radius-8」というようにバリアブルの名前に数字を含めています。これに対して「radius-small」「radius-medium」というように、数字ではなくサイズで表す方法もあります。どちらも一長一短あるのですが、今回は直感的に理解しやすい数字を含める名前を付けた例で紹介しています。
数値バリアブルを作成
図6右に付番した①〜⑥に対応する数値バリアブルを作成してみましょう。図7を参考にしながら、ボタンコレクションの下に表4の数値バリアブルを順次作成します。
図7：数値バリアブルの作成とスコープ設定
- 数値バリアブルを作成
キャンバスのプロパティからローカルバリアブルのスライダーアイコンをクリックし、バリアブル作成モーダルを表示します。コレクション「ボタン」の下に「value/radius-8」という名前の数値バリアブルを作成してください。 - 値を設定
スライダーアイコンをクリックして、値に「8」という数値を設定します。 - スコープを設定
スコープタブに切り替えて、利用できる箇所を「角の半径」に限定してください。 - 残りの数値バリアブルの作成
同じ要領で、表4を参考に残りの数値バリアブルを作成してください。図8のようにコレクション「ボタン」のvalue配下に8つの数値バリアブルが作成されればOKです。表4：バリアブル数値の設定
バリアブル名 値 説明 スコープ value/ radius-8 8 角の丸め ☑角の半径 width-120 120 横幅 ☑幅と高さ height-48 48 高さ ☑幅と高さ spacing-12 12 UI要素の間隔 ☑間隔 padding-h-12 12 水平パディング ☑間隔 padding-v-12 12 垂直パディング ☑間隔 stroke-1 1 線の太さ ☑線 opacity-100 100 UI要素の不透明度 ☑レイヤー不透明度 
図8：数値バリアブを8つ作成
デザインに適用
それでは、数値バリアブルが用意できたところで、これをコンポーネント「検索」の数値設定に適用しましょう。図9を参考に適用していきます。
図9：数値バリアブル適用
- 角の半径に適用
ボタン「検索」を選択して、プロパティ「外見」のところにある角の半径をマウスでホバーするとバリアブル適用アイコン
が表示されます。これをクリックして表示される候補から「radius-8」を選択するとバリアブルが適用されます。「8」という数字のハイライトが白に代わり、アイコンがバリアブル切り離し用
に変わっていれば適用されている証です。 - 不透明度に適用
同じ要領で外見のすぐ左にある不透明度をホバーしてアイコンを表示させて、バリアブル「opacity-100」を適用してください。 - 横幅と高さに適用
横幅(W)と高さ(H)は、設定値の右のセレクタアイコン
をクリックすると「バリアブルを適用」メニューが出てきます。それぞれをクリックして「width-120」と「height-48」を適用します。 - 間隔とパディングに適用
間隔はセレクタアイコンから、パディングはホバーでアイコンを表示させて、それぞれ「spacing-12」「padding-h-12」「padding-v-12」というバリアブルを適用します。3つの「12」という値のハイライトが白色に変わっていればOKです。 - 線に適用
最後は線の太さです。プロパティの線の太さのところでマウスをホバーし、バリアブル適用アイコンから「stroke-1」というバリアブルを適用してください。 - 同じ要領で、ボタン「登録」とボタン「更新」にも数値バリアブルを適用してください。なお、この2つには線がないため5番の作業は不要です。本来は最初にコンポーネントを作成した際にバリアブルを設定し、それからバリアントを作成すれば、このような手間が省けます。
バリアブル数値を使うかまたまた、ここまで説明してきてなんですが、私はバリアブル数値も使わない派です。いちいちバリアブルを作成するのは面倒で、2、4、8、12などとデザインで使用する数値を決めておき、直接数値を設定するほうが楽だと感じているからです。これも、いろいろ考え方があると思いますので、チームの方針で決めてください。
まとめ
今回は、以下のような内容について学びました。
- エフェクトを使うとオブジェクトに立体感や奥行きなど視覚的効果を付けられる
- Figmaは「ドロップシャドウ」「インナーシャドウ」「レイヤーブラ」「バックグラウンドブラ」というエフェクトを作成できる
- ドロップシャドウは外側に影を付けて立体感を出し、インナーシャドウは内側に影を付けて凹み感を出す
- エフェクトを適用したレイヤーをぼかすのがレイヤーブラ、適用したレイヤーの背景をぼかすのが背景のぼかし
- スタイルでエフェクトを作成すると、UI要素に付けるエフェクト設定を標準化できる
- 複数のエフェクトを適用することで、より深みのある表現を実現できる
- 文字列のバリアブルはデザインで使う文字列自体を標準化するものである
- 数値のバリアブルはデザインで使うさまざまな設定値を標準化するものである
ここまで、ボタンを題材にFigmaの基本的な機能を学習してきました。次回からは標準化を積み重ねてデザインしていく「Atomic Design」という手法を理解し、その第1弾としてボタンやアイコンなどのUI要素を追加していきます。
