# Figma remote MCP: create a website from a Figma file

> Connect Warp to Figma's remote MCP server via OAuth and generate front-end code directly from your design files.

- 网址：https://funcoding.ai/agents/warp/guides/external-tools/figma-remote-mcp-create-a-website-from-a-figma-file-from-scratch/
- 来源：Warp 官方文档原文（英文），MIT 许可，同步于 2026-10-11
- 官方原文：https://docs.warp.dev/guides/external-tools/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.

<div class="callout callout-note">

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

</div>

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:

   ```
   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.

<div class="callout callout-tip">

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

</div>