Skills
.Work. You
Rest

figma-console-mcp-design-system-api

Official

Sync and debug design systems in Figma

Design & Creative#accessibility#figma#mcp#design tokens#visual debugging#component creation#token sync
AuthorAradotso
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill eliminates the manual, error-prone work of extracting design tokens and components from Figma, then recreating and keeping them in sync with code.

Core Features & Use Cases

  • Design system extraction: Pull variables, components, styles, and full design trees from Figma files.
  • Bidirectional token synchronization: Export tokens to DTCG JSON/CSS, edit locally, then push changes back into Figma as a diff-aware merge.
  • Component creation and visual debugging: Create frames and nodes, instantiate components, and troubleshoot designs via screenshots and accessibility scans.

Quick Start

Connect your MCP client to Figma Console MCP by adding the figma-console server configured with FIGMA_ACCESS_TOKEN, then ask it to export your file’s tokens in dtcg-json for editing and re-import.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: figma-console-mcp-design-system-api
Download link: https://github.com/Aradotso/design-skills/archive/main.zip#figma-console-mcp-design-system-api

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.