Can this skill modify my Figma files?

No, the skill operates strictly in read-only mode, ensuring that your original design files remain untouched and secure.

What types of design data can I extract?

You can extract color palettes, typography styles, spacing systems, layout grids, component lists, and frame hierarchies.

How do I fix a 403 Forbidden error?

A 403 error usually means the file is private. Ensure the Figma file link is shared or that your access token has the necessary permissions.

Where are the exported images stored?

Images and assets are saved to a local 'storage/figma/' directory within your project, separated from public assets for better management.

Does this skill require a Figma account?

Yes, you need a Figma Personal Access Token (available for free in your Figma settings) to authenticate with the API.

Figma Design System Parser

Name: Figma Design System Parser
Author: giobi

bygiobi

0•

デザインツール

Extracts design system tokens, assets, and components from Figma files via the REST API to accelerate frontend development workflows.

The Figma Design System Parser skill bridges the gap between design and development by allowing Claude to programmatically access and interpret Figma files. It extracts critical design data such as color palettes, typography, spacing, and layout grids, providing a structured inventory of tokens and components. Beyond data extraction, the skill can export specific frames as high-resolution images and format design specifications for specialized frameworks like Pressless, making it an essential tool for developers translating UI/UX designs into production-ready code.

主な機能

01Automatic extraction of hex colors, font families, and typography scales

02Local asset storage management for exported design elements

03Comprehensive inventory of components and layout grid specifications

04Support for Pressless design system formatting and integration

05High-resolution frame exporting to PNG with customizable scaling

060 GitHub stars

ユースケース

01Conducting design audits to ensure consistency across colors, fonts, and spacing

02Generating CSS variables or Tailwind configurations directly from a Figma URL

03Automating the download and organization of UI assets for frontend projects

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add giobi/claude-skills figma

For use in Claude.ai and ChatGPT