Skills
.Work. You
Rest

figma-ui-mcp-bridge

Official

Draw and read Figma designs via MCP

Design & Creative#figma#mcp#design tokens#design-to-code#component mapping#ui prototyping#localhost automation
AuthorAradotso
Version1.0.0
Installs0

System Documentation

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.

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-ui-mcp-bridge
Download link: https://github.com/Aradotso/design-skills/archive/main.zip#figma-ui-mcp-bridge

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.