Use when implementing UI from Figma designs, extracting design tokens, or downloading assets via Framelink MCP. MUST load when user shares a Figma URL or references Figma files. Requires API token.
Set your Figma API key as an environment variable:
export FIGMA_API_KEY="your-figma-personal-access-token"
To create a Figma Personal Access Token:
After loading this skill, use skill_mcp to invoke Figma tools:
skill_mcp(mcp_name="figma", tool_name="get_figma_data", arguments='{"fileKey": "abc123", "nodeId": "1234:5678"}')
Fetch comprehensive Figma file data including layout, content, visuals, and component information.
| Parameter | Type | Required | Description |
|---|---|---|---|
fileKey | string | Yes | The Figma file key (from URL: figma.com/file/<fileKey>/... or figma.com/design/<fileKey>/...) |
nodeId | string | No | Specific node ID (from URL param node-id=<nodeId>). Format: 1234:5678 or 1234-5678 |
depth | number | No | Levels deep to traverse. Only use if explicitly requested by user. |
Returns: YAML-formatted design data with:
metadata - File/node informationnodes - Simplified node tree with layout, styles, text contentglobalVars - Shared styles and variablesDownload SVG and PNG images/icons from a Figma file.
| Parameter | Type | Required | Description |
|---|---|---|---|
fileKey | string | Yes | The Figma file key |
nodes | array | Yes | Array of node objects to download (see below) |
localPath | string | Yes | Absolute path to save images |
pngScale | number | No | Export scale for PNGs (default: 2) |
Node object structure:
{
"nodeId": "1234:5678",
"fileName": "icon-name.svg",
"imageRef": "optional-for-image-fills"
}
Figma URLs follow these patterns:
https://www.figma.com/file/<fileKey>/<fileName>?node-id=<nodeId>https://www.figma.com/design/<fileKey>/<fileName>?node-id=<nodeId>Example: https://www.figma.com/design/abc123xyz/MyDesign?node-id=1234-5678
fileKey: abc123xyznodeId: 1234-5678 (or 1234:5678 - both formats work)# Fetch specific frame/component
skill_mcp(mcp_name="figma", tool_name="get_figma_data", arguments='{"fileKey": "abc123xyz", "nodeId": "1234:5678"}')
# Fetch entire file (use sparingly - can be large)
skill_mcp(mcp_name="figma", tool_name="get_figma_data", arguments='{"fileKey": "abc123xyz"}')
skill_mcp(mcp_name="figma", tool_name="download_figma_images", arguments='{
"fileKey": "abc123xyz",
"nodes": [
{"nodeId": "1234:5678", "fileName": "hero-image.png"},
{"nodeId": "5678:9012", "fileName": "icon-arrow.svg"}
],
"localPath": "/absolute/path/to/assets"
}')
# User provides: https://www.figma.com/design/abc123/Dashboard?node-id=100-200
# 1. Fetch the design data
skill_mcp(mcp_name="figma", tool_name="get_figma_data", arguments='{"fileKey": "abc123", "nodeId": "100-200"}')
# 2. Review the returned YAML for:
# - Layout structure (flex, grid, spacing)
# - Typography (font, size, weight, line-height)
# - Colors (fills, strokes)
# - Dimensions and constraints
# 3. Implement the component using the extracted data
# Fetch a design system file
skill_mcp(mcp_name="figma", tool_name="get_figma_data", arguments='{"fileKey": "designSystemKey"}')
# The globalVars section contains:
# - Color styles
# - Typography styles
# - Effect styles (shadows, blurs)
skill_mcp(mcp_name="figma", tool_name="download_figma_images", arguments='{
"fileKey": "iconLibraryKey",
"nodes": [
{"nodeId": "10:20", "fileName": "icon-home.svg"},
{"nodeId": "10:30", "fileName": "icon-settings.svg"},
{"nodeId": "10:40", "fileName": "icon-user.svg"}
],
"localPath": "/project/src/assets/icons",
"pngScale": 2
}')
The get_figma_data tool returns simplified, AI-optimized data: