Table of contents
Open Table of contents
Goal
Convert Figma designs to production code as fast as possible without sacrificing quality.
Principles
- Keep the code readable, clear, and DRY to support long-term maintenance.
- Match the design 1:1. Avoid introducing extra logic or unrelated changes.
- Conform to the current project structure and conventions.
Workflow
Create component code from Figma
- Use Figma Make to generate initial code and assets.
Keep the code readable, clear, and DRY to support long-term maintenance.
- Verify component boundaries, naming, and export settings in Figma before generation.
Bring assets into the codebase
- Place the generated folder into the repository in the appropriate module or feature directory.
- Remove any temporary or demo files that are not needed.
Import with the agent
- Ask the agent to integrate the Figma-generated code into the codebase.
- Requirements:
- 1:1 visual clone of the Figma design
- No extra logic beyond what the design requires
- Follow the existing project structure, lint rules, and conventions
Refactor and polish
- Unify naming, props, and folder structure
- Extract shared variables, tokens, and mixins
- Deduplicate assets and remove dead code