Agent skill

figma

Tool for fetching Figma design data and downloading images.

View SKILL.md on GitHub Repository
Stars 1
Forks 0

Install this agent skill to your Project

npx add-skill https://github.com/rakibdev/dotfiles/tree/main/home/.config/ai/skills/figma

SKILL.md

Environment

  • FIGMA_ACCESS_TOKEN - Personal access token from Figma settings

Usage

Get Node Data

bash
bun scripts/get-node.ts "<figmaUrl>" [depth]
bun scripts/get-node.ts "<fileKey>" [nodeId] [depth]

Examples

bash
# Get node from URL (preferred)
bun scripts/get-node.ts "https://www.figma.com/design/abc123/MyFile?node-id=825-17286"

# Limit depth for overview
bun scripts/get-node.ts "https://www.figma.com/design/abc123/MyFile?node-id=825-17286" 2

# Get entire file (no node-id in URL)
bun scripts/get-node.ts "https://www.figma.com/design/abc123/MyFile" 2

# Raw args (fileKey + nodeId)
bun scripts/get-node.ts "abc123" "825-17286" 3

Download Image

bash
bun scripts/download-image.ts "<figmaUrl>" "<outputPath>" [format] [scale]
bun scripts/download-image.ts "<fileKey>" "<nodeId>" "<outputPath>" [format] [scale]

Examples

bash
# Download from URL (preferred)
bun scripts/download-image.ts "https://www.figma.com/design/abc123/MyFile?node-id=825-17286" "./assets/card.png"

# Download as SVG
bun scripts/download-image.ts "https://www.figma.com/design/abc123/MyFile?node-id=100-200" "./assets/icon.svg" svg

# PNG at 3x scale
bun scripts/download-image.ts "https://www.figma.com/design/abc123/MyFile?node-id=100-200" "./assets/hero.png" png 3

Tips

  • Use depth 1-2 for initial exploration to understand file structure
  • Default depth: unlimited (fetches all nested children)
  • File data cached in ~/.cache/figma/ for 3 days to avoid rate limits
  • Use IMAGE-SVG type nodes for icons/vectors, download as SVG
  • For photos/complex images, download as PNG at 2x scale (default)

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

rakibdev/dotfiles

valibot

Valibot schema validation for backend and frontend forms.

1 0
Explore
rakibdev/dotfiles

vue

Vue coding style and best practices.

1 0
Explore
rakibdev/dotfiles

tailwind

Tailwind CSS styling conventions.

1 0
Explore
rakibdev/dotfiles

websearch

Search Google

1 0
Explore
rakibdev/dotfiles

github

Fetch GitHub URLs, repos, issues, pull requests, code search

1 0
Explore
rakibdev/dotfiles

shadcn

shadcn/ui component library conventions.

1 0
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results