Skip to main content
Use Agent with Model Context Protocol (MCP) to work with your Figma designs directly in chat. Paste a Figma link to explore layers, extract variables and components, capture screenshots, and generate code from selected frames.
Requirements: A Figma Dev or Full seat is required for Agent chat features. The import flow at replit.com/import does not require a seat.
Want to turn a Figma design into a new app? See the Import from Figma quickstart.

​
Features

  • Generate starter code: Turn selected frames into production-ready code to bootstrap features or iterate faster.
  • Extract design data: Access variables, components, and layout specifications defined in your file.
  • Capture frame screenshots: Create visual references from any frame to guide implementation.
  • Inspect MCP activity: Expand chat events to view raw requests and responses.

​
Demo

Watch a quick walkthrough of the workflow from link detection to code generation:

​
Usage

​
Connect in Agent chat

  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 Log in with Figma to authorize.
After pasting a supported link, Agent shows a Figma design card for quick authorization:
Connect Figma card appears in Agent chat when a valid Figma link is pasted
Use link-based workflows to act on precise parts of your design:
  1. In Figma, copy the link to any frame or layer.
  2. Share the URL with Agent in the chat box and describe what you want.
In Figma, copy a link to the exact frame or layer you want Agent to work with:
Selecting a frame in Figma
Then paste the link into Agent along with a short instruction (for example, “generate React for this frame”):
Sharing the URL with Agent in the chat box

​
View MCP calls

Open the timeline event labeled Used Figma MCP (Beta) to see the underlying requests and responses. Here is where to expand the timeline event to inspect MCP calls:
Expanded chat event showing MCP calls to the Figma integration
MCP access to Figma is read‑oriented and respects your Figma permissions. If a file is private or you lack access, the integration cannot fetch content.

​
Manage connections

Manage or disconnect the Figma integration at replit.com/integrations. Find and manage connections from your workspace integrations:
Integrations pane in the personal workspace showing the Figma integration
⌘I