figma

Turn exact Figma nodes into production-ready UI.

frontend development

What it does

Translates exact Figma nodes into production code using design context, screenshots, variables, and assets.

When to use it

Use when a task involves Figma links, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.

Give it a project and an exact Figma frame or layer URL; it implements the design using the project's conventions.

What you provide

This skill

Figma

Read

Reads your Figma designs

Codex

Execute

Restarts Codex after setup

~/.codex/config.toml

Write

Updates your Codex configuration

Requires the Figma MCP server over streamable HTTP.

Codex reads the Figma bearer token from the environment.