Figma Skill

figma skill

A [Claude Code](https://docs.claude.com/claude-code) skill for working with Figma designs. Cache-first — fetch a file once, then browse locally with no repeated API hits. Includes multimodal tools (screenshots, contact sheets) and design-system audits (tokens, usage).

Install

Clone into your Claude Code skills directory:

git clone  ~/.claude/skills/figma

Then add a [Figma personal access token](https://www.figma.com/developers/api#access-tokens) to `~/.claude/settings.json`:

{
  "env": {
    "FIGMA_API_KEY": "figd_..."
  }
}

For OAuth instead, set `FIGMA_OAUTH_TOKEN`.

Cache location defaults to `~/.claude/skills/figma/cache/`. Override with `FIGMA_CACHE_DIR=/path/to/cache`.

Commands

All via `uv run --with pyyaml,Pillow ~/.claude/skills/figma/scripts/figma.py `.

Command	What it does	API cost
fetch URL	Cache the full file + indexes (one-time)	1 heavy /files call
status URL	Cache summary (file name, counts, fetch time)	0
pages URL	List canvases with frame counts (optional --sheet)	0 / N renders
frames URL	Top-level frames grouped by page	0
outline URL [--node-id ID]	Indented tree of navigable nodes	0
search URL QUERY [--type FRAME,...]	Grep node names and text content	0
node URL --node-id ID	Simplified YAML for one subtree (size-gated at 500KB)	0
screenshot URL --node-id ID	Render a node as PNG (cached)	1 /images call
sheet URL --node-id PARENT_ID	Contact-sheet PNG of direct children	1 batched /images call
reveal URL --node-id ID	Name + path + screenshot + outline + text	0–1
text URL [--node-id ID]	Extract all TEXT content from a subtree	0
export URL --node-id ID [--out DIR]	Bundle screenshot + YAML + text + assets + README	0–2
tokens URL	Color palette + typography usage report	0
usage URL	Count component instances across the fi