What problem it solves

AI agents need relevant design context from Figma files to generate code that follows a design system and reflects design intent. This project documents how to connect the Figma MCP server to supported clients, use its tools and skills, and apply practices for more consistent results.

Key features

• Connect supported MCP clients — Setup instructions cover the Figma MCP server in VS Code, Cursor, Claude Code, Gemini CLI, and other editors that support Streamable HTTP.

  Source: README

• Generate code from Figma designs — Agents can turn selected Figma frames into code and extract variables, components, and layout data for implementation in an IDE.

  Source: README

• Work with native Figma content — With the remote server and appropriate skills, agents can create and update frames, components, variables, and Auto layout in Figma files.

  Source: README

• Reuse components with Code Connect — Code Connect lets generated code reference actual components, helping keep implementation aligned with the codebase.

  Source: README

• Apply agent workflow skills — The repository includes standalone skills for workflows such as mapping UI recordings to storyboards and turning product requirements into FigJam project plans.

  Source: README, workflow-skills

Quick start

Copied verbatim from the project's README.

/add-plugin figma

claude plugin install figma@claude-plugins-official

gemini extensions install https://github.com/figma/mcp-server-guide

Who it may suit

This guide may suit developers, designers, and product teams using AI coding agents to move Figma designs into implementation workflows.

Topics to discuss

• Which Figma MCP server setup works best for your preferred coding agent?

• How should teams structure Figma files and project rules for consistent generated code?

• Which workflow skills should be added to the Figma plugin and shared with the community?

Written by ReadmeX AI from the project's README, source and public GitHub data; it may contain mistakes.

Read the original README https://github.com/figma/mcp-server-guide#readme

ReadmeX opened this community for a trending project; it is not run by the project. Maintainers can claim it from the community page.