Figma MCP Server - Barndoor Documentation
Figma
SecureRemote OfficialFile & Document Management
Summary: Official connector to access Figma designs, extract design context, variables, and generate code from design files via AI tools.
How Teams Use It: The official Figma remote MCP server enables agents to extract design context and generate code from Figma files, access design variables and styles, and create collaborative diagrams for seamless design-to-code workflows.
Tools
| Tool Name | Tool Description | Tool Type |
|---|---|---|
| add_code_connect_map | Map a Figma node to a code component in your codebase using Code Connect. | Create |
| create_design_system_rules | Generate design system rules for code translation and implementation. | Read |
| generate_diagram | Create a flowchart, decision tree, gantt chart, sequence diagram, or state diagram in FigJam using Mermaid.js syntax. | Create |
| get_code_connect_map | Get mappings between Figma nodes and code components in your codebase. | Read |
| get_code_connect_suggestions | Get suggested mappings and strategy for linking Figma nodes to code components. | Read |
| get_design_context | Extract design context from a Figma frame for code generation. Returns code string and JSON of download URLs for referenced assets. | Read |
| get_figjam | Get FigJam diagram content with node screenshots. Only works for FigJam files, not other Figma files. | Read |
| get_metadata | Get lightweight XML metadata of a Figma design including node structure, types, names, positions and sizes. | Read |
| get_screenshot | Generate a screenshot for a given node or the currently selected node in the Figma desktop app. | Read |
| get_variable_defs | Get design variables and styles including colors, spacing, typography, and other reusable design properties. | Read |
| send_code_connect_mappings | Confirm and send Code Connect mapping suggestions from Figma nodes to code components. | Create |
| whoami | Get authenticated Figma user identity and validate permission levels. | Read |