Extract design data from Figma files using REST API scripts. Includes frame extraction, metadata retrieval, screenshots, design token extraction, annotations, and FigJam content for design-to-code workflows.
Extract and process Figma design data for design-to-code implementation in the IRIS project.
Node.js scripts that extract Figma data (requires FIGMA_TOKEN):
Generate your token at https://www.figma.com/settings → Personal Access Tokens
The scripts look for the token in this order:
FIGMA_TOKEN environment variableFIGMA_KEY environment variable~/.claude/settings.json)Recommended: Claude Settings (persists across sessions)
Add to ~/.claude/settings.json:
{
"env": {
"FIGMA_KEY": "your-figma-token"
}
}
Alternative: Environment Variable
# Windows (PowerShell)
$env:FIGMA_TOKEN="your-token"
# Windows (CMD)
set FIGMA_TOKEN=your-token
# Mac/Linux
export FIGMA_TOKEN="your-token"
xFC8eCJcSwB9EyicTmDJ7w
node .claude/skills/figma-desktop/scripts/extract-frames.js xFC8eCJcSwB9EyicTmDJ7w 2501:2715
node .claude/skills/figma-desktop/scripts/get-metadata.js xFC8eCJcSwB9EyicTmDJ7w 6804:13742
node .claude/skills/figma-desktop/scripts/get-screenshot.js xFC8eCJcSwB9EyicTmDJ7w 6804:13742
node .claude/skills/figma-desktop/scripts/get-variable-defs.js xFC8eCJcSwB9EyicTmDJ7w
node .claude/skills/figma-desktop/scripts/get-annotations.js xFC8eCJcSwB9EyicTmDJ7w 6804:13742
node .claude/skills/figma-desktop/scripts/get-code-connect-map.js xFC8eCJcSwB9EyicTmDJ7w
node .claude/skills/figma-desktop/scripts/get-figjam.js xFC8eCJcSwB9EyicTmDJ7w 123:456
# First extract current frames
node .claude/skills/figma-desktop/scripts/extract-frames.js xFC8eCJcSwB9EyicTmDJ7w 2501:2715
# Then compare with documented frames
node .claude/skills/figma-desktop/scripts/compare-frames.js
Scripts create temporary files in project root:
temp-frames-list.json - Frame listtemp-metadata-*.json - Node metadatatemp-design-tokens-*.json - Design tokenstemp-annotations-*.json - Annotations datatemp-code-connect-*.json - Component mappingstemp-figjam-*.json - FigJam contenttemp-comparison-report.json - Frame comparisonscreenshot-*.png - ScreenshotsClean up with:
rm temp-*.json screenshot-*.png
This skill integrates with IRIS documentation:
docs/figma/frame-node-mapping.jsondocs/figma/screenshots/docs/figma/design-system-mapping.jsonUse this skill when:
Node IDs can be in either format:
2501:2715 (API format)2501-2715 (URL format)Scripts automatically convert between formats as needed.
Find the file key in any Figma URL: