Converting a design from Figma into code is an unavoidable stage of development, one that's often tedious and time-consuming. Even when we work with design systems where colors, fonts, and spacing are standardized, and layers and components are neatly named, transferring styles and double-checking every detail still eats up a lot of time and energy.
If you're still stuck in the copy-paste loop and are thoroughly tired of this routine - it's high time to look towards AI and the useful tools it can offer. In this article, I'll show you how to leverage the full power of AI assistants in the design implementation process, using the duo of Cursor IDE and an MCP Server as an example.
MCP (Model Context Protocol) is a tool that burst onto the scene in 2025 and quickly found its place in the AI tool ecosystem. Its emergence was a logical step in the evolution of AI agents, which outgrew the limited context of a single model.
MCP is an open-source standard that describes how AI agents and applications interact with each other and with external systems. Simply put, MCP acts as a language interpreter between products and Large Language Models (LLMs). It receives data in a specific service's "language" and translates it into a format the AI can understand.
In other words, MCP allows AI agents to expand their capabilities by gaining access to a broader context. Through MCP, an AI can safely fetch data via API, search for information, perform analytics based on external services, and complete other tasks beyond the base model's reach.
Companies like Figma can create their own MCP servers for their products by implementing this standard. Such a server knows how to call the product's API, extract the necessary context, and pass it to the agent in a structured way. In Figma's case, an MCP server directly integrates Figma into the workflow, providing AI agents with design information and the context needed to generate code based on Figma design files.
Requirements
Integrating such a tool into your workflow isn't complicated. You'll need: a code editor with MCP support (VS Code, Cursor, Claude Code, Codex, etc.) and access to a Figma project.
Of course, there are nuances, such as design requirements, Figma's pricing plan, and other details. We'll discuss those a bit later.
What the Process Looks Like from a User's Perspective
In broad strokes, the workflow is like this:
- Setting up an MCP server inside your editor.
- Connecting to Figma via automatic browser authorization or manually using an access token (depending on the chosen MCP).
- Prompting the AI agent to implement the layout for the desired component.
- Reviewing the result, making edits, correcting the code.
- Clarifying requirements and expanding the context.
- Getting the result (rapid layout).
I've tried different MCPs in practice; they are all functional options with their own quirks:
MCP Cursor Talk To Figma - a bit more demanding to set up (you need to set up a local server following the instructions and run the "Cursor Talk To Figma" plugin in Figma; works even without Dev Mode access).
Framelink MCP for Figma - convenient to set up, works even without Dev Mode access.
Figma MCP Server - official from Figma (but there's a nuance regarding Dev Mode).
Let's take a closer look at the process using the official Figma MCP Server as an example.
The Process
First, log into Figma and open your design project.
Then, follow the installation instructions for the server in your IDE settings. It's genuinely simple and quick, taking just a couple of minutes. After installation and OAuth authorization, the server will show as 'enabled'.
Now the editor (in my case is Cursor) has access to a ready MCP server.
Select the desired component in the design and copy its link:
Write your prompt. It can be concise:
"Implement the component design from https://www.figma.com/design/"
Or more detailed (this makes the agent's job easier and reduces the number of operations):
"@feature.tsx Implement the component design from https://www.figma.com/design/ according to the @always.md. Use Tailwind for layout, spacing and typography. Do not download images. Use placeholders from @images"
Executing such a prompt is quite fast - from 20 seconds for small components (card, quote, hero block) to a couple of minutes for an entire page.
After that, the foundation is ready:
"- Replace custom Tailwind values with standard utility classes. For example, avoid arbitrary values like p-[40px] or text-[64px]; use default Tailwind spacing and font sizes (p-10, text-4xl, etc.) instead.- Replace custom CSS variable references in class names with design-system aliases. For example, text-[var(--color-text-light-gray)] should be written as text-light-gray."
Depending on the AI model and the complexity of the design and the existing codebase, the AI can produce different results. So, you need to help the agent with context. This is where rules come in - you can create and expand them as you see fit. The documentation offers some tips on this.
The rules I used for a project with a React+Tailwind stack look like this:
# Cursor Project Rules & Guidelines
## Always Rules
## HTML / Accessibility (Component-Level Default)
- Use semantic tags (`section`, `article`, `nav`, `header`, `footer`) where relevant.
- Follow proper heading hierarchy inside components (don’t start with `<h1>` unless it’s a full page).
- Every image must have an `alt` attribute.
- Make interactive elements (buttons, links, menus) keyboard accessible.
## Code Generation & Architecture (JS/TS + React)
- Use **TypeScript** in strict mode; avoid `any`.
- Prefer **type** over `interface` (except for classes).
- Use **named exports only**; avoid default exports.
- Prefer **guard expressions** instead of nested conditions.
- Use **union types** instead of enums; `as const` objects are allowed.
## CSS / Styling (General)
- Use Tailwind for styling.
- Use a **mobile-first** approach.
- Prefer flexible dimensions (`min/max-width`) over fixed ones
## Color & Design System
- Extract exact colors from Figma data; do not approximate.
- If brand colors or repeated colors appear for the first time, create CSS variables in src/index.css.
- Use exact hex or rgba values from Figma; do not approximate with Tailwind.
- Font families and other constants should be defined in src/index.css.
- Use Tailwind responsive breakpoints for layout.
## Images and icons
- Do not attempt to download images, use a placeholder from `src/assets/images/`.
- Always specify `alt`, `width`, and `height` attributes.
- Use descriptive `alt` text based on the component’s purpose or content.
## Development Workflow Optimization
- **Avoid redundant checks** - Don't check linter, existing configurations, or dependencies unless specifically requested
- **Skip obvious validations** - If package.json shows dependencies are installed, don't verify setup
- **Minimal todo lists** - Only create todos for complex multi-step tasks (3+ distinct steps)
- **Focus on core task** - Complete the main objective first, then add refinements if needed
- **Assume working environment** - Don't verify basic project setup unless errors occur
It's convenient to place the rules in a separate directory. For example, create a .cursor folder in the project root and put all rules inside a rules folder within it. Be sure to give the AI agent a link to the rules.
Here's also an example of a detailed set of rules from another project configured with Framelink MCP:
It's important to understand that the agent may selectively ignore formal rules. Sometimes, it makes sense to duplicate important requirements directly in the prompt. It doesn't hurt to add a reminder at the beginning of the dialogue like: "Respect all rules from .cursor/rules".
Another topic is the AI agent's analysis of existing styles and components. Even if the agent correctly navigates the project structure and understands current UI patterns, it doesn't guarantee the generated code will fully meet your requirements and expectations.
Here's a list of what positively affects the quality of the AI agent's output:
- If you're creating a project from scratch - set up the basic CSS settings for html, body, variables, media breakpoints, fonts, mixins, etc., yourself. On this foundation, the AI can help you pull missing colors, fonts, sizes, spacing from Figma into the project, and form styles for basic UI components, placing what you need into variables.
- Reference existing project files as a guide for structure, patterns, and code styles in TS/JS.
- Rules should be concise, clear, and consistent.
The fuller the context available to the AI agent, the more organically the design integration into code will proceed. Context includes not only rules and component examples but also basic project settings, existing files, styles, patterns, and any documentation that helps the agent correctly navigate the structure and development approaches.
You can expand the context not only with rules and component examples. I highly recommend checking out Figma's Code Connect feature. It's only available for Organization and Enterprise plans, but it links real components from your repository with components in Figma - this way, the agent sees not only the design structure but also the actual code, import paths, props, and usage examples. If the Figma project is a true design system, such a tool seems like a must-have for a team planning to use MCP.
I also want to mention the topic of responsive design separately. AI handles generating the necessary layout based on provided responsive designs quite well. Example prompt:
"_@feature.tsx Implement the component design from Figma:
- Mobile: https://www.figma.com/design/
- Desktop: https://www.figma.com/design/ Ensure responsive design: switch to desktop layout at 1024px width._"
Here are a couple of visual examples for a project with only the most minimal basic settings so far, and a UI component base still being formed:
Example of a website card:
And here's an entire page:
As you can see, AI + MCP handle such tasks as well: it took me about a minute to formulate the request and generate the code. We got a result even with a raw, unconfigured project. However, this is more of a theoretical example. In practical development, this approach isn't justified. Converting an entire page at once creates an extra intermediary layer - code that will inevitably need to be redesigned, parsing and rethinking a large volume of already generated markup.
Nuances and Limitations
1. Tokens
You'll notice that executing requests consumes tokens, using up your editor's pricing plan limit. You can't avoid spending tokens altogether. But you can observe the dialogue with the AI to see what extra steps it's taking and then experiment with different models. For example, you can skip linter checks and intermediate code reports in the rules, etc.
Real examples:
Implementing a card component: 161.9k tokens – $0.10
Implementing a home page (6 sections): 433.6k tokens – $0.21
2. Figma API Limits
After a couple of hours of work on a free plan, you'll likely get a "429 – too many requests" system message. This is a Figma API limitation, not MCP. As explained on Figma's site, this happens because applications and integrations are only allowed to send a certain number of requests to the REST API on your behalf. The limit depends on your pricing plan, license, and file location.
In other words, using MCP on Figma's free plan will only work sporadically, a little, in test mode. Full-fledged work requires access to a paid plan.
3. Dev Mode
For the official Figma MCP, you need Dev Mode - a paid feature. Their site says the remote server is available for all seats and plans, and the desktop server is available for Dev or Full seat on all paid plans. In practice, I only managed to connect to the remote MCP after activating Dev Mode access.
4. Design Requirements
With a messy design, you might get nowhere. Or rather, you might get something, but fixing the errors will take longer than if you did everything manually.
The main recommendations for the design are:
- Layers should be grouped logically, their names should correspond to the context, and the correct structure of frames/components must be maintained.
- Layer and variable names should be clear, consistent, and reflect the element's role (e.g., color-primary, font-heading-lg, spacing-md).
- Auto-layout is used.
- Constraints are set for layers.
- Layers don't overlap.
- Alignment and spacing follow consistent rules.
When NOT to Use MCP
I wouldn't use MCP when the design is poor - layers aren't grouped and are chaotic, colors and text styles are scattered and inconsistent, text is split into separate layers. Also, don't waste time converting designs for complex components, components with multi-layered elements and special animations. Or when the volume of work is small and targeted - in this case, it's probably easier to work with components manually.
Conclusion
In this article, we looked at what converting a design into code looks like with AI and MCP. Of course, refining components remains a separate process. The ready code proposed by the AI requires careful review, correction, and in some cases, a complete rewrite. Often, it's easier to just create a component manually from the start than to try to get a result automatically.
And yet, it's impossible to deny that a properly configured MCP and correct interaction with it gives a powerful boost to frontend development. With skillful integration, the effort and time a developer spends on transferring and checking styles can be redirected towards architecture and logic. The main thing is not to rely blindly on the assistant. MCP is just an additional tool that helps speed up work, but the responsibility for code quality remains with the developer.
Author: Liya Vasilkova, frontend developer at ByteMinds
Top comments (3)
The rules section at the end is the real value here. Having project-specific rules that enforce semantic HTML, strict TypeScript, and Tailwind conventions means the Figma MCP output actually matches your codebase instead of generating generic markup you have to rewrite anyway.
Curious how it handles responsive design. Does the MCP pull breakpoint info from Figma, or do you end up writing those Tailwind responsive classes manually after the initial generation?
the naming quality point is what jumped out to me. i've seen people demo Figma-to-code tools and when the designer uses generic layer names like 'Frame 47' the output is rough, but proper component naming seems to close that gap a lot. biggest question i have is about responsive behavior. does it handle breakpoints and fluid sizing or is that still manual work?
Does the MCP approach give you enough control over the generated component structure, or do you end up restructuring things after the initial layout pass?