skills.rest
reason-machines
reason-machinesOFFICIAL
Explore all skills by this author →
Website𝕏@reasonmachinesGitHub

figma-console-mcp-skills

Automates Figma design token export, WCAG linting, and component documentation via MCP scripts.

4|Updated May 16, 2026
Search Tags:#accessibility#design system#figma#mcp#design tokens#wcag#component documentation
One-click install
npx skills add https://github.com/reason-machines/design-skills --skill figma-console-mcp-skills-reason-machines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-console-mcp-skills
Source: https://github.com/reason-machines/design-skills/tree/main/skills/figma-console-mcp-skills
Command: npx skills add https://github.com/reason-machines/design-skills --skill figma-console-mcp-skills-reason-machines

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Design teams struggle to keep Figma files synchronized with code, audit accessibility compliance, and document components manually. This Skill provides 22 ready-to-use playbooks that extend the native Figma MCP server to automate design-system workflows directly inside Figma. ## Core Features & Use Cases - Design Token Export/Import: Convert Figma variables to DTCG JSON, CSS custom properties, Tailwind, SCSS, or TypeScript, and push tokens back into Figma as variables. - Accessibility & Quality Audits: Run WCAG 2.2 contrast linting, touch-target size checks, and per-component accessibility scorecards across the node tree. - Component Analysis & Documentation: Extract variant state machines, deep component trees with resolved tokens, and generate Markdown component documentation. - Versioning & Collaboration: List version history, generate changelogs between versions, and manage file comments via the Figma REST API. - Use Case: A design engineer selects a component set in Figma, asks the agent to export all semantic tokens to CSS variables, then runs a WCAG contrast lint to flag accessibility violations before handoff. ## Quick Start Ask the agent to export the Figma design tokens from the current file to CSS custom properties using the figma-export-tokens playbook.

Frequently Asked Questions about figma-console-mcp-skills

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

FAQPage Schema
How do I export Figma design tokens to CSS variables?▼

Use the figma-export-tokens playbook, which reads local variable collections via the Figma Plugin API and converts them to CSS custom properties, DTCG JSON, Tailwind, SCSS, or TypeScript. Color values are converted to rgb() and numeric values to px units.

How to check Figma designs for WCAG accessibility compliance?▼

The figma-lint-design playbook scans text nodes and computes color contrast ratios against WCAG 2.2 AA thresholds (4.5:1 for normal text, 3:1 for large text). The figma-audit-accessibility playbook additionally checks touch target sizes against the 44px minimum.

What do I need to set up before using Figma MCP skills?▼

You need the native Figma MCP server configured with OAuth and the official figma-use skill for Plugin API reference. The four REST-based skills (version history, changelog, comments) additionally require a Figma personal access token set in the FIGMA_TOKEN environment variable.

Can I import design tokens from code back into Figma?▼

Yes, the figma-import-tokens playbook parses DTCG JSON and creates or updates Figma variables in a collection, converting hex colors to RGB objects and numeric values to floats. Existing variables are updated rather than duplicated.

Why does a Figma script fail on the first use_figma call?▼

Scripts are atomic, so nothing is applied if an error occurs. Common causes include selecting the wrong node type, missing figma.loadFontAsync before text creation, or running a FigJam or Slides script in a Design file.

Do the Figma REST API skills work without a terminal?▼

No, the REST skills for version history, changelogs, and comments require a terminal-capable agent with the FIGMA_TOKEN environment variable set. The use_figma-based skills work through the MCP server without a token.

Related Skills

Explore More Design & Creative Skills→
figmafigma
1.9k

figma-generate-design

Build full-page Figma UIs by importing design system components, variables, and styles.

Official
Advanced
i-bebsii-bebsi

design-md

Author, lint, and export Google's DESIGN.md design token specification files.

Community
Intermediate
LincyawLincyaw

verify

Run Black, isort, Flake8, and pytest checks on Python projects.

Community
Intermediate
yonatangrossyonatangross
217

figma-design-handoff

Extract Figma design tokens and generate TypeScript component interfaces.

Community
Advanced