Extract design tokens, icons, and components from Figma via REST API.
npx skills add https://github.com/oakoss/agent-skills --skill figma-developer-oakoss
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
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.
Use the figma-developer skill to extract design tokens from your Figma file and generate CSS variables.
High-intent search queries and answers about installing and using this skill.
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.
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.
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.
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.
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.
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.
TheQtCompanyRnDExtract Figma design tokens and generate QML singleton files for Qt 6 projects.
Exia-thdProfile web applications and generate k6/Artillery load testing scripts.
ydnikolaevBuild cohesive design systems and token libraries for web and mobile projects.
tech-leads-clubTranslate Figma designs into production-ready UI code via Figma MCP.
