Figma デザイン設計 依頼文
コンポーネントベース設計（Next.js / React 対応）
| 項目 | 内容 |
|---|---|
| 件名 | Figma デザイン設計（コンポーネントベース） |
| 対象フレームワーク | Next.js（React）[設定する] |
| スタイリング | プレーン CSS / Tailwind CSS |
| 想定担当者 | UI デザイナー / デザインシステム担当者 |
1. 依頼背景と目的
本案件では、フロントエンドフレームワークとして Next.js（React）を採用しています。実装工程を円滑に進めるため、デザイン段階からコンポーネントベースの思想を取り入れた Figma 設計をお願いしたく、本依頼書をお送りします。
デザインデータがコードへスムーズに変換できるよう、以下に記載するルールおよびガイドラインに沿った設計をお願いいたします。
2. Figma 設計の基本方針
2-1. コンポーネントベースの粒度設計
コンポーネントベースで設計し、粒度を意識して整理してください。
Step 1 — Styles の定義
コンポーネントを作成する前に、Figma の Styles または Variables として以下を定義してください。
- Color Style: Primary / Secondary / Semantic / Neutral 等のカラー
- Text Style: Font Family・Size・Weight・Line Height の組み合わせ
- Effect Style: Shadow（elevation レベルに対応）
Step 2 — Components の構成
Styles を参照する形でコンポーネントを作成し、以下の分類で整理してください（分類名はチームの共通言語として機能することを優先します）。
- Primitives（最小部品）: アイコン、バッジ、ラベルなど、それ以上分割できない最小コンポーネント
- Components（部品）: ボタン、入力フィールド、カード、モーダルなど、見た目と振る舞いが固定された再利用部品
- Patterns（構造）: ヘッダー、フォームレイアウト、一覧ページなど、Components を組み合わせた柔軟なレイアウトガイドライン
※ コンポーネント名は英語で命名し、React コンポーネント名（PascalCase）に対応する名称を付けてください（例:
PrimaryButton、CardItem）。分類名はチームの共通言語として機能することを優先し、厳格な階層ルールへの縛りより「見ればわかる命名」を重視してください。
2-2. Auto Layout の徹底
実装時のレスポンシブ対応を見据え、すべてのコンポーネントは Auto Layout を使用して設計してください。
- 横方向・縦方向どちらの伸縮が想定されるかを明示してください
- Padding・Gap・Min/Max Width の値は CSS 実装で使用できるよう
px単位で統一してください - コンテンツが増減する場合を考慮した伸縮設定（Fill / Hug / Fixed）を適切に使い分けてください
- 各要素の制約（Constraints）を適切に設定してください（親フレームのリサイズ時の振る舞いに対応）
2-3. Variants の設定
状態変化や種別のあるコンポーネントは、Variants を使って一元管理してください。
Variants のプロパティ名は camelCase で、内容が一目でわかる適切な名称を設定してください（例: state、size、variant など）。
- ボタン:
state=default/state=hover/state=disabled/state=loading - フォーム入力:
state=default/state=focus/state=error/state=disabled - サイズバリエーション:
size=small/size=medium/size=largeなど
※ Variants の名称は、CSS の data 属性（
data-state="hover"等）や aria 属性に対応できる命名にしてください。プロパティ名・値ともに camelCase で統一してください（例:state=default、size=medium）。
2-4. コンポーネントプロパティの設定
Variants 以外のコンポーネントプロパティも積極的に活用してください。
- Boolean プロパティ: パーツの表示・非表示を制御するフラグ（例:
showIcon、hasLabel） - Text プロパティ: ラベルや説明文など、差し替え可能なテキストを定義（例:
label、placeholder） - Instance swap プロパティ: アイコンや内部コンポーネントを差し替え可能にする（例:
icon、leadingElement） - Slot プロパティ: 子コンテンツを差し込める領域を定義する（例:
prefix、suffix、children）
※ プロパティ名は camelCase で命名し、React の Props 名と対応させてください。
2-5. レイヤー命名規則
Figma の自動命名（Frame 42、Group 7 等）は使用しないでください。レイヤー名はコードのコンポーネント名・変数名と対応できるよう、以下の規則で命名してください。
- コンポーネント名は PascalCase（例:
PrimaryButton、CardItem） - プロパティ名は camelCase（例:
variant、isDisabled、showIcon） - レイアウト用フレームは役割がわかる名称（例:
layout/container、section/hero） - アイコンは
icon/プレフィックス ＋ PascalCase で統一（例:icon/ArrowRight、icon/CheckCircle）
※ AI ツールやコード生成ツールはレイヤー名を識別の基準とするため、意味のある命名はコード品質に直結します。
2-6. 仕様注釈
デザインだけでは伝わりにくい仕様・挙動・意図は、該当フレームやコンポーネントの近くにテキストで注釈を記載してください。実装者が見ればすぐわかる位置に置いてください。
※ Figma のコメント機能は一時的なメモや確認・フィードバックのやりとりにのみ使用してください。仕様の説明にはコメントではなく、キャンバス上のテキストで記載してください。コメントは対応完了後に解決済みとしてください。
3. デザイントークンの定義
CSS カスタムプロパティ（CSS Variables）への変換を前提に、以下のデザイントークンを Figma の Styles または Variables として定義してください。
3-1. カラートークン
- Primary / Secondary / Accent カラーとそれぞれの段階値（100〜900）
- Semantic カラー:
success/warning/error/info - Neutral / Gray スケール
- 背景色・テキスト色・ボーダー色
3-2. タイポグラフィトークン
- Font Family（Web フォント名を明示）
- Font Size
- Font Weight
- Line Height / Letter Spacing
3-3. スペーシングトークン
スペーシングスケールを定義する場合は、4px または 8px ベースを推奨します（例: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64px）。
3-4. その他のトークン
- Border Radius（
sm/md/lg/full） - Shadow（elevation レベルに対応）
- Z-index スケール（必要に応じて）
3-5. トークンの命名規則とエクスポート形式
CSS Variables や実装ツールへの変換精度を高めるため、以下の規則に沿って命名・エクスポートしてください。
命名規則: / 区切りで {category}/{group}/{name} の形式を基本とします。Figma の Style パネルでも / がグループ区切りとして機能するため、Style 名とトークン名を統一してください。
color/primary/default
color/primary/hover
color/semantic/error
typography/body/md
spacing/md
radius/lg
shadow/elevation/1
エクスポート形式: Tokens Studio 等のプラグインを使用し、JSON 形式でエクスポートできる状態にしてください。Style Dictionary や CSS Variables への変換を前提とした構造で定義をお願いします。
4. 状態の設計
実装では data 属性または aria 属性を用いて状態管理を行います。デザイン上の状態変化は以下の方針で Figma に反映してください。
- インタラクティブな UI は必ず全状態のデザインを提供してください
- 例: ボタン →
state=default/state=hover/state=active/state=disabled/state=loading - 例: アコーディオン →
state=closed/state=open - 例: モーダル →
state=hidden/state=visible
- 例: ボタン →
- アニメーションやトランジションが想定される箇所には、遷移前後のフレームを両方用意し、備考にトランジション秒数・イージングを記載してください
- エラー状態・空状態（データなし）・ローディング状態のデザインも必ず含めてください
5. レイアウトとレスポンシブ設計
5-1. ブレークポイント
以下のブレークポイントに対応するデザインを納品してください（変更がある場合は事前にご相談ください）。
| 名称 | 画面幅 | 備考 |
|---|---|---|
| Mobile (sm) | 〜 767px | スマートフォン縦表示 |
| Tablet (md) | 768px 〜 1199px | タブレット / 横表示 |
| Desktop (lg) | 1200px 〜 | PC 標準 |
5-2. グリッドシステム
- 各ブレークポイントで使用するカラム数・ガター幅・マージン幅を Figma の Grid 設定として明示してください
- コンテンツ最大幅（Max Width）を指定してください
6. Figma ファイル構成
Figma ファイルは以下のページ構成で整理してください。
| ページ名 | 内容 |
|---|---|
| Cover | ファイル概要・更新履歴 |
| Design Tokens | Styles / Variables の定義一覧（必要に応じて） |
| Components | 全コンポーネントのライブラリ（Primitives → Components → Patterns の順） |
| Pages | 各ページのデザイン（PC / SP 両対応） |
| Prototypes | 主要なインタラクション・フローのプロトタイプ（必要な場合） |
※ コンポーネントのページでは、各コンポーネントの Description 欄に以下の形式で Props と用途を記載してください。AI ツールやコード生成ツールはこの欄を参照してコードを生成するため、省略しないようにお願いします。
Component: PrimaryButton
用途: 主要アクション用のボタン。フォーム送信・確認操作などに使用。
Props:
- variant: primary | secondary | ghost
- size: sm | md | lg
- disabled: boolean
- loading: boolean
7. 納品・やり取りのルール
7-1. 共有方法
- Figma のファイル共有リンク（編集権限）を弊社担当者へ共有してください
- 共有先アドレスは別途ご連絡します
- コンポーネントのマスターが別ファイルに存在する場合は、そのファイルも弊社担当者が閲覧・アクセスできるよう共有してください
7-2. レビュー・フィードバック
- フィードバックは Figma のコメント機能を使用します
- 修正対応は原則 [設定する] 営業日以内での反映をお願いします
- 大幅な仕様変更が生じる場合は事前に[設定する]にてご相談ください
7-3. エクスポート・アセット
- 画像アセット（アイコン・イラスト等）は SVG または PNG（2x）形式でエクスポート可能な状態にしてください
- フォントは Google Fonts または Web フォントで代替可能なものを使用するか、ライセンスを明示してください
7-4. 禁止事項・注意事項
- コンポーネントのフラット化（Flatten）は避け、レイヤー構造を維持してください
- Third-party プラグイン固有の機能に依存したデザインは、実装への影響がある場合があるため事前確認をお願いします
8. 連絡先・担当者
| 項目 | 内容 |
|---|---|
| 弊社担当者 | （担当者名・部署を記入） |
| 連絡方法 | （メール / Slack / チャットツール等を記入） |
| デザイン確認フロー | Figma コメント → 担当者確認 → 承認 |
| 質問・相談 | 作業開始前に不明点は必ずご確認ください |
以上
サポート
お探しのページは見つかりましたか？解決しない場合は、問い合わせフォームからお問い合わせいただくか、Slackコミュニティにご参加ください。