| name | figrefer |
| description | Read the currently selected Figma element and work with it. Use when: (1) User says 'figrefer', 'figma refer', 'check my figma selection', (2) User wants to implement or analyze a design selected in Figma desktop app, (3) User says 'what am I selecting in figma', 'implement this figma design' |
| argument-hint | [what to do with the selection] |
Figma Refer
Read the user's current Figma desktop app selection and work with it based on their instructions.
Prerequisites
- Figma Desktop MCP must be connected:
claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp
- Figma desktop app open with Dev Mode enabled (Shift+D)
- User has selected a layer/frame in Figma
Workflow
Step 1: Read the Selection
Call these tools in parallel (no nodeId needed — reads current selection):
mcp__figma-desktop__get_screenshot - visual reference
mcp__figma-desktop__get_design_context - code reference with styles, fonts, colors
mcp__figma-desktop__get_metadata - structure, dimensions, positions
Step 2: Present What You See
Summarize the selection for the user:
- What the element looks like (from screenshot)
- Dimensions and position (from metadata)
- Key style properties: fonts, colors, spacing (from design context)
- Layer structure if relevant
Step 3: Follow User Instructions
$ARGUMENTS contains what the user wants to do. Common scenarios: