Figma Remote MCP: Create a Website from a Figma File from Scratch

Learn how to connect Warp to Figma’s remote MCP server to generate code directly from your design files — complete with screenshots, metadata, and design system context.

---

Overview

This guide covers how to:

• Connect Warp to the remote Figma MCP server

• Log in securely using OAuth

• Use the server to pull live context (components, variables, and assets) from your Figma designs

• Generate front-end code based on your UI files

• Iterate and refine output directly in Warp

---

1

What Is a Remote MCP Server?

A remote MCP server runs outside your local machine — Warp connects to it through a secure network call. This means you don’t have to manage processes, ports, or tokens manually. Warp handles setup, authentication, and communication for you.

2

Connect Figma MCP to Warp

• Copy the Figma MCP configuration JSON

{
  "Figma": {
    "url": "https://mcp.figma.com/mcp"
  }
}

• In Warp, paste the JSON — Warp will automatically open an OAuth login window.

• Log in once with your Figma account credentials.

You will need a Figma Dev account for this to work.

3

What the Figma MCP Server Provides

Once connected, the server enables Warp’s AI to understand your design context by fetching:

Type	Description
get_screenshot	Helps the AI visualize layout and relationships between elements.
create_design_system_rules	Components, variables, and styles for consistent, reusable code.
get_code	Extracts code from your Figma design for direct use in projects.
get_metadata	Includes text, images, and layer names for more realistic mock data.

4

Generate a Website from a Figma File

Basic flow:

• Copy your Figma file link:

  • Right-click → Copy / Paste As → Copy Link to Selection

• In Warp, paste a prompt to create a website based on that design.

Prompt:

Prompt

Create a website from this Figma file: <LINK HERE>
Follow the design layout and use these guidelines:
- Match spacing and typography from the design
- Use Tailwind CSS and TypeScript
- Make components reusable

Warp uses the Figma MCP server to pull all necessary context and begin generating code diffs.

5

Iterating on Output

• In under five minutes, Warp generates a working site structure based on the Figma layout.

• Missing assets (e.g., logos or images) are automatically referenced in an assets/ folder.

• Warp prompts you to add any missing files before continuing.

6

Persistent Input Feature

Warp’s persistent input allows mid-process updates. If you forget an image (e.g., the Misho logo), simply upload it and notify Warp:

I’ve uploaded the Misho logo to the assets folder.

Warp will automatically detect and use it during the same generation session.

7

Recap

• Warp now supports remote MCP servers for Figma (and others like GitHub, Sentry, and Linear).

• OAuth login streamlines setup and removes manual token handling.

• The Figma MCP integration enables rapid, context-aware code generation.

• Persistent input and real-time iteration make design-to-code workflows seamless.

In under 20 minutes, you can go from Figma design to a functioning website — all powered by Warp’s AI coding environment.