Auto-fetch Figma designs when URL detected. Extracts components, design tokens, images. Requires FIGMA_API_TOKEN.
Limited to specific tools
Additional assets for this skill
This skill is limited to using the following tools:
scripts/figma-fetch.shname: figma-integration description: "Auto-fetch Figma designs when URL detected. Extracts components, design tokens, images. Requires FIGMA_API_TOKEN." autoInvoke: true priority: medium triggers:
Priority: MEDIUM - Use when Figma URL detected
AUTO-DETECT when:
figma.com/file/ABC123/...const match = message.match(/figma\.com\/(file|design)\/([a-zA-Z0-9]+)/)
const fileId = match[2] // "ABC123"
⚠️ IMPORTANT: Always check for cached data first before fetching!
Log file locations (check in order):
.claude/logs/figma/{FILE_ID}-readable.txt ← Human-readable format
.claude/logs/figma/{FILE_ID}.json ← Raw JSON data
.claude/logs/figma/{FILE_ID}-images.json ← Image URLs
logs/figma/{FILE_ID}-readable.txt ← Alternative location
logs/figma/{FILE_ID}.json ← Alternative location
Decision logic:
IF log file exists AND user did NOT request "fetch", "refresh", "update":
→ READ from log file using Read tool
→ Show cached data with note: "📋 Using cached Figma data from {date}"
IF log file does NOT exist OR user requests fresh data:
→ FETCH using bash script
Read cached data:
# Prefer readable format
Read .claude/logs/figma/ABC123-readable.txt
# Or parse JSON if needed
Read .claude/logs/figma/ABC123.json
# Get image URLs
Read .claude/logs/figma/ABC123-images.json
Fetch when:
bash scripts/figma-fetch.sh ABC123
# Output:
# logs/figma/ABC123-readable.txt ← Formatted data
# logs/figma/ABC123.json ← Raw JSON
# logs/figma/ABC123-images.json ← Image URLs
# logs/figma/figma-fetch-{timestamp}.log ← Execution log
From response, generate:
Figma Frame → Code Components
├── Header → Header.tsx
├── Content → ContentSection.tsx
└── Actions → ActionButtons.tsx
In .envrc:
export FIGMA_API_TOKEN="figd_your-token"
Get token: Figma → Settings → Personal Access Tokens
⚠️ **Figma not set up**
1. Configure: Add FIGMA_API_TOKEN to .envrc
2. Or: Provide screenshots instead
Which option?
📚 Setup: docs/INTEGRATION_SETUP_GUIDE.md
Remember: Screenshots work as fallback if API unavailable.