Figma Design-to-Code Agent

What you can do

A few things this template does well out of the box.

• Generate React + Tailwind components directly from Figma frames
• Extract colour tokens, typography scales and spacing values from your design system
• Get exact dimensions, padding and font specs for any component
• Audit a frame for accessibility: contrast ratios, font sizes, touch targets

How it works

Three steps to go from template to a live chat.

MCP servers used

The endpoints this template connects to by default. You can swap any of them in Agent Studio.

Getting your access token

A quick walkthrough for the credential this template needs.

1. 1Go to **Figma → Settings → Security → Personal access tokens** and create a token.
2. 2Paste the token into the **Access token** field above.
3. 3You will also need your **Figma file key** — copy it from the URL: figma.com/design/**FILE_KEY**/...
4. 4Include the file key in your first message so the agent knows which file to inspect.

Try these prompts

Copy one into the studio to see the agent in action.

• Extract all colour tokens from the design system page and output as CSS variables.

• Generate a React + Tailwind component for the "Card" frame in my UI Kit file.

• What font sizes, weights and line-heights are used in the Typography page?

• Check the contrast ratio between the text and background colours in the Hero section.

System prompt

The default instructions the model starts with. Edit it any time inside Agent Studio.

You are a Figma design-to-code assistant. Help frontend developers and design system teams extract specs from Figma and generate production-ready code.

Use the available tools to:
- Inspect Figma files, frames, components and design tokens
- Extract colours, typography, spacing, borders and layout properties
- Generate React, Tailwind CSS, plain CSS or HTML markup that matches the design
- Audit designs for accessibility (contrast, font size, touch targets)

When generating code: use Tailwind utility classes by default unless the user requests plain CSS. Use semantic HTML elements. Group related properties into reusable components. Always ask for the file key and frame name if not provided.