Figmaのコンポーネント機能とは？効率よくデザインを使い回すコツ

Webサイトのデザインでは、ヘッダーやボタン、カードなど、同じパーツを何度も使います。「全部のページのボタンの色を変えたいのに、1つずつ直さなければいけない」という経験はありませんか？

そんなときに役立つのが、Figmaの「コンポーネント」機能です。パーツを1か所で管理できるので、修正が一括で反映され、デザインの統一感も保てます。この記事では、コンポーネントの基本から、よくある失敗の対処法までを初心者向けに解説します。

コンポーネントとは？

コンポーネントとは、ボタンやヘッダーなど、繰り返し使うパーツを「部品」として登録できる機能です。

登録した元のパーツを「メインコンポーネント」、そこから複製して使うパーツを「インスタンス」と呼びます。

メインコンポーネントを修正すると、すべてのインスタンスに変更が反映されます。

コンポーネントを使うメリット

• 修正が一括で反映される：色や文字サイズを、1か所直すだけで済む
• デザインに統一感が出る：同じパーツが、ページごとにずれる心配がない
• 作業が早くなる：一度作れば、コピーして使い回せる
• チームで共有しやすい：パーツの名前やルールをそろえて、作業を分担できる

コンポーネントの基本の使い方

ここでは、ボタンを例に説明します。

1. コンポーネントにしたいパーツを作る

まずは、コンポーネントにしたいパーツを通常どおり作ります。ボタンなら、角丸の四角形に「お問い合わせ」などの文字を重ねたものです。

あとで文字の長さが変わっても対応できるよう、オートレイアウトを設定しておくのがおすすめです。右側のパネルのオートレイアウトのアイコンをクリック（ショートカット：Shift＋A）して設定します。

オートレイアウトについての詳しい記事はこちら

Figmaで記事のレイアウトに使える便利な機能

2. コンポーネントを作成する

先ほど作ったパーツを選択し、上部メニューにある「オブジェクト」から「コンポーネントを作成」を選びます。右クリックメニューからも作成できます。

ショートカット

• Windows「Ctrl＋Alt＋K」
• Mac「Command＋Option＋K」

作成すると、パーツの名前の横に、紫色のひし形が4つ集まったアイコンが表示されます。

3. インスタンスを配置する

次のいずれかの方法で、インスタンスを配置できます。

• 作ったコンポーネントをコピー＆ペーストする（同じ位置にペーストされます）
• 作ったコンポーネントを選択しOption（Windowsは Alt）を押しながらドラッグ＆ドロップ
• 左側の「アセット」パネルからキャンバスにドラッグ＆ドロップ

インスタンスには、中が空のひし形アイコンが表示されます。

4. メインコンポーネントを修正する

メインコンポーネントの色や形を変えると、すべてのインスタンスに自動で反映されます。

たとえば、ボタンの色をオレンジから青に変えると、サイト内のすべてのボタンが一度に変わります

インスタンスだけを変更する（オーバーライド）

インスタンスは、メインコンポーネントとつながったまま、一部だけを変更できます。この機能を「オーバーライド」と呼びます。

• 文字を変える（例：「お問い合わせ」→「資料請求」）
• 色を変える
• 非表示にする

インスタンスごとにボタンの文言を変えたいときも、新しくパーツを作る必要はありません。

オーバーライドした部分を元に戻したいときは、インスタンスを選択して、右クリックメニューの「インスタンスをリセット」を選びます。

コンポーネントを作るときのコツ

名前のルールを決める

コンポーネントの名前は、スラッシュ（/）で階層をつけると、アセットパネルで整理されて見やすくなります。

• 例：「Button/Primary」「Button/Secondary」「Card/Basic」

小さなパーツから作る

最初から大きなパーツを作るより、ボタン、アイコン、見出しなど、小さなパーツから作るのがおすすめです。小さなパーツを組み合わせて、ヘッダーやカードを作ると、管理もしやすくなります。

オートレイアウトと組み合わせる

文字数が変わっても、余白や並びが崩れないよう、オートレイアウトと組み合わせておくと便利です。

よくある失敗と対処法

1つだけ直したかったのに、全部変わってしまった

メインコンポーネントを修正すると、すべてのインスタンスに反映されます。1つだけ変えたいときは、メインコンポーネントではなく、インスタンスを選択して修正しましょう。

修正したのに、ほかのボタンに反映されない

そのボタンが、「インスタンス」ではなく、通常のパーツになっていないか確認しましょう。コピー元がメインコンポーネントでなかったり、インスタンスを切り離してしまっていたりすると、つながりがなくなります。

インスタンスを切り離したいときは

インスタンスを切り離す（コンポーネントとのつながりを外す）と、通常のパーツとして扱われます。切り離したいときは、右クリックメニューの「インスタンスの切り離し」を使います。

ショートカット

• Windows「Ctrl＋Alt＋B」
• Mac「Command＋Option＋B」

つなぎ直したいときは、改めてインスタンスを配置し直しましょう。

メインコンポーネントが見つからない

インスタンスを右クリックして、「メインコンポーネント」→「メインコンポーネントに移動」を選ぶと元のパーツの場所へ移動できます。

まとめ

コンポーネントは、デザインを効率よく、統一感を保ちながら作るための基本機能です。

• 繰り返し使うパーツをコンポーネントにして、一元管理する
• メインコンポーネントを修正すると、すべてのインスタンスに反映される
• 文字や色の変更は、インスタンス側のオーバーライドで対応できる
• 名前のルールを決めて、小さなパーツから作る

最初は、ボタン1つから試してみてください。使い慣れると、ページ数の多いサイトでも、修正の手間が大きく減ります。

こうした設計の工夫が、効率のよい制作と、統一感のあるサイトにつながります。GIVは川越でデザインの細部までこだわったホームページ制作をしています。デザインカンプの制作からお任せいただくことも可能ですので、お困りの際は、お気軽にご相談ください。