tomevault-io Figma Implement Design Skill
目的
Figmaのデザインを、勤怠アプリのUIとして正確かつ保守しやすい形に落とす。
When to Use
- 新規画面のUIをFigmaから実装する
- 既存画面をデザイン差分に合わせて更新する
- コンポーネント分割やスタイルの見直しが必要
進め方
- 画面の責務を整理
- 画面単位の目的、主要操作、状態（読み込み/空/エラー）を明確化
- コンポーネント分割
- 共通UIと画面固有UIを分ける
- 表示のバリエーション（サイズ/状態）を最小で表現
- スタイル方針
- 余白/タイポグラフィ/カラーのルールを固定
- 既存のUIコンポーネントを優先利用
- アクセシビリティ
- ラベル、フォーカス、コントラスト、キーボード操作を確認
- 差分チェック
- 見た目、挙動、レスポンシブの差分を確認
成果物
- UIコンポーネント一覧
- レイアウト/余白/文字サイズのルール
- 実装後の差分チェック項目
依頼例
- 「Figmaのログイン画面を実装して、主要状態（初期/エラー/ローディング）を揃えて」
- 「ダッシュボードのカードUIをコンポーネント化して」
References
Converted and distributed by TomeVault — claim your Tome and manage your conversions.