skills.rest
muskie9
muskie9COMMUNITY
Explore all skills by this author →
WebsiteGitHub

Figma MCP Desktop Server

Extract design tokens and component details from Figma via SSE.

Updated Jun 18, 2026
Search Tags:#design system#design tokens#UI development#Figma#component details
One-click install
npx skills add https://github.com/muskie9/agents --skill figma-mcp-desktop-server
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Figma MCP Desktop Server
Source: https://github.com/muskie9/agents/tree/main/skills/figma-mcp-desktop
Command: npx skills add https://github.com/muskie9/agents --skill figma-mcp-desktop-server

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill simplifies the process of extracting design tokens, typography, spacing, colors, and component details from Figma files, making design system management more efficient.

Core Features & Use Cases

  • Design Token Extraction: Retrieve design tokens from Figma files.
  • Component Details: Access detailed information about components in Figma files.
  • Use Case: For a UX designer working on a Figma project, this Skill can automate the process of collecting design tokens and component details, saving time and reducing manual errors.

Quick Start

Use the 'figma-mcp-desktop' skill to get the design tokens for the component at node ID '1234:5678' from your Figma file.

Frequently Asked Questions about Figma MCP Desktop Server

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

FAQPage Schema
How do I extract design tokens from Figma files?▼

To extract design tokens from Figma files, use this Skill to connect to the Figma Desktop MCP server via Server-Sent Events (SSE). It retrieves typography, spacing, and color tokens directly from your project when you provide the specific node ID.

What is needed to connect to the Figma MCP server?▼

Connecting to the Figma MCP server requires a running Figma Desktop app with Dev Mode and the MCP Server enabled. This setup allows the Skill to communicate via Server-Sent Events (SSE) to extract component details.

Can I automate collecting component details for UI development?▼

Yes, you can automate collecting component details for UI development by applying this Skill to your Figma project. It accesses detailed information about components, saving time and reducing manual errors in design system management.

How do I get design tokens for a specific component node in Figma?▼

To get design tokens for a specific component node in Figma, invoke the Skill and provide the target node ID, such as '1234:5678'. It queries the Figma Desktop MCP server to return the exact component details.

Does extracting Figma component details work without the desktop app?▼

No, extracting Figma component details does not work without the desktop app. This Skill explicitly requires the Figma Desktop application running locally with Dev Mode and MCP Server enabled to establish the SSE connection.

Related Skills

Explore More Design & Creative Skills→
FacuMFacuM

implement-design

Translate Figma designs into React and Tailwind code with 1:1 visual fidelity.

Community
Advanced
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
JeremiahEllingtonJeremiahEllington

design-consultation

Plan and deliver a complete design system with DESIGN.md and preview pages.

Community
Advanced
gbasingbasin
7

figma-to-react

Convert Figma designs to React components with Tailwind CSS.

Community
Advanced