​
Overview

Agent’s Figma integration uses Model Context Protocol (MCP) to interact with your Figma designs directly in chat. Paste Figma links to explore layers, extract design tokens, and request code changes.
Requirements: Figma Dev or Full seat for Agent chat features. The initial import flow at replit.com/import does not require a seat.
Looking to import a Figma design into a new app? See the Import from Figma quickstart.

​
Demo

​
Getting started

  1. Open Agent chat in your workspace.
  2. Paste a valid Figma file or prototype link into the message box.
  3. When a valid link is detected, a Figma design card appears. Click Login with Figma to authorize.
Connect Figma card appears in Agent chat when a valid Figma link is pasted

​
What you can do

Once connected, you can:
  • Generate code from Figma designs: Select any frame in Figma and instantly convert it into production-ready code. Perfect for building new features or iterating on existing ones
  • Extract design metadata: Access variables, components, and layout specifications defined in the Figma file.
  • Capture design screenshots: Generate visual references of your Figma designs.

​
How you can use it

The Figma integration uses link-based workflows:
  1. Copy the link to any frame or layer in your Figma design
  2. Share the URL with Agent in the chat box
Selecting a frame in Figma
Sharing the URL with Agent in the chat box

​
Viewing MCP calls

You can expand chat events to view the underlying MCP calls and responses used to interact with Figma. Click the “Used Figma MCP (Beta)” block in the timeline to see raw request and response payloads.
Expanded chat event showing MCP calls to the Figma integration
MCP access to Figma is read-oriented and respects your Figma permissions. If the file is private or you lack permissions, the integration cannot fetch content.

​
Managing connections

Manage or disconnect the Figma integration at replit.com/integrations.
Integrations pane in the personal workspace showing the Figma integration