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

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.

{% embed url="<https://youtu.be/PsM_Y8Pt-1Q?si=wYT-lXf-FYUizrEy>" %}

***

## 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

***

{% stepper %}
{% step %}
**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.
{% endstep %}

{% step %}
**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.

{% hint style="info" %}
You will need a Figma Dev account for this to work.
{% endhint %}
{% endstep %}

{% step %}
**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. |
| {% endstep %}                    |                                                                      |

{% step %}
**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:

{% code title="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
```

{% endcode %}

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

{% step %}
**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.
  {% endstep %}

{% step %}
**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.
{% endstep %}

{% step %}
**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.

{% hint style="success" %}
In under 20 minutes, you can go from Figma design to a functioning website — all powered by Warp’s AI coding environment.
{% endhint %}
{% endstep %}
{% endstepper %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.warp.dev/guides/external-tools-and-integrations/figma-remote-mcp-create-a-website-from-a-figma-file-from-scratch.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.