コンポーネントを使ってデザインを揃える

同じ見た目の部品を毎回作り直さず、修正しやすいデザインを目指します。

コンポーネントは「再利用する部品」

サイト内のボタン、タグ、カードなど、同じ役割のデザインを共通化する仕組みです。メインコンポーネントを元に、画面上へ配置する複製(インスタンス)を作ります。

どんなとき便利?

  • 複数の画面でボタンの角丸や文字サイズを統一したい。
  • 「申込む」「詳しく見る」など、ボタンのテキストだけ変えて使いたい。
  • デザイン全体を見直すとき、修正漏れを減らしたい。

基本演習

  1. テキストと背景を含むボタンをフレームとして作る。
  2. コンポーネント化して、インスタンスを複数配置する。
  3. インスタンスのテキストだけ変える。
  4. メイン側の角丸を変更し、各インスタンスにどう反映されるか確認する。

ミニ演習

色違いのボタンを3個作る前に、共通のルール(高さ、文字サイズ、余白、角丸)を書き出してみましょう。何を共通化し、何を変えるか説明できれば一歩前進です。

参考

Figma公式:Guide to components in Figma

※ 個々のファイル内でのコンポーネント作成と、チーム向けライブラリの公開は別機能です。ライブラリ公開はFigmaの有料プランが対象です。

ここまで学べましたか?

学習済みの記録は、このブラウザの中にだけ保存されます。ログインや送信はありません。

もっと実践的に学びたい方へ

SFIMA COLLEGEの受講・学び方のご相談は公式LINEからどうぞ。

公式LINEで相談する
この教材について

SFIMAの研修指導方針をもとに、初学者向けに編集した教材です。操作画面はツールの更新によって変わる場合があります。実務では目的や状況に合わせて判断してください。