v0.directory
Back to MCPs

Figma

by Figma

Import designs directly from Figma, access design tokens, and maintain design-to-code consistency.

Official Documentation

How to Add Figma MCP in v0

What is MCP?

Model Context Protocol (MCP) is a protocol that enables AI assistants to access custom tools and services. v0 supports connecting to MCP servers to extend its capabilities with additional integrations.

Configuration Steps

  1. Open v0 Settings
    • Go to your v0 chat or project
    • Click on the sidebar and navigate to "Connect" section
    • Look for "Custom MCP" or "Add MCP Connection"
  2. Add Custom MCP Connection
    • Click "Add Custom MCP Connection" button
    • A modal will appear with configuration fields
  3. Fill in the Connection Details

Connection Details for Figma

Figma
https://mcp.figma.com
None
Bearer
Headers
OAuth

You will be redirected to Figma to authorize the connection.

Important Notes

  • MCP servers extend v0's capabilities with additional tools and integrations
  • Make sure you have an active Figma account before connecting
  • See the official Figma documentation for API key generation and detailed setup