コンポーネントは「再利用する部品」
サイト内のボタン、タグ、カードなど、同じ役割のデザインを共通化する仕組みです。メインコンポーネントを元に、画面上へ配置する複製(インスタンス)を作ります。
どんなとき便利?
- 複数の画面でボタンの角丸や文字サイズを統一したい。
- 「申込む」「詳しく見る」など、ボタンのテキストだけ変えて使いたい。
- デザイン全体を見直すとき、修正漏れを減らしたい。
基本演習
- テキストと背景を含むボタンをフレームとして作る。
- コンポーネント化して、インスタンスを複数配置する。
- インスタンスのテキストだけ変える。
- メイン側の角丸を変更し、各インスタンスにどう反映されるか確認する。
ミニ演習
色違いのボタンを3個作る前に、共通のルール(高さ、文字サイズ、余白、角丸)を書き出してみましょう。何を共通化し、何を変えるか説明できれば一歩前進です。
参考
Figma公式:Guide to components in Figma
※ 個々のファイル内でのコンポーネント作成と、チーム向けライブラリの公開は別機能です。ライブラリ公開はFigmaの有料プランが対象です。