How to Bring a Relume Publish Project into Figma

By the end of this doc, you'll be able to:

• Understand how the Relume Publish MCP and the Figma MCP work together
• Connect both to Claude, Codex or Cursor
• Rebuild a Relume Publish page in Figma with your colours and fonts as Figma variables and styles
• Check and refine the result before you rebuild the rest of your site

Overview

You can turn your Relume Publish site into an editable Figma file without rebuilding it by hand. Your AI tool reads your project through the Relume Publish MCP, then builds each page in Figma through the Figma MCP. An MCP (Model Context Protocol) is a connection that lets an AI tool read and change another app on your behalf.

The result is a working design file, not a screenshot. Your colours and fonts become Figma variables and text styles, and each section is built as an auto layout frame you can edit. That makes it a good starting point for client presentations, design reviews or new pages.

Before You Begin

• A paid Relume plan with access to Relume Publish. Free plans and free trials don't include the MCP.
• A Figma Professional, Education, Organization or Enterprise plan, with edit access to the file you'll build in. To build outside your drafts, you need a Full seat.
• Claude (on the web, the desktop app or Claude Code), Codex or Cursor.
• The link to your Relume Publish project.

Note: Building designs in Figma through the Figma MCP is in beta. It's free while the beta runs, and Figma plans to make it a paid, usage-based feature later.

Connect Both MCPs to Your AI Tool

You only do this once. Each MCP asks you to sign in to its own account: Relume for the Relume Publish MCP, and Figma for the Figma MCP.

Claude

Connectors you add here work on claude.ai, in the Claude desktop app and in Claude Code, as long as you're signed in with the same Claude account.

1. Go to Customize, then Connectors.
2. Click Add custom connector.
3. Enter Relume Publish as the name.
4. Paste https://relume-publish-mcp.relume.io/mcp into the URL field.
5. Click Add, then Connect.
6. Sign in to your Relume account in the window that opens.
7. Back in Connectors, click Browse connectors and search for Figma.
8. Click Connect on the Figma connector.
9. Sign in to Figma and click Allow access.

You're done when both connectors show Connected.

Tip: In Claude Code, also install Figma's plugin. It adds Figma's skills, which help Claude build in Figma more reliably. Run claude plugin install figma@claude-plugins-official in your terminal.

Codex

Figma's MCP doesn't connect to ChatGPT chats yet, so use Codex instead. It works with both MCPs.

1. Run codex mcp add relume-publish --url https://relume-publish-mcp.relume.io/mcp in your terminal.
2. Run codex mcp login relume-publish and sign in to your Relume account.
3. Run codex mcp add figma --url https://mcp.figma.com/mcp in your terminal.
4. Run codex mcp login figma and sign in to Figma.

In the Codex app, you can install the Figma plugin instead of steps 3 and 4.

Cursor

1. Open Cursor Settings, then Tools & MCP.
2. Add both servers to your MCP configuration: {"mcpServers":{"relume-publish":{"url":"https://relume-publish-mcp.relume.io/mcp"},"figma":{"url":"https://mcp.figma.com/mcp"}}}
3. Click Connect next to relume-publish and sign in to your Relume account.
4. Click Connect next to figma, sign in to Figma and click Allow access.

Bring Your Project into Figma

Start with one page, check it, then ask for the rest. It's much quicker to correct one page than a whole site.

1. In Figma, create a new design file and copy its link from the address bar.
2. In Relume, open your Publish project and copy its link.
3. Start a new chat in your AI tool.
4. Paste a prompt that includes both links, for example: Read my Relume Publish project [Relume link]. In this Figma file [Figma link], set up its colours as Figma variables and its fonts as text styles. Then rebuild the home page, section by section, as auto layout frames that use those variables and styles.
5. Allow the tool to use Relume Publish and Figma when it asks.
6. Open the Figma file and check the colours, fonts and first sections as they appear.
7. Ask for any fixes, then ask it to rebuild your next page in the same file.

Tip: Ask for a mobile version too, for example: Now build a 390px wide mobile version of the home page next to the desktop one.

Tips & Best Practices

Tip: Make sure your fonts are available in Figma before you start. Google Fonts work straight away. If your site uses a custom font, upload it to your Figma account or team first, otherwise Figma swaps it for a default font.

Tip: The Figma MCP can't place images on its own. Ask your AI tool to upload the images from your Relume project into the Figma file. If an image doesn't come through, it leaves a placeholder you can swap by hand.

Tip: For long pages, ask it to build a few sections at a time. Each Figma action has a size limit, so smaller batches finish more reliably.

Tip: Bringing a page into Figma only reads from your Relume project, so you can try again as often as you like without changing your site.