{"enrichment":{"faq":[{"a":"Figma Developer automates the conversion of Figma designs into production-ready React components. It reads your design frames directly from Figma, extracts component structures, and generates TypeScript-ready code that maintains design fidelity while following React best practices. This eliminates manual recreation and keeps your codebase synchronized with design updates.","q":"How does Figma Developer convert figma designs to react code?"},{"a":"Yes. Figma Developer extracts design tokens directly from your Figma file and syncs them as CSS variables and JSON files. This ensures your color palettes, typography scales, spacing systems, and other design decisions flow automatically into your codebase, creating a single source of truth for design consistency across teams.","q":"Can Figma Developer extract design tokens from Figma?"},{"a":"Figma Developer generates icon components and assets from Figma frames automatically. It exports SVG icons as reusable React components, preserving your design system's icon library and making icons instantly available to developers without manual export steps.","q":"Does Figma Developer generate icon components from Figma frames?"},{"a":"Figma Developer integrates with GitHub Actions to automate your entire design-to-code pipeline. Set up triggers that run whenever your Figma file updates, automatically regenerating components, tokens, and assets in your repository. This bridges the gap between designers and developers by eliminating manual handoffs and keeping code always in sync with design.","q":"How can I automate design-to-code workflow with Figma Developer?"},{"a":"Figma Developer is released under the MIT license, allowing you to use, modify, and distribute it freely in both open-source and commercial projects with minimal restrictions.","q":"What license does Figma Developer use?"}],"shadow_tags":["design-automation","token-management","component-extraction","asset-export","workflow-integration","design-system-sync","code-generation","figma-api","design-dev-bridge"],"summary_rewrite":"Figma Developer bridges design and development by extracting components, design tokens, and assets directly from Figma into production-ready code. It automates icon export as React components, syncs design decisions as CSS and JSON tokens, and generates component structures\u2014eliminating manual handoff between designers and developers."},"files":[{"bytes":16812,"path":"skills/figma-developer/SKILL.md","sha256":"60728212f5ab47affe3fc488ed3a706b7297e4817a861f3472f157d0ad73b29e","url":"https://skillfed.io/files/daffy0208/ai-dev-standards/figma-developer/aea11c18/SKILL.md"}],"id":"daffy0208/ai-dev-standards/figma-developer","links":{"html":"https://skillfed.io/daffy0208/ai-dev-standards/figma-developer","md":"https://skillfed.io/daffy0208/ai-dev-standards/figma-developer.md","repo":"https://github.com/daffy0208/ai-dev-standards"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":7,"language":"TypeScript","last_updated":"2025-12-25","license":"MIT","name":"Figma Developer","publisher":"daffy0208","stars":32},"relations":{"similar":[{"id":"hoodini/ai-agents-skills/figma"},{"id":"openai/skills/figma-code-connect-components"},{"id":"payloadcms/payload/ui4"},{"id":"openai/skills/figma-implement-design"},{"id":"foryourhealth111-pixel/Vibe-Skills/figma-implement-design"},{"id":"tech-leads-club/agent-skills/figma-implement-design"},{"id":"PracticalSwan/agent-skills/figma-implement-design"},{"id":"noemuch/bridge/extracting-design-system"},{"id":"adobe/skills/create-component"},{"id":"Mindrally/skills/figma-integration"}]},"slug":{"owner":"daffy0208","repo":"ai-dev-standards","skill":"figma-developer"},"version":"aea11c18"}