Language: 日本語English

figma Plugin

Category
Design
Topics
Design & Media Production · Web & App Development
First seen
2026-07-09
Last confirmed
2026-07-13
Explanation last updated
2026-07-12

The explanation below is AI-generated. Please verify it against the sources.

The Figma MCP server connects Figma design files to AI coding agents, supplying design context so agents can generate code, extract variables/components, and use Code Connect for consistent component reuse. According to the README, it exposes tools such as get_design_context, get_variable_defs, get_metadata, and get_screenshot, and can be connected via VS Code, Cursor, Claude Code, Gemini CLI, or any client supporting Streamable HTTP. Tool-call limits depend on the user's Figma plan and seat type (e.g., up to 6 calls per month on the Starter plan or View/Collab seats), and the write-to-canvas feature is free during the current beta but is expected to become a usage-based paid feature later. The README also documents best practices for structuring Figma files, writing effective prompts, adding custom rules, and breaking down large selections to improve generated code quality, and describes an integration that lets agents fetch project context from Make.

Overview

Figma is a design platform, and this repository is a guide to the Figma MCP server, which links Figma design files to MCP-compatible AI clients (such as VS Code, Cursor, Claude Code, and Gemini CLI) so that agents can read design context and translate it into code.

What you can do with figma

  • Generate code from selected Figma frames
  • Extract design context such as variables, components, and layout data (e.g., via get_design_context, get_variable_defs, get_metadata, get_screenshot)
  • Use Code Connect to keep generated code consistent with your actual codebase components
  • Write to the Figma canvas via the remote server (free during the current beta period)
  • Generate Figma designs from web pages (feature rolling out)
  • Fetch project context from Make projects using the MCP resources capability
  • Connect from VS Code, Cursor, Claude Code, Gemini CLI, or other Streamable HTTP-compatible clients

Sources

Original description (English)

Figma design platform integration. Access design files, extract component information, read design tokens, and translate designs into code. Bridge the gap between design and development workflows.

History of figma

Back to list