figma-implement-designlisted

# Figma Implement Design Skill ## Purpose Turn a Figma node into working code in a real codebase — the read-from-Figma direction. ## When to use Use this skill whenever a Figma design is to be implemented, ported, or built as code. Do not use it to write back into Figma. Use `frontend-design.md` when there is no design file and direction must be invented. ## Inputs - a Figma URL containing a `node-id` (a file-only URL is not enough) - the target project's framework, component library, and styling system - existing design tokens and components to map onto - which breakpoints the design covers ## Output Return: - the implementation in the project's real stack - a mapping of Figma tokens and components to existing project equivalents, with gaps flagged - an asset list for anything that must be downloaded and committed - a discrepancy list: anything that cannot be built as drawn, with the proposed resolution ## Constraints - pull design context on the target node before writing any code; a screenshot alone is not a substitute - treat returned code as a **reference, not final code** — it arrives as React plus Tailwind and must be adapted to the project's language, framework, and conventions - check the project for existing components, layout patterns, and tokens before generating new equivalents - honour hints in priority order: Code Connect snippets → component documentation links → design annotations → design tokens → raw hex and absolute positioning - absolute