Figmaでボタンのステート管理（通常時、ホバー時、プレス時、無効時）をうまく設計できない

UIデザインを始めると必ずと言っていいほど作成するボタンコンポーネント。

シンプルな見た目の裏側には、実は複雑な状態管理が必要とされています。

「hover時の見た目がページごとにバラバラ」「担当者が変わるたびにボタンの作り方が変わってしまう」…。

そんなチーム制作での困りごとを解決する、ベストプラクティスをお伝えします。

Figmaで作る保守性の高いボタンコンポーネント設計について解説するよ！

FigmaでUI作成時に、なぜボタンの設計に時間をかけるべきなのか
非効率な管理方法でよくある3つの失敗例
本記事で解決できること
ボタンコンポーネントの基本設計
実装手順：ステップバイステップガイド
チームでの運用とメンテナンス
- バージョン管理とドキュメント作成
- トラブルシューティング
新規バリエーション追加のガイドライン
まとめ：効率的な運用のためのTips
- 日々の運用で気をつけること
- 今後の展開
最後に：効果的なボタンデザインのために

FigmaでUI作成時に、なぜボタンの設計に時間をかけるべきなのか

「ボタンくらいなら、コピーして状態を複製すればいいじゃない」

そう思っていませんか？

確かに、1〜2ページのデザインならその方法でも問題ありません。しかし、以下のような状況になると、その考えは一転します：

サービスの規模が拡大し、100ページを超えるデザインを管理することに
「やっぱりボタンの青を明るくしたい」というクライアントからの要望
新しいデザイナーがジョインし、ボタンの作り方を説明する必要性
スマートフォン対応のため、タップ領域の考慮が必要に

結果として…

デザインの一貫性が失われる
修正作業に何時間も費やす
チームメンバーとの認識齟齬が発生
アクセシビリティの問題が後から発覚

本記事では、このような問題を解決する保守性の高いボタンコンポーネントの設計手法をご紹介します。

非効率な管理方法でよくある3つの失敗例

コピー&ペーストの罠
ボタンをコピーして状態を作る方法。一見楽に見えますが、デザイン変更時に全ての状態を手作業で修正することになります。
命名規則の不在
button_1、button_final、button_FINAL2… 属人的な命名では、チームメンバーがどのボタンを使えばいいのかわからなくなります。
ステート管理の一貫性欠如
- あるページではhover時に明るく
- 別のページでは暗く
- 特定のページでは影をつけるこのような状態の不一致は、ユーザー体験を損ねる原因となります。

本記事で解決できること

コンポーネントの更新を一括で反映
チーム全員が同じ理解で制作可能
アクセシビリティに配慮した設計
保守性の高いファイル管理

では、具体的な設計手法を見ていきましょう。

ボタンコンポーネントの基本設計

まずは、保守性の高いボタンコンポーネントの土台を作っていきましょう。

Step 1: 基本構造を作る

最初に、最もシンプルな「Primary Button」の標準状態を作ります。

サイズ設定のポイント

最小タップ領域：44×44px（Apple Human Interface Guidelines推奨）
内部パディング：左右16px、上下12px
テキスト：16px/24px（デフォルトサイズの場合）

レイヤー構造の基本

📱 Primary Button [Frame]
├── 🔲 Background [Rectangle]
└── ✍️ Label [Text]

Step 2: Auto-layoutの適切な設定

ボタンの柔軟性と保守性を高めるAuto-layoutの設定値：

Padding: 16px horizontal, 12px vertical
Spacing between items: 8px
Alignment: Center
Text wrap: None
Resizing: Hug contents

💡 重要なポイント： Auto-layoutを使うことで、テキストの長さが変わっても適切なパディングが保たれます。

Step 3: コンポーネント化のプロセス

1. メインコンポーネントの作成

🔵 Primary Button [Component]
├── State=Default
├── State=Hover
├── State=Pressed
└── State=Disabled

2. プロパティの設定

Properties
├── State (Variant)
│   ├── Default
│   ├── Hover
│   ├── Pressed
│   └── Disabled
├── Size (Variant)
│   ├── Small
│   ├── Medium
│   └── Large
├── Icon (Boolean)
└── IconPosition (Instance)
    ├── Left
    └── Right

Step 4: カラーとエフェクトの設定

カラースタイルの定義

🎨 Color Styles
├── Button
│   ├── Primary
│   │   ├── Default: #0066FF
│   │   ├── Hover: #0052CC
│   │   ├── Pressed: #003D99
│   │   └── Disabled: #0066FF (40% opacity)
│   └── Text
│       ├── Default: #FFFFFF
│       └── Disabled: #FFFFFF (40% opacity)

エフェクト設定

Default: なし
Hover: Drop shadow (Y:2px, Blur:4px, Color:rgba(0,0,0,0.1))
Pressed: Inner shadow (Y:1px, Blur:2px, Color:rgba(0,0,0,0.2))
Disabled: なし

Step 5: レスポンシブ対応

小さい画面でも使いやすいボタンにするためのサイズバリエーション：

Small（モバイル向け）
- 高さ: 36px
- パディング: 12px horizontal, 8px vertical
- フォント: 14px/20px
Medium（デフォルト）
- 高さ: 44px
- パディング: 16px horizontal, 12px vertical
- フォント: 16px/24px
Large（CTAなど）
- 高さ: 52px
- パディング: 24px horizontal, 16px vertical
- フォント: 18px/28px

実装手順：ステップバイステップガイド

STEP 1: メインコンポーネントの作成

1-1: ベース状態（Default）の作成

1フレームの作成

⚡️ キーボード操作
[F]キーを押してフレームを作成
サイズ: 幅は可変、高さ44px

2. 基本要素の配置

🎨 設定値
背景: Rectangle（角丸8px）
テキスト: "Button"（SF Pro Text or システムフォント）

3. Auto-layoutの適用

⚡️ キーボード操作
[Shift + A]でAuto-layout化
パディング設定: 16px（左右）, 12px（上下）

1-2: プロパティの設定

💡 よくある失敗ポイント
プロパティを後から追加しようとして、構造を作り直すことに...
最初にプロパティの全体設計を済ませましょう

以下の順序でプロパティを追加：

1.State（Variant）の作成

Properties パネルで [+]
プロパティ名: State
タイプ: Variant
選択肢:
- Default
- Hover
- Pressed
- Disabled

2. Size（Variant）の追加

選択肢:
- Small (36px)
- Medium (44px)
- Large (52px)

3. Icon（Boolean）の設定

プロパティ名: hasIcon
デフォルト: false

4. IconPosition（Instance）の追加

プロパティ名: iconPosition
選択肢: 
- left
- right

STEP 2: カラースタイルの作成

2-1: Local Stylesの設定

Styles パネルで [+]
└── 🎨 Color
    └── Button
        ├── Primary
        │   ├── Default (#0066FF)
        │   ├── Hover (#0052CC)
        │   ├── Pressed (#003D99)
        │   └── Disabled (#0066FF @ 40%)
        └── Secondary
            └── ...（同様の構造）

2-2: ステート別のスタイル適用

💡 ベストプラクティス
カラー値をハードコードせず、必ずスタイルを使用
→ 後からの一括変更が容易に

各ステートでの見た目の違い：

Default:
- 背景: Primary/Default
- テキスト: White

Hover:
- 背景: Primary/Hover
- エフェクト: Drop shadow
- カーソル: Pointer

Pressed:
- 背景: Primary/Pressed
- エフェクト: Inner shadow

Disabled:
- 背景: Primary/Disabled
- テキスト: White @ 40%
- カーソル: Not-allowed

STEP 3: インスタンスの活用

3-1: コンポーネントの複製とバリエーション

📝 命名規則
Button/Primary/[State]/[Size]
例: Button/Primary/Default/Medium

3-2: アイコン付きバリエーションの作成

1. アイコンの配置

⚡️ 手順
1. アイコンコンポーネントを作成（24×24px）
2. Button内に配置
3. Auto-layoutで間隔調整（8px）

2. インスタンスプロパティの設定

アイコンの切り替え:
1. アイコンをコンポーネント化
2. Instance Swapでバリエーション切り替え可能に

STEP 4: ドキュメンテーション

4-1: コンポーネントの説明

📝 Documentation
Description:
Primary Button Component
用途: メインアクション、重要な操作の実行
サイズ: Medium（デフォルト）
制約事項:
- テキストは1行まで
- アイコンサイズは24px固定

4-2: プロパティの説明

Properties:
State:
- Default: 通常時の表示
- Hover: マウスオーバー時
- Pressed: クリック時
- Disabled: 無効状態

Size:
- Small: モバイル優先時
- Medium: 標準サイズ
- Large: CTAなど重要なアクション

hasIcon: アイコンの有無
iconPosition: アイコンの位置（left/right）

チームでの運用とメンテナンス

バージョン管理とドキュメント作成

1. Figma内でのバージョン管理

📂 ファイル構造
Design System
├── 🔵 Components
│   ├── Latest (Production)
│   │   └── Button
│   └── Draft (Development)
│       └── Button_v2

2. 変更履歴の記録

📝 更新ログ例
v1.1.0 (2024-02-15)
- ホバー時のシャドウ効果を追加
- Largeサイズのパディングを調整
- アイコンサイズを24pxに統一

トラブルシューティング

よくある問題と解決方法

1. インスタンスの更新が反映されない

✅ 解決手順
1. メインコンポーネントの確認
2. インスタンスのリセット
3. 親フレームのAuto-layout確認

2. カラースタイルの一括変更方法

✅ ベストプラクティス
1. Stylesパネルでカラーを編集
2. 使用箇所を確認
3. 変更をチームに通知

3. レスポンシブ対応での注意点

✅ チェックポイント
- Constraintsの設定確認
- Auto-layoutの設定確認
- テキストのリサイズ動作確認

新規バリエーション追加のガイドライン

1. 追加検討時のチェックリスト

既存のバリエーションで代用できないか
デザインシステムの一貫性は保たれているか
アクセシビリティは考慮されているか
命名規則は統一されているか

2. 追加手順

1. Draft環境で作成
2. チームレビュー実施
3. ドキュメント作成
4. Production環境へ反映

チーム共有のベストプラクティス

1. コンポーネントライブラリの共有設定

Settings ➝ Team library
└── Button Components
    ├── Published: ✅
    ├── Auto-update: ✅
    └── Edit access: 管理者のみ

2. デザイナー向けガイドライン

使用時の注意点：
1. インスタンスの直接編集は禁止
2. カラースタイルの遵守
3. パディングの維持
4. アイコンサイズの統一

3. 開発者向けドキュメント

実装時の注意点：
1. ホバー時のアニメーション
   - transition: all 0.2s ease
2. Disabled状態の制御
   - pointer-events: none
3. アクセシビリティ
   - role="button"
   - aria-disabled="true"（無効時）