## 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      |