前回のブログでは運動を始めたとお話ししたのですが、今度は料理教室に通い始めました。今まで料理をしてこなかったので自信はないのですが、お昼はお弁当派なので、見栄えも良く美味しいお弁当を作れるようになることが新しい目標です。
さて、今回はFigmaの便利な機能である「コンポーネント」の基本的な使い方をご紹介します。前回の記事ではローカルスタイルについてお話ししました。ローカルスタイルを使えば、色やテキストスタイルを一括管理できるので、デザインの統一感を保ちつつ、修正も簡単に行えます。でも、実際のデザイン作業では 「ボタンの配置やサイズも統一したい…」「複数ページで同じ要素を再利用したい…」 という場面があるのではないでしょうか。そこで活躍するのが「コンポーネント」です。コンポーネントを活用することで、デザインの一貫性を保ちながら、修正や変更も効率よく行えるようになります。
今回は初心者の方に向けて、コンポーネントの基本的な作成方法から編集方法までをわかりやすく解説していきますので、使ったことがない方はぜひ参考にしてみてくださいね。
Table of contents
Figmaのコンポーネントとは？
Figmaの「コンポーネント」は、再利用可能なデザイン要素のことです。
たとえば、「ボタン」や「ナビゲーションバー」などをコンポーネントにしておけば、別のページにコピーしても、元のコンポーネントを編集すればすべての箇所に自動で反映されます。
また、コンポーネントには2種類の役割があります。
- マスターコンポーネント：元になる親コンポーネント
- インスタンス：マスターコンポーネントから生成されたコピー
マスターコンポーネントを変更すると、すべてのインスタンスに反映されるので、デザインの統一感を保ちながら効率的に修正作業が行えます。
コンポーネントの作成方法
コンポーネントの作成方法はとてもシンプルです。以下の手順に沿って進めれば、簡単に作成できます。
- 対象のデザイン要素を選択
- 右クリックして「コンポーネントを作成」を選択
- これでコンポーネントが作成されます
選択した状態で右クリック
この状態になればコンポーネント化成功です
インスタンスの編集方法
1. 一部だけ編集する場合
インスタンスを選択して直接編集できます。ただし、インスタンス側で編集した内容はマスターコンポーネントには影響しません。
たとえば、ボタンのテキストを個別に変更したい場合、インスタンスを直接編集すれば、他のインスタンスには影響を与えずに修正が可能です。
2. マスターコンポーネントを編集して全体を更新する場合
マスターコンポーネントを選択して編集すると、すべてのインスタンスが一括で更新されます。
たとえば、ボタンの色や形をマスターコンポーネントで変更すると、配置済みのすべてのボタンにその変更が即座に反映されます。
コンポーネントの活用ポイント
- 繰り返し使用するUIパーツをコンポーネント化
ボタン・アイコン・ヘッダー・フッターなど、複数のページに共通して使用される要素はコンポーネント化しておくのがおすすめです。たとえば、プロジェクト後半で色や形の変更が必要になった際、コンポーネントを使用していれば、マスターコンポーネントを1箇所修正するだけで全ページに自動反映されます。これにより、100個以上の要素を手動で修正するような手間が省け、デザイン崩れや人的ミスの防止にもつながります。 - オートレイアウトと組み合わせて柔軟性アップ
Figmaの「オートレイアウト」は、ボタンやカード、リストなどのサイズや配置を自動で調整してくれる機能です。コンポーネントと組み合わせることで、使い回しやすく、メンテナンス性の高いデザインが可能になります。例：ボタンにオートレイアウトを設定する
①ボタンのデザインを作成し、テキストと背景を選択
②プロパティパネルのオートレイアウトアイコンもしくは右クリックのメニューで「オートレイアウトを追加」を選択
③ボタンの横幅サイズを「コンテンツを内包」に設定すれば文字数に合わせて横幅が自動で変更されます
おわりに
今回はFigmaの「コンポーネント」について、初心者向けに基本的な使い方を解説しました。
コンポーネントを活用すれば、デザインの一貫性を保ちながら作業効率を大幅にアップできます。
Figmaには他にも便利な機能がたくさんあるので、ぜひ色々と試してみてください！
最後まで読んでいただきありがとうございました。