こんにちは！本日のブログ担当です。
デザインを制作していて、「同じボタンを何個も作っていたら、少しずつ見た目が違っていた…」「ボタンの角丸を変えるために、全部の画面を修正しなきゃ…」なんて面倒に感じたことはありませんか？
今回は、そんな繰り返しの作業を楽にしてくれるFigmaの便利機能「コンポーネント」の基本を紹介します！
前回紹介した「オートレイアウト」と組み合わせると、修正しやすいパーツが作れるので、ぜひ一緒に使ってみてください。
コンポーネントってなに？
コンポーネントを一言でいうと、**「同じデザインを繰り返し使うための、再利用できるパーツ」**です。
例えば、ボタンやアイコン、カードなど。何度も登場するパーツをコンポーネントにしておくと、見た目をそろえやすくなります。
普通にコピーしたパーツは、修正するときもそれぞれ編集する必要があります。一方、コンポーネントなら、元のパーツを変更することで、配置したパーツにも変更を反映できます。
画面数が増えるほど、この便利さを実感できます！
「メインコンポーネント」と「インスタンス」の違い
最初に覚えておきたいのが、この2つの言葉です。
| 名前 | どんなもの？ | 主な役割 |
|---|---|---|
| メインコンポーネント | デザインの元になるパーツ | 共通の見た目を管理する |
| インスタンス | メインコンポーネントとつながったコピー | 各画面に配置して使う |
イメージは、**「原本」と「原本につながったコピー」**です。
例えば、メインコンポーネントでボタンの角丸を変更すると、インスタンス側にも反映されます。同じファイル内なら、この連動をすぐに試せます。
実際にボタンを作ってみよう！
① オートレイアウトでボタンを作る
まずは「お問い合わせ」と書いたテキストを用意し、選択した状態で Shift＋A を押します。
背景色や余白、角丸を設定したら、ボタンの完成です！
前回紹介したように、外側のフレームを「内包（Hug contents）」にすると、文字の長さに合わせて幅が変わるボタンにできます。
② コンポーネントにする
作成したボタン全体のフレームを選択して、右クリックから「コンポーネントを作成（Create component）」を選びます。
これで、そのボタンがメインコンポーネントになります。「Button」など、用途が分かる名前を付けておくと探しやすくなります。
③ インスタンスを配置する
同じファイル内でメインコンポーネントをコピー＆ペーストすると、インスタンスを作れます。
いくつか並べたら、メインコンポーネントの角丸を変更してみましょう。配置したボタンにも変更が反映されれば成功です！
ボタンごとに文字を変えたいときは？
「見た目はそろえたいけど、文字は『お問い合わせ』『資料請求』と使い分けたい！」
そんなときは、インスタンス側のテキストを変更します。
このように、インスタンスで一部の設定を個別に変更することを「オーバーライド」と呼びます。インスタンスの文字を変えても、メインコンポーネントやほかのインスタンスの文字は変わりません。
共通のデザインを保ちながら、使う場所に合わせて内容を変えられるのが便利なポイントです！
変更が反映されないときは？
メインコンポーネントを修正しても一部が変わらないときは、インスタンス側で同じ項目を変更していないか確認してみましょう。
例えば、インスタンスで背景色を個別に変更していると、その色の設定が優先され、メイン側の背景色の変更が反映されないことがあります。
迷ったときは、次のように整理すると分かりやすいです。
- すべてのパーツに共通する変更 → メインコンポーネントで編集
- その場所だけに必要な変更 → インスタンスで編集
まずは、よく使うボタンを1つコンポーネントにするところから始めてみましょう。
前回のオートレイアウトと組み合わせれば、「文字の長さにも、共通デザインの修正にも対応しやすいボタン」が作れます。ぜひ普段のFigma作業で試してみてください！
