Figma Desktop Skill

Extract and process Figma design data for design-to-code implementation in the IRIS project.

Capabilities

REST API Scripts

Node.js scripts that extract Figma data (requires

FIGMA_TOKEN

):

• extract-frames.js - Extract all frames from a Figma page
• get-metadata.js - Get node structure and hierarchy
• get-screenshot.js - Capture node screenshots
• get-variable-defs.js - Extract design tokens (colors, text styles, variables)
• get-annotations.js - Get dev mode annotations and handoff notes
• get-code-connect-map.js - Get Figma component metadata for code mapping
• get-figjam.js - Extract FigJam board content (sticky notes, shapes, text)
• compare-frames.js - Compare current vs documented frames

Setup

Figma Token

Generate your token at https://www.figma.com/settings → Personal Access Tokens

The scripts look for the token in this order:

1. CLI argument (passed directly to script)

2. FIGMA_TOKEN

   environment variable

3. FIGMA_KEY

   environment variable
4. Claude user settings (

   ~/.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"

IRIS Project File Key

xFC8eCJcSwB9EyicTmDJ7w

Usage

Extract Frames

node .claude/skills/figma-desktop/scripts/extract-frames.js xFC8eCJcSwB9EyicTmDJ7w 2501:2715

Get Metadata

node .claude/skills/figma-desktop/scripts/get-metadata.js xFC8eCJcSwB9EyicTmDJ7w 6804:13742

Get Screenshot

node .claude/skills/figma-desktop/scripts/get-screenshot.js xFC8eCJcSwB9EyicTmDJ7w 6804:13742

Get Design Tokens

node .claude/skills/figma-desktop/scripts/get-variable-defs.js xFC8eCJcSwB9EyicTmDJ7w

Get Annotations

node .claude/skills/figma-desktop/scripts/get-annotations.js xFC8eCJcSwB9EyicTmDJ7w 6804:13742

Get Code Connect Mapping

node .claude/skills/figma-desktop/scripts/get-code-connect-map.js xFC8eCJcSwB9EyicTmDJ7w

Get FigJam Content

node .claude/skills/figma-desktop/scripts/get-figjam.js xFC8eCJcSwB9EyicTmDJ7w 123:456

Compare Frames

# 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

Output Files

Scripts create temporary files in project root:

• temp-frames-list.json

  - Frame list

• temp-metadata-*.json

  - Node metadata

• temp-design-tokens-*.json

  - Design tokens

• temp-annotations-*.json

  - Annotations data

• temp-code-connect-*.json

  - Component mappings

• temp-figjam-*.json

  - FigJam content

• temp-comparison-report.json

  - Frame comparison

• screenshot-*.png

  - Screenshots

Clean up with:

rm temp-*.json screenshot-*.png

Integration

This skill integrates with IRIS documentation:

• Frame mapping:

  docs/figma/frame-node-mapping.json

• Screenshots:

  docs/figma/screenshots/

• Design tokens:

  docs/figma/design-system-mapping.json

When to Use This Skill

Use this skill when:

• Implementing UI components from Figma designs
• Extracting design tokens for the design system
• Updating frame mappings after Figma changes
• Generating screenshots for documentation
• Extracting FigJam brainstorming content
• Getting dev handoff notes and annotations
• Automating batch operations on Figma data
• Running in CI/CD pipelines

Node ID Format

Node IDs can be in either format:

• Colon format:

  2501:2715

  (API format)
• Dash format:

  2501-2715

  (URL format)

Scripts automatically convert between formats as needed.

File Keys

Find the file key in any Figma URL:

https://figma.com/design/<FILE_KEY>/...

Token Resolution

Scripts automatically resolve the Figma token from:

1. CLI argument

2. FIGMA_TOKEN

   env var

3. FIGMA_KEY

   env var

4. ~/.claude/settings.json

   →

   env.FIGMA_KEY