Reads Figma design files, nodes, rendered images, and comments via the Figma REST API. Useful for extracting design tokens, implementing designs as code, and summarizing comments.
How this skill is triggered — by the user, by Claude, or both
Slash command
/acedatacloud-ai-media:figmaWhen to use
Trigger when the user shares a Figma file URL or wants to read a design — get the document tree / a specific frame, render a node to PNG/SVG to "see" it, extract styles / tokens, or read comments. Read-only. The file key comes from the Figma URL the user pastes.
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Read **Figma** via `curl + jq`. The user's OAuth bearer token is in
Read Figma via curl + jq. The user's OAuth bearer token is in
$FIGMA_TOKEN; every call needs Authorization: Bearer $FIGMA_TOKEN. Base URL:
https://api.figma.com/v1.
Failures are {"status":<code>,"err":"..."} — show err verbatim. 403 means
the token lacks the scope or the file isn't shared with the user. 404 = bad
file key.
The file key is the figma.com/file/<KEY>/... or figma.com/design/<KEY>/...
segment of a pasted URL. A node id is in ?node-id=1-23 (Figma shows 1:23;
the API also accepts 1:23).
F="https://api.figma.com/v1"; AUTH="Authorization: Bearer $FIGMA_TOKEN"
# Who am I (account card)
curl -sS -H "$AUTH" "$F/me" | jq '{handle, email}'
# File document tree (name + top-level frames). Big files: prefer /nodes below.
curl -sS -H "$AUTH" "$F/files/FILE_KEY?depth=2" \
| jq '{name, pages: [.document.children[] | {name, frames: [.children[]?.name]}]}'
KEY="FILE_KEY"
# Just the nodes you care about (faster than the whole file)
curl -sS -H "$AUTH" "$F/files/$KEY/nodes?ids=1:23,1:45" \
| jq '.nodes | to_entries[] | {id: .key, name: .value.document.name, type: .value.document.type}'
# Render nodes to images — returns temporary CDN URLs (this is the "see it" tool)
curl -sS -H "$AUTH" "$F/images/$KEY?ids=1:23&format=png&scale=2" \
| jq '.images' # { "1:23": "https://...png" }
For design-to-code, render the frame to PNG (to view) and read its node JSON (layout/fills/typography) to extract exact colors, spacing and text.
curl -sS -H "$AUTH" "$F/files/FILE_KEY/comments" \
| jq '.comments[] | {user: .user.handle, at: .created_at, message}'
# Team projects → files (needs a team id from the Figma URL /team/<id>/...)
curl -sS -H "$AUTH" "$F/teams/TEAM_ID/projects" | jq '.projects'
1-23 (dash); the API wants 1:23 (colon). Convert./images URLs are temporary — download/use them promptly, don't store.depth= limits tree traversal; omit it only for small files or you'll pull
megabytes of node JSON.npx claudepluginhub acedatacloud/skills --plugin acedatacloud-ai-mediaAutomates Figma tasks via Rube MCP/Composio: inspect files/nodes/components, extract design tokens/comments, export/render images. Use for design data extraction in code workflows.
Automates Figma operations via Composio's Figma toolkit through Rube MCP: file inspection, component extraction, image export, and design token management.
Automates Figma design file inspection, component extraction, asset export, and image rendering via Composio's Figma toolkit over MCP.