Figmaのコンポーネントとインスタンスを理解する

• Figmaのコンポーネント基礎
• コンポーネントとは
• コンポーネント化すると、何が良い？
• Figmaでコンポーネントを作ってみよう
• コンポーネントインスタンスを理解する
• インスタンスを配置する
• メインコンポーネントとインスタンスの違い
• インスタンスオプション

Figmaのコンポーネント基礎

Figmaの基本的なツールや操作方法がわかったら、コンポーネント機能を使ってみましょう。
コンポーネント機能を活用できると、作業効率も、デザインのクオリティも上がります。

コンポーネントとは

Figmaでコンポーネント（Component）とは、一つのデザインの中で再利用する、共通性を持った要素のこと。
コンポーネント機能・コンポーネント化というのは、何度も使うアイテムをテンプレート化して使いやすくする機能と考えると、想像しやすいと思います。

Webサイト//Webアプリケーションの中では、同じ、もしくは多少バリエーションはあってもほぼ同じ、というデザインの要素が結構使われています。代表的なものとしては、ヘッダーやフッターなどが挙げられるでしょう。

もっと細かいパーツで言うと、ボタンや、記事カードなどもそうです。

例えば、前回作ったカードデザイン。
これも、以下のように複数並べて利用することが多いと思います。
画像やテキストは変わっていますが、全体的なデザイン自体は同じ設定を再利用していますよね。

以下はFigmaの価格設定ページです。
「プランを選ぶ」「お問い合わせ」のボタンを見て下さい。

https://www.figma.com/ja/pricing/

SkillHubのヘッダーやフッターのように全く同じではありませんが、サイズや角の丸みなど、共通点が多いですよね。
こういったものが、コンポーネントにできる、コンポーネント化しておくと便利な要素です。

コンポーネント化すると、何が良い？

Figmaでコンポーネント機能を使う最大のメリットは、変更が1回で済むということです。

例えば、カードを複製して並べたとしましょう。
そのあとに余白やレイアウトを変更したい場合、個別に直すか、複数選択して調整するしかありません。
面倒ですし、数が多ければ直し忘れも出てくるかもしれません。

Figmaのコンポーネント機能を活用すると、メインコンポーネントを直せば、他の箇所にも変更が反映されます。
一括でデザインが変更できるわけです。

同じデザインが使われている場所を探し回ったりする必要もないので、とても楽ですね。

デザインの一括編集だけではなく、コンポーネント機能でバリエーションを作って登録したりもできます。
作業時間短縮に役立つ機能なので活用していきましょう。

Figmaでコンポーネントを作ってみよう

Figmaでコンポーネントを作成してみましょう。

コンポーネントとして登録したいオブジェクト、もしくはオブジェクトのまとまりを選択状態にします。
以下ではカードデザインをまるっと選択しています。

コンポーネントを作成するには、以下3つの方法があります。
どれを使っても結果は同じですので、使いやすい方法で行って下さい。

• 右クリックメニューから[ コンポーネントの作成 ]を選ぶ
• ツールバーのアクションから、◇が4つ重なったアイコンを使う
• ショートカットキーを使う
  （Windows :Ctrl + Alt + K / Mac :⌘ + Option + K）

コンポーネントを作成すると表示が変わります。
レイヤーパネル名称左横のアイコンや、キャンバス上に表示されるアイコンで判別できます。

左サイドバーをアセットパネルに切り替えみましょう。
ローカルコンポーネントの項目下に、今作成したコンポーネントが追加されています。

コンポーネントインスタンスを理解する

コンポーネント化する目的である“デザインの再利用”をしてみましょう。
コンポーネントに基づいて作られるアイテム、いわば再利用されているオブジェクトのことを「インスタンス」と呼びます。

インスタンスを配置する

アセットパネルからコンポーネントを選択し、[インスタンスを挿入]ボタンを押します。

コンポーネント化したアイテムの複製のようなものが、キャンバスに追加されました。

全く同じものに見えますが、レイヤーパネルで見てみると、[インスタンスを挿入]で挿入されたものはアイコンが違いますね。
◆が4つ集まっているアイコンがメインコンポーネント、◇のアイコンがインスタンスを示しています。

なお、レイヤーパネルやキャンバス上でメインコンポーネントを複製しても、自動的にインスタンスになります。

アセットパネルの[インスタンスを挿入]からでも、どちらを使っても構いません。
インスタンスを配置したい場所などに合わせて、使いやすい方を使って下さい。

メインコンポーネントとインスタンスの違い

最初にコンポーネントを作成したオブジェクトがメインコンポーネント、複製したものはインスタンスになります。
この２つの、具体的な違いを見ていきましょう。

メインコンポーネントとインスタンスについて、Figmaでは以下のように説明されています。

1. メインコンポーネントは、コンポーネントのプロパティを定義します。
2. インスタンスは、デザインで再利用できるコンポーネントのコピーです。インスタンスはメインコンポーネントにリンクされていて、メインコンポーネントに行ったあらゆる更新が反映されます。

引用元：Figmaのコンポーネントについてのガイド – Figma Learn

メインコンポーネントがデザインの大元、基本の“型”です。
『親』と表現されることもあります。

インスタンスはコンポーネントのコピー。
完全なる複製ではなく再利用がしやすいよう、メインコンポーネントの一部を変更できる『子』のイメージです。

『親』のメインコンポーネントを変更すると、インスタンスにも反映されます。
例えば、テキストの位置を変えると、インスタンスも同じように変更されます。

インスタンスに変更を加えても、他のインスタンスやメインコンポーネントには影響しません。
また、位置など、メインコンポーネントでしか変更できないプロパティもあります。

インスタンスでテキストや画像を変更した場合、メインコンポーネントを変更しても内容は反映されません。
メインコンポーネントそのままであれば、メインコンポーネントと一緒に変わります。

メインコンポーネントの探し方・復元方法

デザインを作成していくと、メインコンポーネントが行方不明（探すのが大変）という状況に陥るかもしれません。
そんなときは右サイドバーからメインコンポーネントを発見出来ます。

インスタンスを選択していれば、以下の [ メインコンポーネントに移動 ] アイコンが表示されます。
これをポチッと押せば、メインコンポーネントが表示・選択状態になりますよ。

誤ってメインコンポーネントを削除してしまった場合は、以下のように[ コンポーネントを復元 ] ボタンが表示されます。

インスタンスオプション

インスタンスには、インスタンスオプションという少し特殊な設定が用意されています。

インスタンスオプションがあるのは、右サイドバー。
インスタンス名の右横にある、ドットメニュー（アイコン）です。

インスタンオプションで出来ることを見ていきましょう。

インスタンスの切り離し

[インスタンスの切り離し]では、インスタンスを独立したフレーム（グループ）に変換します。
メインコンポーネントと切り離すわけですから、メインコンポーネントの変更・更新による影響を受けなくなります。
編集可能な項目の制限も無くなります。

変更をメインコンポーネントにプッシュ

インスタンスに加えた変更は、そのインスタンスにのみ適用される。
これが基本ではありますが、インスタンス側で行った調整が良かったから全体に反映したい…みたいなこともあります。
変に上書きしてしまわないよう、メインコンポーネントをデザインに使っていない場合などですね。

そんな時は、この[ 変更をメインコンポーネントにプッシュ ]を使います。

インスタンス側で行った変更、下図の場合はテキストや★の色変更が、メインコンポーネントへ反映されます。

メインコンポーネントが更新させるので、他のインスタンスにも変更が反映されています。

すべての変更をリセット

メインコンポーネントと全く同じ状態にリセットしたい時に使います。