# Kk0ga Employee Time Attendance Figma Implement Design

> Figma Implement Design Skill

- Skill: `tomevault-io/kk0ga-employee-time-attendance-figma-implement-design` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/kk0ga-employee-time-attendance-figma-implement-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/kk0ga-employee-time-attendance-figma-implement-design/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/kk0ga-employee-time-attendance-figma-implement-design

---


# Figma Implement Design Skill

## 目的
Figmaのデザインを、勤怠アプリのUIとして正確かつ保守しやすい形に落とす。

## When to Use
- 新規画面のUIをFigmaから実装する
- 既存画面をデザイン差分に合わせて更新する
- コンポーネント分割やスタイルの見直しが必要

## 進め方
1. **画面の責務を整理**
   - 画面単位の目的、主要操作、状態（読み込み/空/エラー）を明確化
2. **コンポーネント分割**
   - 共通UIと画面固有UIを分ける
   - 表示のバリエーション（サイズ/状態）を最小で表現
3. **スタイル方針**
   - 余白/タイポグラフィ/カラーのルールを固定
   - 既存のUIコンポーネントを優先利用
4. **アクセシビリティ**
   - ラベル、フォーカス、コントラスト、キーボード操作を確認
5. **差分チェック**
   - 見た目、挙動、レスポンシブの差分を確認

## 成果物
- UIコンポーネント一覧
- レイアウト/余白/文字サイズのルール
- 実装後の差分チェック項目

## 依頼例
- 「Figmaのログイン画面を実装して、主要状態（初期/エラー/ローディング）を揃えて」
- 「ダッシュボードのカードUIをコンポーネント化して」

## References
- [docs/README.md](../../../docs/README.md)
- [web-design-reviewer](../web-design-reviewer/SKILL.md)

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/kk0ga) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-14 -->