Figma to code
Turns Figma frames into production code that matches the design closely, using the Figma MCP server for design context, screenshots and assets.
When to use it
- You have a Figma URL or node ID to implement.
- A component must match its Figma spec exactly.
- You want design tokens translated into the project’s own conventions.
A practical example
You ask
“Implement this Figma frame as a React component using our design tokens.”
Your agent does
It reads the frame through the Figma MCP server, maps values to existing tokens and builds the component to match.
What gets installed
The whole folder is copied, so scripts, references and any license notices stay together.
- agents/openai.yaml486 bytes
- assets/figma-small.svg818 bytes
- assets/figma.png1,612 bytes
- assets/icon.svg964 bytes
- LICENSE.txt11,358 bytes
- references/figma-mcp-config.md2,471 bytes
- references/figma-tools-and-prompts.md2,796 bytes
- SKILL.md12,882 bytes
Before you start: Needs a working Figma MCP server connection.
Credit and license
Adapted from Figma’s published skill. It’s shared under the Apache License 2.0, and the license file is installed with it however you choose to install.