skills.rest
Aradotso
AradotsoOFFICIAL
Explore all skills by this author →
Website𝕏@aradotsoGitHub

figma-ui-mcp-bridge

Draw UI in Figma and read designs as structured data via localhost MCP.

3|Updated May 16, 2026
Search Tags:#figma#mcp#design tokens#design-to-code#component mapping#ui prototyping#localhost automation
One-click install
npx skills add https://github.com/Aradotso/design-skills --skill figma-ui-mcp-bridge
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-ui-mcp-bridge
Source: https://github.com/Aradotso/design-skills/tree/main/skills/figma-ui-mcp-bridge
Command: npx skills add https://github.com/Aradotso/design-skills --skill figma-ui-mcp-bridge

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It removes the friction between AI coding workflows and Figma by letting assistants write directly onto the Figma canvas and pull back structured design data without needing Figma API keys.

Core Features & Use Cases

  • Bidirectional MCP connection for Figma Desktop: Create and modify UI in Figma by calling MCP tools from an MCP-compatible IDE or AI client.
  • Read designs as structured data: Export page structure, selection details, layout/token context, component mappings, and CSS-ready output for code generation.
  • Screenshots and design-system extraction: Capture canvas screenshots and generate design system rule sheets (tokens, typography, component catalog) for consistent implementation.
  • Multi-file session support over localhost: Target specific open Figma files using sessionId for reliable operations.

Quick Start

Start a local MCP server by adding the figma-ui-mcp server to your AI client, then install the Figma Desktop plugin and say “connect to Figma” so the AI can begin calling figma_write, figma_read, figma_rules, and figma_status.

Frequently Asked Questions about figma-ui-mcp-bridge

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

FAQPage Schema
Can I read existing Figma designs as structured data for code generation?▼

Reading existing Figma designs as structured data for code generation involves using an MCP bridge to export page structure, layout context, and component mappings. The AI client calls figma_read to pull CSS-ready output directly from the Figma Desktop canvas.

What is required to connect an AI coding workflow to Figma Desktop via MCP?▼

No, you do not need a Figma API key to extract design tokens using MCP. The figma_rules tool pulls design system rule sheets including typography and component catalogs directly over a localhost connection without requiring API authentication.

How to extract design tokens and component catalogs from Figma for code generation?▼

To extract design tokens and component catalogs from Figma for code generation, use the figma_rules and figma_read MCP tools. They pull structured layout context and design system rule sheets over a localhost bridge without requiring Figma API keys.

What is required to connect an AI coding workflow to Figma Desktop via MCP?▼

Connecting an AI coding workflow to Figma Desktop via MCP requires a running MCP server on localhost, a corresponding Figma Desktop plugin, and an MCP-compatible IDE. You target specific open files using sessionId for reliable multi-file support.

Related Skills

Explore More Design & Creative Skills→
mims-harvardmims-harvard
1.6k

setup-tooluniverse

Install ToolUniverse and configure MCP with Cursor or Claude Desktop.

Official
Advanced
afel6afel6

popular-web-designs

Generate HTML and CSS replicating real website visual identities from design templates.

Community
Intermediate
qiphonqiphon
2

Hooks Automation

Automate Claude Code coordination with pre/post task hooks and MCP integration.

Community
Advanced
AradotsoAradotso
7

figma-mcp-go

Perform CRUD operations on Figma designs via an MCP server plugin bridge.

Official
Advanced