Figmaを使い慣れてきたころ、コンポーネントの作り方の正解が分からず、その場しのぎでなんとなく作っていました。ボタンの状態違いをバリアントで量産したり、アイコンの表示・非表示をコンポーネント内で手動管理したり。形にはなっているものの、どこか非効率で、構造が複雑になるにつれて管理しきれなくなっていく感覚がありました。

そんなときに読んだのが書籍『Figmaで作るUIデザインアイデア集 サンプルで学ぶ35のパターン』です。UIデザインにおいて、よくあるコンポーネントの作り方を実際に手を動かしながら学べる内容で、「こういうときにコンポーネントプロパティを使うのか」と多くの発見がありました。

本書は2024年刊行のため現在のFigmaと異なる部分もありますが、コンポーネント設計の考え方は今でも十分参考になります。

この記事では、この本で学んだことの中から、今も実務でよく使っている機能や考え方を7つご紹介します。私のように「Figmaはある程度使えるけれど、コンポーネントをうまく活用できていない」と感じている方の参考になれば幸いです。

コンポーネントプロパティの3つの使い方

コンポーネントプロパティとは、コンポーネントの「カスタマイズできる部分」をあらかじめ定義しておく機能です。例えば、アイコンの有無やインスタンスの入れ替えなどをプロパティとして設定しておくことで、1つのコンポーネントにさまざまなバリエーションを持たせることができ、バリアントの数を大幅に削減できます。

ここでは私が実務で特によく使っている「3つのプロパティ」と、その設定手順をご紹介します。

① ブール値：要素の表示・非表示を切り替える

ブール値は、コンポーネント内の要素を「表示する／しない」で切り替えられるプロパティです。

以前私は、アイコンの有無やラベルの表示切り替えをバリアントで管理していました。表示・非表示を切り替える要素が少なければバリアントでも問題ないのですが、要素が増える度に指数関数的にバリアントの組み合わせも増えていくことが悩みでした。

ブール値を使えば1つのコンポーネントで複数要素の表示を切り替えられるため、管理がシンプルになります。今では、オプション要素を持つボタンやリストアイテムを作るときに欠かせない機能になっています。

設定手順

まず、コンポーネントプロパティとして設定したい要素を選択します。

次に、プロパティパネルの外見から「バリアブル/プロパティを適用」ボタンをクリックします。

＋ボタンをクリックし、プロパティ名を設定すれば完了です。

② テキスト：テキストをプロパティパネルから直接変更する

テキストプロパティは、コンポーネント内のテキストの値をプロパティパネルから変更できる機能です。

テキストプロパティを知る前は、テキストの変更が発生するたびにコンポーネントのダブルクリックを繰り返し、該当テキストを直接編集していました。テキストプロパティを使えば、インスタンスを選択するだけでプロパティパネルから値を変えられるので、テキストを変更しやすく作業がぐっとスムーズになります。ボタンのラベルやカードのタイトルなど、テキストが頻繁に変わる要素に設定しておくと特に便利です。

設定手順

コンポーネントを作成し、変更したいテキストを選択します。

プロパティパネルの「バリアブル/プロパティを適用」ボタンをクリックします。

＋ボタンをクリックし、名前をつけて「プロパティを作成」ボタンをクリックしたら完了です。

設定が完了すると、インスタンスを選択したときにプロパティパネルにテキストの入力欄が表示され、そこから直接テキストを変更できるようになります。

③ インスタンスの入れ替え：インスタンスを入れ替える

インスタンスの入れ替えプロパティを使うと、コンポーネント内で使用しているアイコンなどのインスタンスを別のものに簡単に入れ替えられます。

例えば「アイコン付きボタン」を作るとき、用途に合わせてアイコンだけを変えたい場面がよくあります。以前はアイコンの種類ごとにバリアントを用意していましたが、インスタンスの入れ替えプロパティを使えば、1つのコンポーネントでアイコンのインスタンスを差し替えられるようになります。

設定手順

コンポーネント内の入れ替えたいインスタンスを選択し、プロパティパネルから「インスタンスの入れ替えプロパティを作成」ボタンをクリックします。

＋ボタンをクリックし、入れ替えたいインスタンスにチェックを入れます。

追加をしたら、「プロパティを作成」ボタンをクリックします。

設定完了後、ボタンのインスタンスを選択するとプロパティパネルにプルダウンが表示されるので、そこから先ほど設定したアイコンのインスタンスをクリックして切り替えることができます。

デザインの一貫性を保つ、バリアブルの活用

バリアブルとは、カラーや数値などの値を変数として設定し、さまざまなシーンで再利用するための機能です。デザインシステムが必要な中規模〜大規模なUIデザインで特に力を発揮します。

④ カラーをバリアブルで管理する

カラーを管理する方法には「スタイル」と「バリアブル」の2つがあります。どちらも設定した値をデザイン全体で再利用でき、値を変更すれば使用しているすべての箇所に反映されるという点は共通しています。ただし、それぞれ得意な場面が異なるため、内容に応じて使い分けるのがおすすめです。

スタイルは、グラデーションや複数の塗りの重ね合わせ、ブレンドモードなど、複雑な塗りを1つの見た目としてまとめて管理したいときに使います。複数の値を組み合わせて一度に適用できるのがスタイルの強みです。

一方、バリアブルの強みは単色のカラーを扱うときです。バリアブルには「モード機能」があり、1つのバリアブルに対して複数の値を持たせられます。例えば「背景色」というバリアブルに「ライトモードのときは白」「ダークモードのときは黒」と設定しておけば、モードを切り替えるだけでデザイン全体のカラーを一括で変更できます。

ライト／ダークモードの対応はもちろん、複数ブランドのテーマを切り替えたいときに非常に役立ちます。

設定手順

左側のナビゲーションパネルから「バリアブル」をクリックします。画像とUIが違う場合は、プロパティパネルの「ローカルバリアブル」をクリックしてください。

「+作成」ボタンをクリックし、「色」を選択します。

色の名前やカラーコードの値を設定します。

バリアブルを適用したいオブジェクトをクリックします。

プロパティパネルの塗りまたは線の「スタイルとバリアブルを適用」ボタンをクリックし、設定したバリアブルを選択します。

モードごとに色を設定したい場合は、「新しいバリアブルモード」ボタンで列を追加すると、モード別に色を設定できます。

⑤ マージンやパディングをバリアブルで管理する

カラーだけでなく、マージンやパディングなどの数値もバリアブルで管理できます。

都度手動で数値を入力していると、似たような値がファイル内に存在してしまいがちです。バリアブルに設定しておくと数値のばらつきを防げ、マージンやパディングを統一しやすくなります。バリアブルを適用した入力欄は数値に白い背景色が付くため、数値がバリアブルで管理されているかどうか一目でわかるのも便利なポイントです。

設定手順

バリアブル内の「+作成」ボタンをクリックし、「数値」を選択します。

名前や値を好きなように設定します。

バリアブルを適用したいオブジェクトをクリックします。

プロパティパネルの「パディング」入力欄の右側にある、「バリアブルを適用」ボタンをクリックし、設定したバリアブルの数値を選択します。 「間隔」の数値を変えたい場合は下矢印ボタンをクリックし、「バリアブルを適用」から設定した数値を選択してください。

効率化の土台をつくる、設計の考え方

⑥ 命名規則を統一する

コンポーネントやバリアブルの命名規則を統一しておくと、ファイルが格段に見やすくなります。本書を読んでからは、以下の点を意識するようになりました。

• 英語の大文字・小文字のルールを統一する
• 単語は正式名称を使うか略称を使うか、表記を統一する
• 単語の間に「-」や「_」を入れるかどうか

命名規則に絶対的な正解はありません。大切なのは、チーム内でルールを決めて統一することです。自分だけが使うファイルであれば個人の好みで決めて問題ありませんが、複数人でファイルを触る場合はドキュメントなどに命名規則をまとめて共有しておくと、「この書き方で良いのかな？」という迷いがなくなり、作業がスムーズになります。

また、後からコンポーネントやバリアブルが増えてきたときにも、命名規則が統一されていると検索しやすく、管理のしやすさが大きく変わります。命名規則はファイルを作り始める段階で決めておくのがおすすめです。

ちなみに、私はパスカルケース（すべての単語の先頭が大文字）を使うことが多いです。 「-」「_」などの記号を使わないため名前がコンパクトにまとまり、パッと見て単語の区切りが分かりやすいのが気に入っています。

例 ：TextLink 、NumberList

⑦ ファウンデーションを用意しておく

命名規則の統一と並んで、デザイン全体にブレのない一貫性を持たせるために役立っているのが「ファウンデーション」の考え方です。

ファウンデーションとは、カラー一覧やタイポグラフィのスケール、マージン・パディングの仕様、エフェクトなど、デザインの基本要素をまとめたものです。デザインを作り始める前にこうした基盤を整えておくと、新しい画面を作るときに毎回ゼロから考えずに済み、作業がスムーズに進みます。

ファウンデーションは作って終わりではなく、デザインが進むにつれて更新していくものです。新しいコンポーネントが増えたり、仕様が変わったりするたびに内容を見直し、常に最新の状態に保っておくことが大切です。

また、ファウンデーションはデザイナーだけが見るものではありません。エンジニアやディレクターなど、プロジェクトに関わるメンバー全員が参照できる共通の資料として活用できます。「このテキストサイズはどこで使うのか」「このカラーはどういう場面で使うのか」といった確認のやり取りが減り、チーム全体の作業効率が上がるのも大きなメリットです。

ファウンデーションや命名規則を考える際は、実際に公開されているデザインシステムを見ることもおすすめです。

参考にしたい、国内のデザインシステム4選

企業が公開しているデザインシステムには、「どんな命名ルールを採用しているのか」「プロパティやバリアブルをどう活用しているのか」など、実務に直結するヒントが詰まっています。私自身が今でもよく参考にしている4つをご紹介します。

SmartHR Design System

伝わる文章の書き方だけでなく、アクセシビリティに徹底して配慮されているのが大きな特徴です。 Figmaの設計面でも、ボタンの色々な状態の作り方や、チームで迷わないコンポーネントの命名ルールなどが丁寧にまとめられています。「使いやすいUIを、Figma上でどう管理・運用するか」を学ぶのにぴったりのデザインシステムです。

Serendie Design System

三菱電機によるオープンなデザインシステムです。デザイントークンやUIコンポーネントだけでなく、アイコンセットまで公開されており、大規模なデザインシステムの設計の参考になります。

デジタル庁デザインシステム

国の機関として「誰もが使いやすいこと」を最優先に作られています。 色の選び方や、操作しやすいボタンのルールなど、デザインの土台となる基本がとても堅実にまとまっています。どんなデザインを作るうえでも、教科書として手元に置いておきたい内容です。

Sparkle Design

Goodpatchが公開している、「最短でデザイン環境を構築できる」ことを目指した実践的なデザインシステムです。 この記事で紹介したようなバリアブルの構造や、コンポーネントの整理の仕方がとても分かりやすくまとまっています。

まとめ

コンポーネントプロパティやバリアブルは、知っているだけでは意味がなく、実際に手を動かして使ってみることで初めてその便利さが実感できます。

当時の自分は「なんとなく」作っていたコンポーネントが、コンポーネントプロパティを活用することで管理しやすく、使いやすいものに変わっていきました。今でも新しいコンポーネントを作るたびに「どのプロパティを設定すれば効率よく使えるか」を考えるのが習慣になっています。

Figmaはアップデートが頻繁で、機能もどんどん進化しています。この記事で紹介した機能や考え方が、コンポーネント設計を見直すきっかけになれば幸いです。