Skills
.Work. You
Rest

figma-css-json

Community

Extract Figma CSS as JSON.

Design & Creative#css#figma#design tokens#json#ui design#component extraction
Authoracabreragnz
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill automates the extraction of CSS properties from Figma designs, organizing them into structured JSON for easier integration into development workflows.

Core Features & Use Cases

  • CSS Property Extraction: Retrieves CSS properties like colors, typography, and layout from Figma nodes.
  • Structured JSON Output: Organizes extracted design tokens by component parts (e.g., label, input, icon).
  • Use Case: When a user provides a Figma URL for a UI component, this Skill can extract its design specifications (sizes, colors, typography) into a JSON format, grouped by visual elements like labels, inputs, and icons, and identify any discrepancies with Tailwind CSS.

Quick Start

Use the figma-css-json skill to extract CSS properties from the Figma URL https://www.figma.com/file/example.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: figma-css-json
Download link: https://github.com/acabreragnz/dotfiles/archive/main.zip#figma-css-json

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.