# Figma Implement Design

> Turn a Figma node into working code in a real codebase — the read-from-Figma direction. Use this skill whenever a Figma design is to be implemented, ported, or built as code.

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

---


# 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 positioning is the weakest signal; reimplement layout with the project's own primitives
- render every icon and image from its exported asset — never hand-write `<svg>`/`<path>`, never leave a placeholder; you do not have the real vector data
- asset URLs expire in about seven days, so for committed code download the exact bytes or wire the image to a real data source
- reuse a project icon component only when the glyph actually matches; a name match is not enough
- size images explicitly — fixed container with both width and height, leaf image filling it, never `auto`
- on error, stop and read the message before retrying; on timeout, retry against a smaller node
- never invent interaction states the design omits — flag hover, focus, disabled, loading, empty, and error gaps
- accessibility stays non-negotiable even where the design ignores it

## Examples
- Implement a marketing hero frame against the existing token set
- Port a Figma component set into typed components with all variants
- Reconcile a redesign against the current design system and report the drift