【Figma入門③】コンポーネント機能の基本的な使い方、インスタンスやバリアントとは
Figmaの基本的なツールや操作がわかったら、コンポーネント機能を使ってみましょう。コンポーネントについて最低限の理解は、Figmaでデザイン制作をするには欠かせません。活用できると、作業効率やデザインのクオリティも上がりますよ。
「そもそもコンポーネントって何？」というWeb制作未経験の方も大丈夫。Figmaの操作だけではなく、どんなふうに使っていくのかも図解たっぷりで解説します。
コンポーネント機能について
コンポーネントとは
Figmaでコンポーネント（Component）とは、一つのデザインの中で再利用する、共通性を持った要素のことです。コンポーネント機能・コンポーネント化というのは、何度も使うアイテムをテンプレート化して使いやすくする機能と考えると、想像しやすいと思います。
Webサイト//Webアプリケーションの中では、同じ、もしくは多少バリエーションはあってもほぼ同じ、というデザインの要素が結構使われています。代表的なものとしては、ヘッダーやフッターなどが挙げられるでしょう。
もっと細かいパーツで言うと、ボタンや、記事カードなどもそうです。
以下の「プランを選ぶ」ボタンも、外枠のサイズや角の丸み・テキストの太さやサイズなど、ほとんどが共通しています。SkillHubのヘッダーやフッターのように全く同じではありませんが、これらもコンポーネントと言えます。
https://www.figma.com/ja/pricing/
前回作ったカードデザイン。
これも、以下のように複数並べて利用することが多いと思います。画像やテキストは変わっていますが、全体的なデザイン自体は同じ設定を再利用していますよね。
こういったものが、コンポーネントにできる、コンポーネント化しておくと便利な要素です。
コンポーネント機能は、何が良い？
Figmaでコンポーネント機能を使う最大のメリットは、変更が1回で済むということです。
例えば、カードを複製して並べたとしましょう。そのあとに余白やレイアウトを変更したい場合、個別に直すか、複数選択して調整するしかありません。面倒ですし、数が多ければ変更し忘れる箇所も出てきますよね。
Figmaのコンポーネント機能を活用すると、メインコンポーネントを直すだけで、他の箇所にも変更が反映されます。一括でデザインが変更できるわけです。
同じデザインが使われている場所を探し回ったりする必要もないので、とても楽ですね。
デザインの一括編集だけではなく、コンポーネント機能でバリエーションを作って登録したりもできます。作業時間短縮に役立つ機能なので活用していきましょう。
Figmaでコンポーネントを作ってみよう
Figmaでコンポーネントを作成してみましょう。
コンポーネントとして登録したいオブジェクト、もしくはオブジェクトのまとまりを選択状態にします。以下ではカードデザインをまるっと選択しています。
コンポーネントを作成するには、以下3つの方法があります。
どれを使っても結果は同じですので、使いやすい方法で行って下さい。
- 右クリックメニューから[ コンポーネントの作成 ]を選ぶ
- ツールバーのアクションから、◇が4つ重なったアイコンを使う
- ショートカットキーを使う
（Windows :Ctrl + Alt + K / Mac :⌘ + Option + K）
コンポーネントを作成すると、レイヤーパネルの表示が変わります。
左サイドバーをアセットパネルに切り替えみましょう。
ローカルコンポーネント下に、今作成したコンポーネントが追加されています。
これでコンポーネントの作成は完了です。
コンポーネントインスタンスを理解する
コンポーネント化する目的である“デザインの再利用”をしてみましょう。
コンポーネントに基づいて作られるアイテム、いわば再利用されているオブジェクトのことを「インスタンス」と呼びます。
インスタンスを配置する
アセットパネルからコンポーネントを選択し、[インスタンスを挿入]ボタンを押します。
コンポーネント化したアイテムの複製のようなものが、キャンバスに追加されました。
全く同じものに見えますが、レイヤーパネルで見てみると、[インスタンスを挿入]で挿入されたものはアイコンが違っていますね。◆が4つ集まっているアイコンがメインコンポーネント、◇のアイコンがインスタンスを示しています。
なお、レイヤーパネル、キャンバス上でメインコンポーネントを複製しても、自動的にインスタンスになります。
アセットパネルの[インスタンスを挿入]からでも、どちらを使っても構いません。
メインコンポーネントとインスタンスの違い
最初にコンポーネントを作成したオブジェクトがメインコンポーネント、複製したものがインスタンスとして区別されていることはなんとなくわかりました。次はこの２つの違いを見ていきましょう。
メインコンポーネントとインスタンスについて、Figmaでは以下のように説明されています。
- メインコンポーネントは、コンポーネントのプロパティを定義します。
- インスタンスは、デザインで再利用できるコンポーネントのコピーです。インスタンスはメインコンポーネントにリンクされていて、メインコンポーネントに行ったあらゆる更新が反映されます。
メインコンポーネントがデザインの大元。『親』と表現されることもあります。
インスタンスはコンポーネントのコピー。コピーという表現に違和感がある方は「再利用がしやすいよう、メインコンポーネントの一部を変更できる『子』」と考えておくと良いです。
『親』のメインコンポーネントを変更すると、インスタンスにも反映されます。
インスタンスに変更を加えても、他のインスタンスやメインコンポーネントには影響しません。また、位置など、メインコンポーネントでしか変更できないプロパティもあります。
インスタンスの方で個別にテキストや画像を変更している場合、メインコンポーネントを変更しても内容は反映されません。メインコンポーネントから何の変更も加えていない場合は、メインコンポーネントと一緒に変わります。
メインコンポーネントの探し方・復元
Figmaでデザインを作成していくと「メインコンポーネントが行方不明（探すのが大変）」という状況に陥るかもしれません。
そんなときは右サイドバーからメインコンポーネントを発見出来ます。
インスタンスを選択していれば、以下の [ メインコンポーネントに移動 ] アイコンが表示されます。これをポチッと押せば、メインコンポーネントが表示・選択状態になりますよ。
誤ってメインコンポーネントを削除してしまった、という場合は、以下のように[ コンポーネントを復元 ] ボタンが表示されます。
インスタンスオプション
インスタンスには、インスタンスオプションという少し特殊な設定が用意されています。
インスタンスオプションがあるのは、右サイドバー（デザインタブ）。
インスタンス名の右横にある、のアイコンです。
インスタンスの切り離し
[インスタンスの切り離し]では、インスタンスを独立したフレーム（グループ）に変換します。メインコンポーネントと切り離すわけですから、メインコンポーネントの変更・更新による影響を受けなくなります。編集可能な項目の制限も無くなります。
変更をメインコンポーネントにプッシュ
インスタンスに加えた変更は、そのインスタンスにのみ適用される。
これが基本ではありますが、[ 変更をメインコンポーネントにプッシュ ]を使えば、インスタンス側の変更をメインコンポーネントへ反映することも出来ます。
メインコンポーネントの更新に合わせて、他のインスタンスにも変更が反映されます。
すべての変更をリセット
メインコンポーネントと全く同じ状態にリセットしたい時に使います。
コンポーネントのバリアント基礎
Figmaのコンポーネント機能にはバリアント（Variants）という、類似コンポーネントをグループ化する仕組みもあります。コンポーネントのバリエーションを作って登録しておけるもの、というイメージでOKです。
バリアントの作成・使用方法
ここまでカードだとイメージしにくいので、ボタンを新しく作ってみましょう。
長方形シェイプ+テキストでシンプルに作ります。
そして、コンポーネントを作成します。
メインコンポーネントになったボタンを選択すると、バリアントの追加が使えるようになります。ツールバーの中央あたり、◇の中に+が入ったアイコンをクリック。
Component1がグループのような、点線で囲われた表示になりました。
元々あったものがデフォルト、その下にバリアント2が追加されています。
バリアント2は、分かりやすいように長方形シェイプの塗色を変えておきます。
左サイドバー、アセットパネルからインスタンスを挿入してみましょう。
デフォルトのオレンジ色の方が入りましたね。
デザインパネルの方を見てみると、プルダウンでバリアントの選択ができます。
バリアントのプロパティ追加と命名
バリアントは設定できましたが、表示がプロパティ1-デフォルト……。
何のことなのか、全然わかりませんよね。
バリアント名やプロパティ名の設定は、メインコンポーネントの方で出来ます。
現在のバリアント、という部分で好きな名前に打ち替えればOKです。
ここまでで作ったのは、色のバリエーション。
更にサイズやボタンの状態など、別のバリエーションを追加することもできます。
バリエーションのプロパティを増やしたい場合も、使用するのはメインコンポーネントです。
メインコンポーネント（コンポーネントグループ）を選択状態にします。
プロパティの横にあるプラスアイコンから、バリアントのプロパティを追加して下さい。
大きさのバリエーションを作ります。
名前をサイズ、値をLargeにしてプロパティを作成してみましょう。
コンポーネントグループの下にあるプラスアイコンから、バリアントを追加。
サイズの値を新規追加して、文字・長方形シェイプを少し小さくした“Normal”を作成します。
これで大きさのバリエーションが出来ました。
コンポーネントグループの名称もわかりやすいものに変えたら完成です。
補足：ローカルコンポーネントとは？
今回作成したコンポーネントは、ローカルコンポーネントに登録されています。
ここでの“ローカル”とは、今使っているデザインファイルのことを指します。新規デザインファイルを作成した場合、そちらでは使えないわけです。
Figmaではスタイルやコンポーネントを公開し、別のファイルでも活用したり、チームの人が使えるようにする“ライブラリ”機能もあります。この機能を使いやすくするために、コンポーネントやバリアント、スタイルなど、デザインに必要なルール・パーツを整理したファイルを、デザインとは別に作るケースが多いです。こうした場合、コンポーネントやバリアントの命名ルールなども作られますね。
ただし、このライブラリは無料版では制限されている機能になります。
気になる方は、公式のチュートリアル動画を見たりして、イメージを掴んでおくと良いかもしれません。
今回の復習
度々登場している、カードデザインを使用したデザインイメージ。
横に並んでいる４つのカードを、コンポーネント機能（インスタンス）を使って作ってみましょう。メインコンポーネントは4つの中に含めても、別の箇所にまとめておいても、どちらでも構いません。
画像は、Unsplashで提供されている以下の素材を使用しました。
size：S もしくは 中間 |
配布元：白いドレスと黄色い帽子をかぶった女性 – Unsplash size：S |
配布元：昼間の青空の下での茶色のキリンの写真 – Unsplash size：S もしくは 中間 |
配布元：昼間茶色の岩の上に横たわるライオン – Unsplash size：S もしくは 中間 |
配布元：芝生の上を歩くアライグマの写真 – Unsplash size：S もしくは 中間 |
インスタンスの、画像変更と文字の打ち替えは簡単ですね。
ちょっと悩むのが、オレンジ色の星の数の変更ではないでしょうか。
一番簡単な方法は、メインコンポーネントでStarシェイプを最大個数用意しておいて、表示/非表示を切り替えることです。
バリアントを使って切り替えることもできますね。
星の数だけでカードのバリアントを増やすと把握しにくいので、星部分のみでコンポーネント化（バリアント設定）→インスタンスをカード内に配置するという方法もあります。
デザイン全体を作る時の作業のしやすさ、社内・チーム内でのルールなど、様々な要因があるため一概に「これが正解」と言い切れる方法はありません。
自分一人で作業をする時に、いろいろな方法を試してみてください。
そうすることで、状況にあわせて柔軟に対応できるようになります。
まずは無料で14講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
5月5日まで