Figmaのコンポーネント管理を整理する。現場で使える命名規則のテクニック

SHARE

「このコンポーネント、どこにあったっけ…」
「他のデザイナーが作ったコンポーネント、どう使えばいいんだろう」
「似たようなコンポーネントがたくさんあって、どれを使えばいいのかわからない」

Figmaでのデザイン作業中、こんな経験はありませんか？

コンポーネントは作れば作るほど便利なはずが、適切な管理ができていないために、かえって作業効率を下げてしまうことも。
特に、チームでの作業では、統一された命名規則がないために混乱が生じがちです。

この記事では、現場のデザイナーが実践している、効率的なコンポーネント管理と命名規則のテクニックをご紹介します。

探しやすく、使いやすく、そして将来的な保守も考慮した命名規則の考え方を、具体例とともに解説していきます。
明日のデザイン作業から即実践できる、現場視点のテクニックをお伝えします。

目次

1. コンポーネント命名の基本ルール

コンポーネントライブラリが成長するにつれて、最も重要になってくるのが命名規則です。適切な命名規則がないと、以下のような問題が発生します：

  • 同じような名前のコンポーネントが乱立
  • 必要なコンポーネントを見つけるのに時間がかかる
  • 新しいメンバーが加わった時の学習コストが高い

1-1. 基本的な命名構造

効率的な命名規則の基本は、以下の構造に従うことです：

[カテゴリ]/[要素名]/[バリエーション]

例：
Button/Primary/Large
Card/Blog/WithImage
Input/Text/Error

この構造には以下のメリットがあります：

  • 論理的な階層がわかりやすい
  • 検索性が高い
  • 拡張性がある

1-2. 避けるべきパターン

よくある命名の失敗例とその対処法を見ていきましょう：

❌ 悪い例：
button_1
button_new
button_latest
※ 時系列や番号での管理は避ける

⭕ 良い例：
Button/Primary/Large
Button/Secondary/Small
Button/Ghost/Medium
※ 役割や特徴で区別する

1-3. プロジェクトでの統一ルール

チームで共有すべき命名規則のポイントは以下の3つです：

表記ルール

パスカルケース：Button, Card, Input
スネークケース：button, card, input
※どちらかに統一する

使用する用語

共通の用語集：
Size: Small, Medium, Large
State: Default, Hover, Active
Style: Primary, Secondary, Ghost

省略形のルール

統一された省略形：
Background → Bg
Navigation → Nav
Information → Info

これらのルールは、必ずチーム内でドキュメント化し、共有することが重要です。

2. 探しやすい名前の付け方

コンポーネントの命名で最も重要なのは「探しやすさ」です。いくら整理されていても、必要なコンポーネントが見つからなければ意味がありません。

ここでは、コンポーネントを迷わず見つけられるようにするための、実践的なテクニックを紹介します。

2-1. プレフィックスの活用

プレフィックスを使うことで、コンポーネントの種類や役割を即座に判別できます。

📱 機能による分類
ui-: 基本的なUI要素
└── ui-button, ui-input, ui-icon
nav-: ナビゲーション要素
└── nav-menu, nav-breadcrumb, nav-tab
form-: フォーム関連要素
└── form-input, form-select, form-checkbox

🎯 状態による分類
is-: 状態を表す
└── is-active, is-disabled, is-loading
has-: 特定の要素の有無
└── has-icon, has-image, has-badge

2-2. 階層を反映した命名

フォルダ構造と命名を連動させることで、直感的な検索が可能になります。

Components/
├── Base/
│   ├── Base/Button/Primary
│   ├── Base/Input/Text
│   └── Base/Icon/System
├── Common/
│   ├── Common/Card/Blog
│   ├── Common/List/Product
│   └── Common/Modal/Default
└── Feature/
├── Feature/Dashboard/StatCard
├── Feature/Profile/UserInfo
└── Feature/Shop/ProductGrid

2-3. 検索性を高めるテクニック

絵文字の活用

🔵 Primary Button
🔷 Secondary Button
⚪️ Ghost Button
※ ビジュアルで即座に判別可能

キーワードの一貫性

サイズ表記：

  • sm, md, lg
  • small, medium, large ※ どちらかに統一する

カラー表記：

  • primary, secondary, accent
  • main, sub, accent ※ プロジェクト全体で統一

関連コンポーネントのグループ化

Form/
├── Form/Input/Text
├── Form/Input/Number
└── Form/Input/Date
※ 関連する要素をまとめて管理

2-4. 命名のベストプラクティス

一貫性の重視

良い例：
Button/Size/Large
Button/Style/Primary
Button/State/Hover

避けるべき例：
btn-lg
PrimaryButton
button_hover_state

略語の使用ルール

推奨される略語：
Background → Bg
Navigation → Nav
Information → Info

避けるべき略語：
Button → Btn
Image → Img
※ 一般的でない略語は避ける

バリエーションの命名

基本パターン：
[機能]/[要素]/[特徴]

例：
Nav/Menu/Horizontal
Card/Blog/WithImage
Modal/Alert/Success

3. 使いやすさを考慮した管理方法

適切な命名規則を設定しても、管理方法が整っていなければコンポーネントは使いづらくなってしまいます。このセクションでは、チーム全員が使いやすいコンポーネント管理の方法を解説します。

3-1. フォルダ構造の設計

効率的な管理のための、推奨されるフォルダ構造を見ていきましょう：

🎨 Design System/
├── 00_Guidelines/
│   ├── Colors
│   ├── Typography
│   └── Spacing
├── 01_Components/
│   ├── Base/
│   │   ├── Button
│   │   └── Input
│   ├── Common/
│   │   ├── Card
│   │   └── Modal
│   └── Feature/
│       ├── Dashboard
│       └── Profile
└── 02_Templates/
├── Mobile
└── Desktop

フォルダ命名のポイント

  1. 番号プレフィックスで順序を制御
  2. 明確な階層関係の表現
  3. 関連するコンポーネントのグループ化

3-2. バリアントの整理

バリアントは以下のような構造で管理すると使いやすくなります：

Button/
├── Size/
│   ├── Small
│   ├── Medium
│   └── Large
├── Style/
│   ├── Primary
│   ├── Secondary
│   └── Ghost
└── State/
├── Default
├── Hover
└── Disabled

バリアント管理のコツ

  1. 主要な変数ごとにグループ化
  2. 命名の一貫性を保持
  3. デフォルト値の明示

3-3. プロパティの命名

プロパティは以下のようなルールで命名すると管理しやすくなります：

テキストプロパティ
├── label: メインラベル
├── subtext: サブテキスト
└── placeholder: プレースホルダー

ブールプロパティ
├── hasIcon: アイコンの表示/非表示
├── isDisabled: 無効状態
└── showBadge: バッジの表示/非表示

選択プロパティ
├── size: サイズ変数
├── variant: スタイルバリエーション
└── alignment: 配置オプション

3-4. 効果的なドキュメント作成

各コンポーネントには以下の情報を含めることをお勧めします：

基本情報

  • コンポーネントの目的
  • 主な使用シーン
  • 制約事項

プロパティ情報

  • プロパティ名
  • デフォルト値
  • 設定可能な値
  • 使用上の注意

使用例

  • 基本的な使用方法
  • よくある使用パターン
  • 非推奨の使用例

まとめ：明日から実践できる命名規則のポイント

ここまで、Figmaにおけるコンポーネントの命名規則と管理方法について詳しく見てきました。
最後に、実践的なポイントをチェックリスト形式でまとめます。

命名規則の基本チェックリスト

名前の構造

  • [カテゴリ]/[要素名]/[バリエーション]の構造を使用
  • 一貫性のある命名パターンを採用
  • チーム内で使用する用語を統一

探しやすさの工夫

  • 適切なプレフィックスを活用
  • フォルダ構造と命名を連動
  • 検索しやすいキーワードを使用

管理のポイント

  • 論理的なフォルダ構造を作成
  • バリアントを整理
  • わかりやすいプロパティ名を設定

明日からできること

小さなところから始めましょう：

  1. 既存のコンポーネントの棚卸し
  2. 基本的な命名ルールの設定
  3. フォルダ構造の整理

完璧な命名規則を最初から作ることは難しいですが、この記事で紹介した考え方をベースに、プロジェクトの状況に応じて柔軟にカスタマイズしていくことをお勧めします。

大切なのは、「チームで統一されたルール」を作り、それを継続的に改善していくことです。

まずは今あるコンポーネントから、少しずつ整理を始めてみましょう。

前の記事

Figmaコンポーネントの階層構造、プロの現場で使える設計テク…