figma-developer

Extract design tokens, icons, and components from Figma via REST API.

14|5|Updated Jan 29, 2026

Search Tags:#automation #figma #design tokens #react components #ci #svg export

Ready to run

npx skills add https://github.com/oakoss/agent-skills --skill figma-developer-oakoss

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: figma-developer
Source: https://github.com/oakoss/agent-skills/tree/main/skills/figma-developer
Command: npx skills add https://github.com/oakoss/agent-skills --skill figma-developer-oakoss

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires figma-api, @svgr/core, style-dictionary, and includes references (resource) components.

What problem does it solve?

This Skill bridges the gap between design and development by automating the process of extracting design data from Figma and converting it into usable code, streamlining workflows and ensuring design consistency.

Core Features & Use Cases

Design Token Extraction: Automatically extracts colors, typography, and spacing from Figma styles and variables, converting them into CSS variables or JSON.
Icon Export: Exports icons from Figma as SVG React components, ready for use in your frontend projects.
Component Generation: Generates scaffolding for React components based on Figma node structures and variants.
CI Integration: Sets up automated workflows for continuous design synchronization in CI/CD pipelines.
Use Case: Sync your team's design tokens from Figma to your codebase automatically every night, ensuring your application's styling is always up-to-date with the latest design system changes.

Quick Start

Use the figma-developer skill to extract design tokens from your Figma file and generate CSS variables.

Frequently Asked Questions about figma-developer

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

FAQPage Schema

How do I automatically extract design tokens from Figma into CSS variables?▼

The Skill extracts design tokens from Figma by utilizing the figma-api to pull colors, typography, and spacing styles, then processes them via style-dictionary to generate CSS variables or JSON outputs for your codebase.

Can I export Figma icons as SVG React components automatically?▼

Yes, you can export Figma icons as SVG React components automatically. The Skill retrieves icon data from Figma and leverages the @svgr/core dependency to convert the raw SVGs into ready-to-use React components for your frontend projects.

What is the best way to sync my design system from Figma to a React codebase?▼

The best way to sync your design system from Figma to a React codebase is through automated extraction. This Skill bridges Figma designs to code automatically, generating design tokens, SVG icons, and React component scaffolding to ensure continuous design consistency.

Does this approach work for continuous design synchronization in CI pipelines?▼

Yes, this approach supports continuous design synchronization in CI pipelines. The Skill sets up automated workflows that extract updated Figma data and regenerate code artifacts during your CI/CD process, keeping your application styling up-to-date without manual intervention.

How do I generate React component scaffolding from Figma node structures?▼

You generate React component scaffolding from Figma node structures by using the Skill's component generation feature. It reads Figma node structures and variants via the REST API to automatically produce the foundational React component code for your design system.

What do I need to set up automated Figma design data extraction?▼

To set up automated Figma design data extraction, you need access to the Figma REST API, a Node.js environment for the style-dictionary and @svgr/core dependencies, and a CI/CD pipeline if you want continuous, scheduled design-to-code synchronization.