How to Turn Figma Designs into Production-Ready Code with Cursor AI

Preparation

Figma (App version)

Cursor >= 0.47.9

macOS / Windows / Linux

Generate Figma API Key

In the Figma web or app, click the user avatar → Settings → Security → Personal access tokens, then create a new token and copy it.

Configure Figma MCP in Cursor

Create a file .cursor/mcp.json with the following content, replacing YOUR_FIGMA_API_KEY_HERE with the token you just copied.

{
  "mcpServers": {
    "figma-developer-mcp": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR_FIGMA_API_KEY_HERE", "--stdio"]
    }
  }
}

Practical Steps

01 Get the Figma design file link

Example community‑shared Pilates app design: https://www.figma.com/community/file/1485225685820771951

02 Generate code with Cursor

Example prompt:

使用 HTML5 + Tailwind CSS实现 figma UI 设计稿：https://www.figma.com/design/OlXlQokYwC0mCPO2WHxWB4/Pilates-App-Design-(Community)?node-id=1-19&t=PeTjezcU2efZUW4G-4，将生成的全部页面都放到一个 html 中展示。

03 Custom prompt templates

Scenario 1 – Generate a React component

基于Figma设计稿：[Figma链接]，使用React和Tailwind CSS实现一个响应式的导航栏组件。请确保实现悬停效果和移动端适配。

Scenario 2 – Build a specific feature page

参考Figma设计稿：[Figma链接]，使用Vue.js实现用户个人资料页面，包含头像上传、信息编辑和保存功能。请考虑表单验证和提交状态处理。

Scenario 3 – Multi‑page application

根据Figma设计稿：[Figma链接]，使用Next.js和styled-components构建一个包含登录、注册、首页和详情页的电商应用原型。

Advanced Techniques

Optimizing code‑quality prompts

Specify the tech stack : include exact framework versions and preferred libraries.

Decompose complex pages : first ask for a skeleton, then iteratively flesh out components.

Provide extra context : brand style guide, interaction logic, or API specifications.

Define coding conventions : request a particular code style, naming scheme, or project structure.

Integrating into an existing workflow

Component‑library mapping : tell the AI to map Figma components to the ones already in your library.

Incremental development : convert one screen or component at a time and merge gradually.

Code‑style matching : ask the AI to analyse your current codebase and keep the same style.

Version‑control integration : create a separate branch for each Figma‑to‑code conversion to simplify review.

Common Issues and Solutions

1. Generated code does not match the design

Possible cause: overly complex node hierarchy or deep nesting in the Figma file.

Solution: reference specific node IDs or component names in the prompt.

2. Missing or incorrect resources

Possible cause: images or icons were not exported correctly.

Solution: let the Cursor Figma MCP plugin download the required assets automatically, or ask the AI to generate placeholder assets.

3. Incomplete responsive design

Possible cause: the Figma file only provides a single‑resolution view.

Solution: explicitly request responsive breakpoints in the prompt or supply design links for multiple screen sizes.

Reference implementation of the MCP tool: https://github.com/GLips/Figma-Context-MCP