mcp-figma

What problem does it solve?

This Skill enables AI assistants to programmatically access Figma design data through MCP using Code Mode, reducing manual handoffs and enabling token-efficient, code-driven workflows for design content, assets, and collaboration.

Core Features & Use Cases

• 18 MCP tools spanning file access, image export, components, styles, team projects, and comments for end-to-end design data workflows
• Code Mode integration to execute complex sequences with minimal token overhead
• Ideal for design-system documentation, design-token extraction, asset generation, and automated design reviews

Quick Start

1. Ensure Code Mode MCP is configured in your environment (via .utcp_config.json) and a Figma API token is available (e.g., in .env).
2. Discover available tools with search_tools({ task_description: "figma" }), then inspect details with tool_info({ tool_name: "figma.figma_get_file" }).
3. Run a basic command using call_tool_chain to fetch a Figma file, for example: const file = await figma.figma_get_file({ fileKey: "YOUR_FILE_KEY" }); console.log('File name:', file.name);