Guide: Figma to code with AI and MCP

From Figma to Code: A Step-by-Step Guide with AI

To automate the transition from Figma design to code, use Dev Mode with MCP. Requirements: access to Figma Dev Mode, an AI assistant like Cursor based on GPT-4o or a similar model, understanding of basic layout principles, and skills in crafting precise prompts. The process relies on a systematic frame structure for repeatability.

Frame naming structure:

%pageName %type [%widthScreen · %theme]

Example: Home default [1920 · Light]. Breakpoints: 1920px, 1280px, 768px, 375px. Themes: light/dark.

Preparing Your Layout

Follow five key rules to minimize AI errors.

Rule 1: Content and Styles. Insert final texts and graphics into containers of actual size. Create styles: Light/Primary, Dark/Primary.

Rule 2: Block Structure. Use separate frames for blocks (Hero, Menu, Footer), not just full pages. This allows for localized edits.

Rule 3: Resize Logic. Create a layout frame with visual indicators: arrows for stretching, fixed sizes, min/max-width, wraps.

Rule 4: UI States. Separate frames for hover, active, disabled. Show the full context, e.g., Menu Hover [1920 · Light].

Rule 5: Themes. Duplicate frames for light/dark with colors from styles.

Enable MCP: Dev Mode → Inspect → MCP (Server status: Enabled, Image source: Download). Expect low-quality SVG/raster—replace manually or via prompts.

Steps to Transfer to Code

Work step-by-step, avoiding global requests. AI should analyze Figma MCP layers, not screenshots.

Step 1: Project Foundation

Craft an initial prompt:

We're building a website about [description]. Figma MCP: [link]. Breakpoints in frame names: [list]. Resources from Figma. Steps: clarify questions.

AI will analyze and break it into steps. Add navigation.

Step 2: Agent with Rules

Generate AGENTS_BASE.md to lock in style:

• Reuse components.
• Responsive design by breakpoints.
• Retina support (@2x).
• No code overwriting without confirmation.

Write in Russian or English—quality doesn't change.

Step 3: Iterative Assembly

Refine blocks by frames:

In Feature [768 · Light] gallery with horizontal scroll: [link]. +20px padding-bottom for scrollbar.

Move to the next block after fixing.

Step 4: Asset Replacement

• Manual: rename files.
• Via AI:

> In Hero, replace [id] with [email protected].

> In Feature List: ic_unlimList_BENEFIT_24 (32x32px) instead of placeholders.

Step 5: Functionality

Add in isolation:

Localization: dropdown RU/EN via button [name]. Clarify questions.

Support: responsive, retina, themes, animations.

Key Takeaways

• Systematic frame naming ensures repeatability.
• Visual layout instructions compensate for AI weaknesses in auto layout.
• A step-by-step approach with an agent minimizes code regressions.
• Manual asset replacement is essential for quality.
• Focus on details: don't take on all roles at once to avoid burnout.

— Editorial Team