skills.rest
MichelKerkmeester
MichelKerkmeesterCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

mcp-figma

Retrieve and export Figma design data via MCP tools.

31|3|Updated Dec 23, 2025
Search Tags:#figma#mcp#design-tokens#code-mode#design-access#team-projects
One-click install
npx skills add https://github.com/MichelKerkmeester/opencode-spec-kit-framework --skill mcp-figma
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mcp-figma
Source: https://github.com/MichelKerkmeester/opencode-spec-kit-framework/tree/main/.opencode/skill/mcp-figma
Command: npx skills add https://github.com/MichelKerkmeester/opencode-spec-kit-framework --skill mcp-figma

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

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);

Frequently Asked Questions about mcp-figma

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract Figma design tokens using an AI assistant?▼

You can extract Figma design tokens through Code Mode MCP integration, which automates retrieval and analysis of file components and styles. This enables token-efficient, code-driven workflows for design-system documentation and asset generation without manual handoffs.

Can I automatically export images from Figma files via MCP?▼

Yes, you can automatically export images from Figma files via MCP. The integration provides 18 specific tools spanning file access and image export, allowing AI-driven workflows to programmatically retrieve and export design assets across files and teams.

Do I need a Figma API token to access design data through Code Mode?▼

Yes, you need a valid Figma API token to access design data through Code Mode. You must configure Code Mode MCP in your environment and provide the API token, typically stored in a .env file, to authenticate and operate the automated retrieval workflows.

What is the best way to automate Figma design reviews for team projects?▼

The best way to automate Figma design reviews for team projects is using Code Mode MCP integration to execute complex sequences with minimal token overhead. It enables automated retrieval of file content, components, and comments for end-to-end analysis.

How do I discover available Figma tools after setting up Code Mode MCP?▼

To discover available Figma tools after setting up Code Mode MCP, run search_tools with a task description like 'figma', then inspect specific details using tool_info with the desired tool name, such as 'figma.figma_get_file', before executing commands.

Does Code Mode integration support accessing Figma comments and team projects?▼

Yes, Code Mode integration supports accessing Figma comments and team projects. It includes 18 MCP tools that span file access, components, styles, team projects, and comments, enabling comprehensive end-to-end design data workflows and collaboration analysis.

Related Skills

Explore More Design & Creative Skills→
ulises-jeremiasulises-jeremias
2

figma

Fetch Figma design context and generate React and Tailwind code.

Community
Advanced
warpdotdevwarpdotdev
64.1k

figma-generate-design

Automates creation and updating of full-page screens in Figma using published design system components and tokens.

Official
Advanced
KrishpotanwarKrishpotanwar

stream-chain

Coordinate multi-agent sequences for data processing and code analysis.

Community
Advanced
opzero1opzero1
3

figma-design

Extract design tokens, component details, and assets from Figma files.

Official
Intermediate