The deliverable of figma-implement-design is application code in your repository. Give it a specific frame or component link. It reads context and screenshots, finds existing components and design tokens, then compares the implementation in a browser. An entire file without a target node usually creates unnecessary ambiguity and retrieval work.
Install and prepare
This guide covers the standalone Skill retained in openai/skills. That repository is deprecated and current examples have moved to openai/plugins; the instructions here describe the linked standalone version, not the latest plugin.
Enter this line in the Codex conversation, not a terminal. If the installed Skill does not appear, restart Codex.
$skill-installer figma-implement-design
- A runnable target frontend project
- An authorized and available Figma MCP connection
- Access to a specific frame or component, preferably a URL containing node-id
Current Figma documentation provides a Codex plugin path and manual terminal setup with codex mcp add figma --url https://mcp.figma.com/mcp, followed by authorization. That plugin and this standalone Skill are different distributions. Reuse a working connection rather than adding it twice. [4]
Try a first task
Copy the target frame URL, then ask within the project:
$figma-implement-design
Implement this Figma frame as the project’s settings page: [paste URL with node-id]. Read design context and a screenshot first, then inspect existing buttons, forms and color tokens and reuse them. Target route: /settings, including mobile layout and focus states. Run the page and compare it with the design; explain any necessary deviations.
Work through the task
-
Choose an explicit node. Use the file and node-id from the URL. Current selection is available only through desktop MCP; a remote connection needs a link.
-
Read the design and map it to the project. Retrieve context and a screenshot, split complex designs into sections and identify assets and fonts. Use the repository’s components and styling conventions.
-
Compare incrementally. Check spacing, type, colors, states and small-screen behavior. Explain conflicts with project tokens and validate the actual browser output.
Turn a design link into a scoped task
Pick one Frame rather than an entire file. Remote Figma MCP needs a design URL with node-id; only desktop MCP can use the current selection directly. Include the target route, existing component library, interactions to preserve, and viewport widths to compare. A useful second request is: “Implement this settings-panel node using our existing form controls. Limit edits to app/settings, check desktop and 390px layouts, and list remaining visual differences.”
Design context provides the hierarchy, measurements, colors and assets; a screenshot exposes the overall visual relationship. For a large Frame, inspect the header, content, form and footer separately. Confirm whether the project already has the specified icons, typefaces and imagery. Missing assets should be called out instead of silently replaced by lookalikes.
Check that the code matches the intended node
Run the project and open the target route at the same viewport width as the design. Compare structure, spacing, typography, colors, borders, interaction states and narrow-screen wrapping in that order. A useful difference report points to the relevant node or style decision. Also test keyboard focus, validation and empty states, since a static design usually does not cover them. If the design conflicts with the project’s component conventions, explain the trade-off before extending or bypassing those components; visual resemblance alone is not a complete acceptance test.
Check the result
Expect code changes, a viewable page, validation results and stated deviations. Check layout and assets first, then keyboard focus, error states and narrow-screen content. Matching a static screenshot does not establish that form behavior and accessibility are complete.
Common blockers
Design context is truncated. Inspect node metadata and fetch smaller sections instead of inventing the missing layout.
Assets fail to load. Check the returned resource location and whether the current environment can access it. Do not silently substitute unrelated placeholders.
You want to edit the Figma canvas. This Skill implements code; canvas editing belongs to a different workflow and should be requested explicitly.
Compare each section with the design
A sales-site build illustrates why the scope should stay small. Implement one section, capture the rendered result at the same width as its Figma frame, and feed the concrete differences into the next iteration. This makes spacing, hierarchy, and missing assets easier to spot before moving to the next section.