figma

rakibdev's avatarfrom rakibdev

Tool for fetching Figma design data and downloading images.

⭐1stars🔀0forks📁View on GitHub🕐Updated Jan 3, 2026
[Visual Content Workflows]

When & Why to Use This Skill

This Claude skill streamlines the design-to-development workflow by enabling automated extraction of Figma design nodes and high-quality image assets. It allows users to programmatically fetch file structures, explore design hierarchies, and export components in various formats (PNG, SVG) and scales, significantly reducing manual export tasks and bridging the gap between design tools and local development environments.

Use Cases

  • Automated Asset Export: Quickly download icons as SVGs or UI components as @2x PNGs directly into a project folder using Figma URLs, eliminating manual 'Export' clicks.
  • Design Audit & Exploration: Fetch the node structure of a Figma file to analyze layout hierarchies, check layer nesting, or verify naming conventions without opening the Figma web interface.
  • Design-to-Code Integration: Use the fetched node data to provide context for LLMs to generate CSS, React components, or design tokens based on live Figma specifications.
  • Batch Image Processing: Programmatically download multiple design assets from different pages or files for use in marketing materials, documentation, or application updates.
namefigma
descriptionTool for fetching Figma design data and downloading images.
patternfigma\.com/design/

Environment

  • FIGMA_ACCESS_TOKEN - Personal access token from Figma settings

Usage

Get Node Data

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

Examples

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

# Limit depth for overview
bun {dir}/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 {dir}/scripts/get-node.ts "https://www.figma.com/design/abc123/MyFile" 2

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

Download Image

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

Examples

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

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

# PNG at 3x scale
bun {dir}/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)