[Figma] 15 Figmaでのコンポーネントの作り方と使い方。

Figmaのコンポーネント機能

Webページデザインの作業では、基本的に1ページのみではなく数ページを作る場合が多くなります。
そのため、ヘッダーやフッターなど共通のパーツは数ページにわたり使用することになります。

Figmaにはコンポーネントと呼ばれるページを跨いで共通パーツを使用することができる機能があります。
コンポーネント機能を活用して、一度作ったパーツを使いまわし、制作効率の向上に繋げましょう。

コンポーネントとは

Figmaのコンポーネントとは、デザインファイル内で再利用可能なデザイン要素(パーツ)のことです。
ボタンやヘッダーなどの共通要素をコンポーネントとして作成しておくと、マスター(ひな形)である「メインコンポーネント」の内容を変更するだけで、
複製されたすべての子「インスタンス」に自動で反映されるため、デザインの一貫性を保ちつつ作業効率を大幅に向上させることができます。

以下で関連用語である「メインコンポーネント(親)」および「インスタンス(子)」の親子関係を含めた解説を行います。

メインコンポーネント(親)

メインコンポーネントは再利用可能なデザイン要素の「マスター(ひな形)」となる「親」の要素です。
同じデザインをファイル内や複数のページで繰り返し使用したい場合にコンポーネント化しますが、
その際に最初に作成されるコンポーネントがメインコンポーネントです。

インスタンス(子)

インスタンスはメインコンポーネントから作成された再利用可能なコピーで、デザインファイル内で使用されます。
メインコンポーネントを編集すると、それから生成された「インスタンス(子要素)」すべてにその変更が自動で反映されるため、
デザインの一貫性を保ちながら効率的な編集作業が可能になります。

コンポーネントの作り方

ではコンポーネントの作り方の解説です。

手順は以下。

1. パーツを制作してアートボードやレイヤーパネルで選択する。※必ずグループを選択する
2. 右クリック > コンポーネントを作成(Ctrl + Alt + K)の順にクリックする。
3. アートボードの枠とレイヤー名とアイコンが紫になる。またアイコンの表示が変わり、コンポーネントが出来上がる。

コンポーネントの使い方

次はコンポーネントの使い方の解説です。

手順は以下。

1. ナビゲーションパネルで[アセット]をクリックする。
2. [すべてのライブラリ]に表示された[このファイル内で作成]をクリックする。
3. 先ほど作成したコンポーネントが表示されるのでクリックする。
4. インスタンスを挿入ボタンをクリックする。
5. アートボードにインスタンスが挿入される。
6. 配置したインスタンスを適切な位置に移動する。
7. [アセット]から[ファイル]に戻し、レイヤーパネルの適切な場所に移動する。
8. インスタンスとコンポーネントはアイコンで見分けることができる。

以上です。

まとめ

メインコンポーネントの文字列を書き換えたらどうなるのか?インスタンスのボタンの色を変えたらどうなるのか?
などなど、アートボードに配置したら、何をしたらどう変化するかなどを自分で触って確かめてみましょう。
Figmaは「習うより慣れろ」がふさわしいツールだと思います。

参考:【Figma】コンポーネントの使い方|初心者向けガイド(作成・解除・管理) – tagnote