コンポーネント設計の正解：Figmaで作る“再利用できるUI”完全ガイド

Posted on by

Figmaを使っていて、こんな悩みはありませんか？

  • コンポーネントを作ったら全部崩れた
  • どこまでコンポーネント化すればいいか分からない
  • 修正のたびに「これ触って大丈夫？」と不安になる
  • 結局、毎回コピペで作り直している

それ、コンポーネント設計の「考え方」を知らないだけです。

コンポーネントは
上級者向けの難しい機能
ではなく
UIを安定させ、作業をラクにするための設計手法。

この記事では、

  • コンポーネントの正しい役割
  • 再利用できるUIの設計ルール
  • 初心者がやりがちなNG設計
  • 実務で通用する考え方

を、順番に・分かりやすく解説します。

そもそもコンポーネントとは何か？

コンポーネントを一言で言うと、

「何度も使うUIを、1つの原本として管理する仕組み」

です。

コンポーネントの基本構造

  • Main Component（原本）
  • Instance（コピー）

原本を直すと、
すべてのコピーに反映される。

つまり、
「一括修正」と「UIの統一」ができる のが最大のメリットです。

なぜコンポーネントを使わないとUIは破綻するのか？

コンポーネントを使わない場合、こんなことが起きます。

  • ボタンの角丸が微妙に違う
  • 文字サイズがページごとにズレる
  • 修正漏れが発生する
  • 後から直すのが地獄

これは、
「UIを部品として扱っていない」 から。

実務では、
同じUIを何度も使う前提で設計します。

コンポーネント設計の大原則（超重要）

まず、この3つだけ覚えてください。

コンポーネント設計 3原則

  1. 1つの役割＝1コンポーネント
  2. 中身を詰め込みすぎない
  3. 変更されやすい部分だけ触れる設計にする

この原則を守れば、
コンポーネントは怖くありません。

Step1：まずは「小さいUI」だけコンポーネント化する

初心者がやりがちな失敗

画面丸ごとコンポーネント化する

これはNGです。

正解はこれ

  • ボタン
  • タグ
  • 入力欄
  • アイコン付きテキスト

単体で意味を持つUI だけをコンポーネントにします。

Step2：Auto Layoutありきで設計する

再利用できないコンポーネントの多くは、
Auto Layoutが入っていない ことが原因です。

基本構造（例：ボタン）

Component（Auto Layout）
 └ テキスト（Hug contents）

ポイント

  • Paddingで余白管理
  • テキストはHug
  • Fixedサイズは極力使わない

Auto Layout × Component はセットです。

Step3：Variantは「状態管理」に使う

Variantは、
見た目違いをまとめるための機能。

よくある使い方

  • ボタン：Default / Hover / Disabled
  • サイズ：S / M / L
  • 種類：Primary / Secondary

NG例

  • 全く別役割のUIをVariantでまとめる

Variantは「同じ役割・違う状態」だけ。

Step4：触っていい部分・ダメな部分を分ける

良いコンポーネントは、
「どこを触っていいか」が直感的です。

初心者におすすめの設計

  • テキスト：変更OK
  • 色：Variantで変更
  • 余白・構造：変更不可

Instanceで触らせすぎないのがコツ。

Step5：命名ルールで迷子を防ぐ

コンポーネントが増えると、
名前が超重要になります。

命名の基本

Btn / Card / Tag / Input

Variant名の例

Btn / Primary / Default
Btn / Primary / Hover
Btn / Secondary / Default

「誰が見ても分かる名前」 が正解。

よくあるNGコンポーネント設計

NG①：1つに詰め込みすぎ

  • ボタン＋アイコン＋説明文＋タグ…

役割が増えたら分割。

NG②：後から無理やりコンポーネント化

  • レイアウトが崩れる
  • 修正が怖くなる

最初からコンポーネント前提で作る。

NG③：Variant乱用

  • 状態も役割もごちゃ混ぜ

Variantは最小限に。

実務で使えるコンポーネント設計例

ボタン

  • Auto Layout
  • Padding管理
  • Variantで色・状態管理

カード

  • 親：縦Auto Layout
  • 子：画像 / テキスト / ボタン
  • 情報順に並べる

フォーム

  • ラベル＋入力欄
  • エラー状態をVariantで管理

コンポーネント設計ができる人の思考法

上手い人はこう考えています。

  • 「これは何回使う？」
  • 「どこが変わる？」
  • 「どこは変えちゃダメ？」
  • 「修正が来たらどこ直す？」

未来の自分・チームのための設計です。

まとめ｜再利用できるUIは“設計”で決まる

コンポーネント設計の正解は、
たくさん作ることではありません。

  • 小さく作る
  • Auto Layoutで安定させる
  • Variantは状態管理に使う
  • 触れる場所を制限する

これだけで、

  • UIが崩れない
  • 修正が一瞬
  • デザインが統一される
  • 実務に強くなる

そんなFigmaスキルが身につきます。

まずやること

  1. ボタンを1つ、正しくコンポーネント化する
  2. Variantで状態を分ける
  3. 他のUIに使い回してみる

ここから始めてみてください。

#Figma #フィグマ #Figma初心者 #Webデザイン勉強中 #UIデザイン #デザイン独学#コンポーネント設計 #Figmaコンポーネント #再利用できるUI #UI設計 #デザイン設計 #作業効率化 #時短デザイン #デザイン効率化 #駆け出しデザイナー #今日の積み上げ