Figma Implement Design Skill: Frames to Code

How does figma-implement-design work?

The skill is a seven step workflow that begins by parsing a Figma URL into a file key and a node ID, such as 1-2 from the node-id parameter, and ends with a validation checklist against a screenshot.

It depends on a connected Figma MCP server. The agent calls get_design_context for layout, type, colors and variants, get_screenshot for the visual reference and get_metadata when a response is too large or truncated.

The seven steps

1. Get the node ID from the URL, or from the current selection in the Figma desktop app.
2. Fetch design context for the node.
3. Capture a screenshot as the visual source of truth.
4. Download the assets the Figma server returns.
5. Translate the output into your project's framework, styles and conventions.
6. Aim for 1:1 visual parity, preferring design system tokens where they conflict.
7. Validate layout, type, colors, states, responsive behavior, assets and accessibility.

Scope and handoffs

Use it when

• The deliverable is code in your own repository.
• You have a Figma URL with a node ID, or a desktop selection.
• Your project has a component library the agent should reuse, as the skill prefers one.

Use something else when

• You want to create or edit nodes inside Figma. The skill points to its figma-use sibling.
• You want a full page built in Figma from code, which another skill in the same catalog covers.
• You have only a screenshot and no Figma file, Related: image to code and extract design system.

Use it with UiChemy

This skill turns Figma frames into code in your repository, with the project's own components and tokens. UiChemy Figma to WordPress takes a different route, converting a design into an editable WordPress page. Click Get Started on uichemy.com.

For the Figma server underneath, compare the Figma MCP server and Framelink Figma MCP.

How to install Figma Implement Design Skill: Frames to Code

$skill-installer figma-implement-design

1. Open Codex

   The repository README documents $skill-installer as the way to install curated skills inside Codex.

2. Install by name

   Run $skill-installer figma-implement-design. Curated skills install by name and default to the skills/.curated folder.

3. Or use the directory URL

   Run $skill-installer install https://github.com/openai/skills/tree/main/skills/.curated/figma-implement-design to install from the GitHub folder.

4. Restart and connect Figma

   Restart Codex so it picks up the skill, then connect a Figma MCP server, since the prerequisites list one.

Check that it loaded

Share a Figma frame URL and ask for it as a component. The agent should call get_design_context and get_screenshot first, then check your existing components before writing new code.

Read the official instructions on GitHub

Key features

• Node ID parsingExtracts the file key and node ID from a Figma design URL, and with the desktop MCP it can use the node you have selected instead.
• Design context fetchCalls get_design_context for layout, typography, colors and tokens, component structure and variants, and spacing.
• Large design handlingWhen a response is truncated it uses get_metadata for a node map, then fetches child nodes one at a time.
• Screenshot as referenceCaptures a screenshot with get_screenshot and keeps it as the source of truth for visual checks.
• Asset rulesUses localhost image and SVG sources from the Figma server directly, adds no new icon packages and creates no placeholders.
• Project convention mappingTreats the typical React and Tailwind output as a description of the design, then swaps in your utilities, tokens and existing components.
• Design system firstExtends a matching component instead of creating a new one, and prefers project tokens when they differ from Figma values.
• Validation checklistChecks layout, typography, colors, hover and disabled states, responsive behavior, assets and accessibility before calling the work complete.
• Deviation notesAsks for a code comment whenever the implementation departs from the design, for example for accessibility.
• Code quality rulesAsks for TypeScript props, JSDoc on exported components and constants or tokens instead of hardcoded values.

Frequently asked questions