Convert Figma design data into React components, CSS, and Tailwind tokens.
npx skills add https://github.com/hoodini/ai-agents-skills --skill figma-hoodini
Please help me install this Agent Skill. Skill: figma Source: https://github.com/hoodini/ai-agents-skills/tree/main/skills/figma Command: npx skills add https://github.com/hoodini/ai-agents-skills --skill figma-hoodini
This skill automates converting Figma design data into production-ready code and tokens by interfacing with the Figma API.
Set up a Figma API token (FIGMA_TOKEN), point the tool at a Figma file (FILE_KEY), and run the generator to produce React components and tokens from the file.
High-intent search queries and answers about installing and using this skill.
To convert Figma designs to React components, this skill interfaces with the Figma API to extract design data and generate production-ready React components, CSS, or Tailwind tokens. It automates the design-to-code workflow by directly reading from your specified Figma file.
Design-to-code automation extracts design tokens and assets directly from Figma files to synchronize your design system with your codebase. This ensures that when a design updates in Figma, the corresponding tokens and components are regenerated to keep the repository in sync.
Yes, extracting Figma design data requires a Node.js environment, a valid Figma API token (FIGMA_TOKEN), and the target Figma file key. These prerequisites are necessary to authenticate and interface with the Figma API for automated code generation.
Yes, you can use this skill to generate Tailwind-ready tokens from Figma files. It extracts styles and components from the Figma API and converts them into CSS or Tailwind assets, enabling rapid prototyping and design-system synchronization.
The best way to sync design system updates is automating the extraction of Figma components and styles via the Figma API. When a design team updates a component in Figma, this skill regenerates the corresponding React components and tokens to keep your repo aligned.
Yes, you can automate Figma plugin development and design-to-code workflows to accelerate product development. By leveraging the Figma API, this skill extracts design data to build plugins and streamline the generation of production-ready code.
patternflyAnalyze Figma prototypes for PatternFly v6 conformance and generate an HTML compliance report.
HeatMarieDocument Paperclip UI components, design principles, and tokens for React projects.
aibangjuxinDevelop and test React components with TypeScript and Tailwind CSS.
jgtolentinoExtract design tokens, assets, and component structures from websites.
