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

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設計 #デザイン設計 #作業効率化 #時短デザイン #デザイン効率化 #駆け出しデザイナー #今日の積み上げ

Favorite