---
name: "figma-implementation-planning"
description: "Translate a Figma screen or component into an implementation plan covering structure, states, constraints, and component boundaries."
---

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

Deliver:

- component breakdown
- state and variant list
- responsive or layout constraints
- implementation sequence
- 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