skills.rest
aydenden
aydendenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

figma

Retrieve Figma file structure, node details, and style metadata via REST API.

Updated Jun 17, 2018
Search Tags:#automation#design#api#figma#tokens#styles
One-click install
npx skills add https://github.com/aydenden/dotfiles --skill figma
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma
Source: https://github.com/aydenden/dotfiles/tree/main/.claude/skills/figma
Command: npx skills add https://github.com/aydenden/dotfiles --skill figma

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires curl, jq, and includes scripts (resource) components.

What problem does it solve?

Designers and developers often manually inspect Figma files to understand structure, nodes, and styles. This Skill automates that discovery by using the Figma REST API to fetch file structure, node details, and style data, requiring only a FIGMA_TOKEN.

Core Features & Use Cases

  • File information: Retrieve the full file structure, metadata, and version history.
  • Node information: Query details about specific nodes (frames, components, groups) including position and size.
  • Style information: Fetch color, text, and effect styles to support design system alignment.
  • Use Case: Quickly audit a design library by exporting all node and style metadata for a design system doc.

Quick Start

Use the Figma skill to fetch data for a file by running: bash .claude/skills/figma/scripts/get-file.sh <FILE_KEY>

Frequently Asked Questions about figma

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract design tokens and styles from a Figma file?▼

Use the Figma REST API to fetch style metadata including colors, typography, and effects. This Skill retrieves all style data from your file, outputting structured JSON that you can process with jq to isolate tokens for design system documentation.

Can I automate Figma file inspection without manual clicking?▼

Yes. Provide your FIGMA_TOKEN and file key to retrieve file structure, node details, and style information via API. The Skill handles authentication and REST calls, returning complete metadata suitable for audits and handoffs.

What information can I get about Figma nodes and components?▼

Retrieve detailed node information including frames, components, and groups with position, size, and hierarchy data. The Skill queries the Figma API to surface component inventory and structural details for design system analysis across files of any size.

How do I set up API access to my Figma files?▼

Generate a FIGMA_TOKEN from your Figma account settings and provide your file key. The Skill uses curl to authenticate against the Figma REST API endpoints and returns JSON output compatible with jq-based processing.

Can I use this for design-to-developer handoff?▼

Yes. Export file structure, node metadata, and style information to create developer-ready design documentation. The Skill generates structured JSON output that bridges design and development workflows.

Does this work with large or complex Figma files?▼

The Skill handles files of varying sizes and respects Figma API rate limits. It retrieves file information, node details, and styles in structured format; processing large exports requires jq for filtering and transformation.

Related Skills

Explore More Design & Creative Skills→
vm0-aivm0-ai
76

figma

Accesses Figma REST API to read files, export images, and retrieve metadata.

Official
Intermediate
ZiadNagarZiadNagar

ui-design-system

Generate design tokens for colors, typography, and spacing with JSON, CSS, or SCSS exports.

Community
Intermediate
superfhpsuperfhp

airtable

Interact with the Airtable REST API using curl for CRUD operations.

Community
Intermediate
AradotsoAradotso
3

sunnyside-figma-context-mcp

Extract Figma design data as JSON for AI development workflows.

Official
Advanced