「Figmaでコンポーネントを作ったけど、どんどん複雑になってきて管理しきれない…」
そんな経験はありませんか？
Figmaのコンポーネント機能は強力ですが、設計ルールなしに作り始めると、すぐにカオスになります。
名前がバラバラ、バリアントが増えすぎて探せない、変更したら他の場所が壊れた—よくある悩みです。
コンポーネント設計には「型」があります。
命名規則、階層構造、プロパティの使い分け。
これらの設計原則を押さえておけば、規模が大きくなっても破綻しない、メンテナンスしやすいコンポーネントライブラリが作れます。
このガイドでは、8本の記事を通じて、プロの現場で使えるFigmaコンポーネント設計のノウハウをお伝えします。
このガイドで学べること
🎯 到達目標
- 破綻しないコンポーネントの命名規則を身につける
- 階層構造を意識した設計ができるようになる
- バリアント・プロパティを適切に使い分けられる
- チームで共有できるコンポーネントライブラリを構築できる
👤 対象者
- Figmaの基本操作はできるが、コンポーネント設計に自信がない方
- 個人で作ったデザインをチームで使えるようにしたい方
- デザインシステムの構築を任されたデザイナー
記事一覧
Part 1: 設計の基礎
コンポーネント設計の土台となる考え方を学びます。
| 記事 | 学べること |
|---|---|
| コンポーネントの階層構造 | Atomic Designの考え方、粒度の決め方 |
| 現場で使える命名規則 | 一貫性のある名前付けルール |
Part 2: 機能の活用
Figmaの機能を最大限に活かす方法を学びます。
| 記事 | 学べること |
|---|---|
| プロパティとバリアント活用 | バリアント設計、プロパティの使い分け |
| ボタンのステート管理 | 通常 / ホバー / プレス / 無効の設計 |
| Slotテクニック | 柔軟性と一貫性を両立する手法 |
Part 3: 実装との連携
デザインと開発をつなぐ技術を学びます。
| 記事 | 学べること |
|---|---|
| VariablesとCSS設計 | デザイントークン、CSSへの展開 |
| Dev Modeの活用 | エンジニアとの連携効率化 |
Part 4: 応用テクニック
より高度な表現を学びます。
| 記事 | 学べること |
|——|———–|
| [Lottieアニメーション](https://rkpg.net/figma-lottie-animation/) | マイクロインタラクションの実装 |
設計で大切な3つの原則
1. 一貫性（Consistency）
同じものには同じ名前、同じ構造を。チームメンバーが迷わない設計を心がけます。
✅ Button/Primary/Default
✅ Button/Primary/Hover
✅ Button/Secondary/Default
❌ PrimaryBtn
❌ btn-secondary-hover
❌ ボタン_青
2. 拡張性（Scalability）
後から要素が増えても破綻しない構造を考えます。「今は2種類だけど、将来増えるかも」という視点が重要です。
3. 実装可能性（Implementability）
「デザインは作ったけど実装できない」を防ぐために、開発者の視点を持ちます。Dev Modeを活用して、実装しやすいコンポーネントを目指しましょう。
おすすめの学習順序
Step 1: 基礎を固める
まずは階層構造と命名規則から。この2つがすべての土台になります。
Step 2: 機能を使いこなす
プロパティとバリアントで、効率的なコンポーネント管理を学びます。
ボタンのステート管理は実践的な例として参考になります。
Step 3: 開発チームと連携する
VariablesとDev Modeで、デザインと実装の橋渡しができるようになります。
Step 4: 表現の幅を広げる
SlotテクニックやLottieアニメーションで、より高度な設計・表現に挑戦します。
まずはここから
コンポーネント設計の第一歩は、階層構造を理解することです。
コンポーネントの階層構造では、Atomic Designの考え方をベースに、どの粒度でコンポーネント化すべきかを解説しています。
「なんとなく」で作っていたコンポーネントを、「設計意図を持って」作れるようになる。それがこのガイドのゴールです。
