From johnlindquist-claude
Extract design data from Figma files. Use for getting design tokens, component specs, and generating code from Figma designs.
npx claudepluginhub joshuarweaver/cascade-ai-ml-engineering --plugin johnlindquist-claudeThis skill uses the workspace's default tool permissions.
Extract design data and generate code from Figma.
Creates isolated Git worktrees for feature branches with prioritized directory selection, gitignore safety checks, auto project setup for Node/Python/Rust/Go, and baseline verification.
Executes implementation plans in current session by dispatching fresh subagents per independent task, with two-stage reviews: spec compliance then code quality.
Dispatches parallel agents to independently tackle 2+ tasks like separate test failures or subsystems without shared state or dependencies.
Extract design data and generate code from Figma.
Figma API token:
export FIGMA_ACCESS_TOKEN=figd_xxxxx
Get token from: Figma > Settings > Account > Personal Access Tokens
Optional: Install figma-export CLI for component/style exports:
bun add -g @figma-export/cli
For exporting components and styles, use the CLI:
# Export components to SVG
figma-export components FILE_KEY -o ./output
# With config file
figma-export use-config .figmaexportrc.js
# Export styles as CSS
figma-export styles FILE_KEY -o ./styles
Create .figmaexportrc.js:
module.exports = {
commands: [
['components', {
fileId: 'YOUR_FILE_KEY',
onlyFromPages: ['Icons'],
outputters: [
require('@figma-export/output-components-as-svg')({
output: './icons'
})
]
}]
]
};
Then run:
figma-export use-config
FILE_KEY="your-file-key" # From Figma URL
curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
"https://api.figma.com/v1/files/$FILE_KEY" | jq
NODE_ID="1:2" # Node ID from Figma
curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
"https://api.figma.com/v1/files/$FILE_KEY/nodes?ids=$NODE_ID" | jq
curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
"https://api.figma.com/v1/images/$FILE_KEY?ids=$NODE_ID&format=png&scale=2" | jq
curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
"https://api.figma.com/v1/files/$FILE_KEY/comments" | jq
curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
"https://api.figma.com/v1/files/$FILE_KEY/versions" | jq
curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
"https://api.figma.com/v1/files/$FILE_KEY/styles" | jq
#!/bin/bash
FILE_KEY=$1
# Get file with styles
STYLES=$(curl -sH "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
"https://api.figma.com/v1/files/$FILE_KEY" | jq '.styles')
# Get style nodes
STYLE_IDS=$(echo $STYLES | jq -r 'keys | join(",")')
curl -sH "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
"https://api.figma.com/v1/files/$FILE_KEY/nodes?ids=$STYLE_IDS" | \
jq '.nodes | to_entries | map(select(.value.document.type == "RECTANGLE")) |
map({
name: .value.document.name,
color: .value.document.fills[0].color
})'
curl -sH "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
"https://api.figma.com/v1/files/$FILE_KEY" | \
jq '[.. | objects | select(.type == "TEXT") |
{
name: .name,
fontFamily: .style.fontFamily,
fontSize: .style.fontSize,
fontWeight: .style.fontWeight,
lineHeight: .style.lineHeightPx
}] | unique'
curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
"https://api.figma.com/v1/files/$FILE_KEY/components" | jq
COMPONENT_ID="1:234"
curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
"https://api.figma.com/v1/files/$FILE_KEY/nodes?ids=$COMPONENT_ID" | jq
curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
"https://api.figma.com/v1/images/$FILE_KEY?ids=$COMPONENT_ID&format=svg" | jq -r '.images | to_entries[0].value'
# Get component node
NODE=$(curl -sH "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
"https://api.figma.com/v1/files/$FILE_KEY/nodes?ids=$NODE_ID" | jq '.nodes | to_entries[0].value')
# Generate code
gemini -m pro -o text -e "" "Generate React component code from this Figma data:
$NODE
Requirements:
- Use Tailwind CSS
- TypeScript with proper types
- Match dimensions and spacing
- Include all text content
- Handle responsive behavior"
curl -sH "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
"https://api.figma.com/v1/files/$FILE_KEY/nodes?ids=$NODE_ID" | \
jq '[.. | objects | select(.type == "FRAME") |
{
name: .name,
padding: {
top: .paddingTop,
right: .paddingRight,
bottom: .paddingBottom,
left: .paddingLeft
},
itemSpacing: .itemSpacing
}]'
#!/bin/bash
# figma-sync-tokens.sh
FILE_KEY=$1
OUTPUT=${2:-"tokens.json"}
# Fetch and extract
curl -sH "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
"https://api.figma.com/v1/files/$FILE_KEY" | \
jq '{
colors: [.. | objects | select(.type == "RECTANGLE" and .name | startswith("color/")) |
{name: .name, value: .fills[0].color}],
typography: [.. | objects | select(.type == "TEXT" and .name | startswith("text/")) |
{name: .name, font: .style}]
}' > $OUTPUT
echo "Tokens saved to $OUTPUT"
#!/bin/bash
# export-icons.sh
FILE_KEY=$1
OUTPUT_DIR=${2:-"./icons"}
mkdir -p $OUTPUT_DIR
# Get all icon components
ICONS=$(curl -sH "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
"https://api.figma.com/v1/files/$FILE_KEY/components" | \
jq -r '.meta.components[] | select(.name | startswith("icon/")) | .node_id')
for icon_id in $ICONS; do
# Get SVG URL
SVG_URL=$(curl -sH "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
"https://api.figma.com/v1/images/$FILE_KEY?ids=$icon_id&format=svg" | \
jq -r '.images | to_entries[0].value')
# Download
NAME=$(echo $icon_id | tr ':' '-')
curl -s "$SVG_URL" > "$OUTPUT_DIR/$NAME.svg"
echo "Exported: $NAME.svg"
done
figma.com/file/FILEKEY/...