← Back to directory
T

Talk to Figma

Community
Let AI agents read, analyze, and modify Figma designs
GitHub source repository ↗
★ 651 Stars Category · Collaboration Popular Source revision c7adf243fc29
53FMRS · D
Reliability
8/20
Security and permissions
10/20
Maintenance
11/20
Documentation
13/20
Setup experience
11/20

This project provides a feature-rich MCP server that enables deep integration between AI agents and Figma. It supports design analysis, element creation, and modification, and is compatible with multiple AI tools. The biggest advantage is that it works without a Dev Mode license. It is a practical tool for design teams and developers, but attention should be paid to multi-agent modification risks and the development status of some features.

Read the FMRS scoring method →

This is a Model Context Protocol (MCP) server that enables AI tools like Claude Desktop, Claude Code, Cursor, Antigravity, etc. to interact with Figma design files. It supports design analysis, element creation, style modification, and works with any Figma account (even free ones) without needing a Dev Mode license. The server communicates with a Figma plugin via WebSocket and supports safe parallel execution for multiple AI agents.

Tools

get_document_info
Get basic information about the Figma document
get_current_selection
Get the currently selected elements
get_styles
Get styles defined in the document
scan_text
Scan text elements in the document
audit_components
Audit component usage in the document
export_assets
Export design assets
create_shape
Create a shape element
create_text
Create a text element
create_frame
Create a frame element
clone_element
Clone an existing element
group_elements
Group multiple elements
modify_colors
Modify element colors
modify_borders
Modify element borders
modify_corners
Modify element corner radius
modify_shadows
Modify element shadows
auto_layout
Apply auto layout
advanced_typography
Set advanced typography
set_local_component
Convert element to local component
set_team_component
Use team library component

Setup

  1. Run npx claude-talk-to-figma-mcp to start the WebSocket server.
  2. Install the plugin in Figma Desktop (Menu → Plugins → Development → Import plugin from manifest, select src/claude_mcp_plugin/manifest.json).
  3. Configure your AI tool:

- Claude Desktop: Download the .dxt file and double-click to auto-configure.
- Cursor: In settings, create a new MCP server with command npx -p claude-talk-to-figma-mcp@latest claude-talk-to-figma-mcp-server.
- Other tools: Follow the detailed installation guide.

  1. Open the plugin in Figma, copy the channel ID, and tell your AI: "Connect to Figma, channel {your-ID}".

Fit and risk

Best for

  • UX/UI teams: Automate repetitive design tasks and maintain brand consistency
  • Developers: Generate production-ready code directly from designs
  • Teams that need a free Figma account alternative

Not for

  • Users needing full support for Figma Variables (still in development)
  • Users needing advanced export to Tailwind CSS/SwiftUI (coming soon)

Required permissions

  • Requires Node.js and Figma Desktop
  • Requires network access to run npx and connect WebSocket
  • Requires installing the Figma plugin and granting it access to the current design file
  • AI tool must be configured to connect to the MCP server

Risks and side effects

  • Multiple agents modifying the document simultaneously may cause conflicts, though the server has a command queue, it's recommended to explicitly specify the parentId parameter
  • There may be undiscovered bugs as the project is under active development
  • Dependencies on third-party npm packages and Figma plugins; ensure sources are trusted

Troubleshooting

  1. Ensure Node.js is installed and the npx command runs correctly
  2. Check that the Figma plugin is correctly installed and opened
  3. Ensure the channel ID is correctly copied and entered in the chat
  4. Refer to TROUBLESHOOTING.md for common error solutions

Use cases

Automate accessibility audits, detect contrast issues and suggest fixes
Bulk update styles like colors, typography, and spacing
Analyze visual hierarchy and suggest improvements
Generate React/Vue/SwiftUI components from designs
Keep design and development in sync, reduce handoff friction

Supported clients

Claude DesktopFull support
Claude CodeFull support
CursorFull support
WindsurfFull support
VS CodeFull support
GitHub CopilotFull support
AntigravityFull support
ClineFull support
Roo CodeFull support