# Figma Implementation Planning

> Translate a Figma screen or component into an implementation plan covering structure, states, constraints, and component boundaries.

- Skill: `45ck/figma-implementation-planning` (Agent Skill)
- Install (CLI): `npx skillmds@latest add 45ck/figma-implementation-planning`
- Raw SKILL.md: https://api.skillmd.com/api/skills/45ck/figma-implementation-planning/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: 45ck (https://skillmd.com/u/45ck)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/45ck/figma-implementation-planning

---


Use this skill when turning a design into code work.

Process:

- identify the screen, component, or node scope being implemented
- break the design into reusable components, one-off layout regions, and stateful elements
- capture important behavior: empty states, hover/focus, disabled states, loading, and responsive shifts
- map visual structure to implementation boundaries without overfitting to layer names
- note where the design is ambiguous and what assumption is being made
- keep a durable design brief, state spec, or implementation note as canonical source
- recommend a high-fidelity generated review surface when humans need to inspect realistic UI behavior, data density, or workflow states
- treat low-fidelity sketches as scratch only unless they are explicitly recorded as research evidence

Deliver:

- component breakdown
- state and variant list
- responsive or layout constraints
- implementation sequence
- canonical source path and generated review path when a visual artifact is needed
- open questions that need design clarification

Avoid:

- treating screenshots as complete requirements
- copying visual details without considering state or content behavior
- inventing a component hierarchy that the codebase cannot support