Guide: integrating Figma into AI workflows
Published on
Purpose
Allow LLMs to:
- Analyze and modify designs in Figma.
- Generate code from them.
Who is it for
UX/UI teams who want to automate accessibility audits, perform synthetic user tests, and iterate on designs based on automated feedback.
Frontend teams who need to speed up the translation of designs into code, especially when working with component systems and modern frameworks.
Backend/DevOps teams developing automated workflows and AI agents that require integrating Figma design analysis and code generation from them.
Multidisciplinary teams looking to reduce friction in the design-to-development handoff, keeping each team in their usual tools.
Tools
| Tool | Functionality | Recommended Use | Target Team | Usage Environment |
|---|---|---|---|---|
| Figma API | Design analysis + code generation | Integration of Figma in AI agent workflows | Backend teams developing AI agent workflows | ADK, Crew AI, LangGraph, etc. |
| Dev Mode MCP Server | Design analysis + code generation | Code generation from Figma designs | Frontend teams | Cursor, VS Code + Github Copilot, Windsurf, Claude Code, etc. |
| Claude Talk to Figma MCP | Design analysis and modification | User tests (synthetic), accessibility and SEO audits, and design modification | UX/UI teams | Claude |
Figma API
Requirements
- Figma account
- Generate an access token or use OAuth 2
Description
It is the simplest way for an LLM to analyze a design.
The Figma API allows building endpoints to request files, images, file versions, users, comments, team projects, and project files. It returns a JSON that we can pass to the LLM for interpretation.
Unlike MCPs, we do not need to have Figma Desktop open for an agent to analyze a design. This makes it the ideal method for integrating Figma into AI agent workflows.
Installation
As it is an API, not an MCP, there is no installation as such. We can see how it works with a simple test with Cursor or VS Code:
- Create a token.
- Tell your agent to analyze a design in Figma by running a curl request to an endpoint.
For example, for the following URL of a design node:
https://www.figma.com/design/XG1EYHLnC7NdwGuYc7LmUf/MVC---WEB?node-id=6037-2235&t=AHpchSRAIyGCdoci-0tell it to use:
curl -H 'X-FIGMA-TOKEN: {your personal access token}'
'https://api.figma.com/v1/files/XG1EYHLnC7NdwGuYc7LmUf/nodes?ids=6037-2235'Upon receiving the prompt, the agent will execute the curl request and get a JSON with the design parameters. Then it will analyze it and generate a text with the content of its analysis.
Dev Mode MCP Server
Requirements
- Dev or Full seat on the Professional, Organization, or Enterprise plans.
- A code editor or application that supports MCP Servers (VS Code, Cursor, Windsurf, Claude Code).
- Figma Desktop App
Description
This is the official Figma MCP server.
It enables several analysis tools (5 at the time of this post's publication) that agents can use to generate code from a design.
The tools that allow "viewing" a design are get_code and get_image. Unlike the Figma API, get_code does not return a JSON with the design data, but a translation of the design to React that Dev Mode generates on the fly.
This makes it easier for the LLM to generate code even if it's not React, as the distance between React and another framework/language is smaller than between the JSON information and our framework/language.
get_image creates a screenshot of the selected design and supports the agent when generating code.
Installation
- Activation in Figma Desktop App
- Installation in our code editor (Cursor, VS Code, Windsurf, Claude Code, Others)
Claude Talk to Figma MCP
Requirements
- Claude Desktop
- Figma Desktop
- Bun installed
Description
Open source MCP server.
It enables a wide set of tools (43 at the time of this post's publication) that allow agents to analyze and also modify designs in Figma.
The tools that allow "viewing" a design return a JSON with its data. This allows LLMs to analyze it through "thinking aloud", critical evaluation, user testing, accessibility audit, SEO audit, etc.
With the modification tools, the LLM can then apply the changes proposed in the analysis.
Installation
Follow the instructions in the official documentation.
Share your experience
If you are already integrating Figma into your AI workflow, either with these or other tools, I would love to hear about your experience:
- How the installation went.
- Experiments and discoveries.
- Real use cases.
- Results obtained.
The AI + design/development ecosystem is constantly evolving and best practices emerge from the collective experience of those who implement them in real projects ✊
If you haven't done it yet, dare to try one of the tools in this post. If you get stuck, you can write to me on my LinkedIn profile 😉