Figma MCP Server

Skill by ara.so — MCP Skills collection.

The Figma MCP server connects AI coding agents directly to Figma, enabling you to generate code from designs, extract design tokens, leverage Code Connect mappings, and write native Figma content back to the canvas. This skill teaches agents how to work with Figma files through the Model Context Protocol.

What It Does

• Generate code from Figma frames — Select any frame and get structured code (React + Tailwind by default, adaptable to any framework)
• Extract design context — Pull variables, components, styles, and layout data
• Code Connect integration — Reference actual component implementations from your codebase
• Write to canvas (beta) — Create and modify frames, components, variables, and auto layout directly in Figma
• Import from web (rolling out) — Convert web pages into Figma designs

Installation

VS Code (requires GitHub Copilot)