What file formats can I export from Figma?

The skill supports exporting frames and components as PNG, JPG, SVG, and PDF files, with configurable scaling from 1x to 4x.

Does this skill require a paid Figma account?

No, it works with the Figma REST API which is available to free accounts, though rate limits vary depending on your Figma plan.

How do I authenticate Figma Analyzer?

You must obtain a Figma Personal Access Token from your Figma Account Settings and set it as FIGMA_ACCESS_TOKEN in your environment or a .env file.

Can I extract specific frames instead of the whole file?

Yes, you can target specific elements by providing a URL containing a node-id or by passing specific node IDs through the command-line arguments.

What design tokens does the skill capture?

It extracts comprehensive design data including color palettes, typography styles (font family, weight, size), effects like shadows and blurs, and layout grids.

Figma Analyzer

Name: Figma Analyzer
Author: vneseyoungster

byvneseyoungster

•

デザインツール

Extracts high-fidelity design assets, metadata, and design tokens directly from Figma files via the REST API.

概要

Figma Analyzer is a specialized Claude Code skill designed to bridge the gap between UI/UX design and frontend development. It enables Claude to programmatically access Figma files to export frames or components as images, retrieve hierarchical metadata, and extract design tokens like color palettes and typography. By automating the retrieval of design specifications, it streamlines UI research and implementation, especially when paired with multimodal AI for visual analysis and design-to-code workflows.

主な機能

Detailed metadata retrieval for file structure, node properties, and version history.
Multi-format asset export (PNG, SVG, JPG, PDF) with configurable scaling up to 4x.
Smart Figma URL parsing for targeting specific frames, components, or entire files.
Automated extraction of design tokens including colors, typography, and effect styles.
7 GitHub stars
Seamless integration with multimodal AI workflows for comprehensive visual UI research.

ユースケース

Syncing Figma design tokens directly into CSS or JSON for design system maintenance.
Automating the export of UI assets for frontend development and project documentation.
Conducting deep UI audits by combining Figma metadata with visual AI analysis.

概要

主な機能

Detailed metadata retrieval for file structure, node properties, and version history.
Multi-format asset export (PNG, SVG, JPG, PDF) with configurable scaling up to 4x.
Smart Figma URL parsing for targeting specific frames, components, or entire files.
Automated extraction of design tokens including colors, typography, and effect styles.
7 GitHub stars
Seamless integration with multimodal AI workflows for comprehensive visual UI research.

ユースケース

Syncing Figma design tokens directly into CSS or JSON for design system maintenance.
Automating the export of UI assets for frontend development and project documentation.
Conducting deep UI audits by combining Figma metadata with visual AI analysis.