{"enrichment":{"faq":[{"a":"Figma Designer transforms your design files into comprehensive product requirements by extracting design tokens, component specifications, and layout details. The skill analyzes your Figma projects through MCP server integration and generates structured documentation including color palettes, typography systems, spacing scales, and component props ready for development handoff.","q":"How do I use Figma Designer for design?"},{"a":"Yes. Figma Designer builds and organizes design systems and components by extracting and documenting your component library specifications. It identifies reusable elements, generates component props documentation, and structures your design tokens into organized systems that development teams can directly implement.","q":"Can Figma Designer help with design system management?"},{"a":"Figma Designer extracts design tokens, component specifications, and layout details from your Figma projects. This includes color palettes, typography systems, spacing scales, and component properties. The skill generates structured documentation that bridges the gap between design and development workflows.","q":"What does Figma Designer extract from design files?"},{"a":"Figma Designer enhances collaboration by converting design files into clear, structured documentation that teams can reference. By generating comprehensive component specifications and design token documentation, it ensures designers and developers share a common understanding of design requirements and implementation details.","q":"How does Figma Designer support team collaboration?"},{"a":"Figma Designer streamlines design workflows through MCP server integration that automates the extraction and documentation process. It reduces manual handoff work by automatically generating structured component props and design token specifications, enabling faster iteration and clearer communication between design and development teams.","q":"Can Figma Designer automate design workflows?"}],"shadow_tags":["ui-ux-design","design-collaboration","prototyping-tool","design-system-management","vector-graphics","design-workflow","component-library","design-automation","mockup-creation","design-handoff"],"summary_rewrite":"Figma Designer transforms design files into comprehensive product requirements by extracting design tokens, component specifications, and layout details. It analyzes Figma projects through MCP server integration and generates structured documentation including color palettes, typography systems, spacing scales, and component props ready for development."},"gist":{"api_url":"https://skillfed.io/api/skills/zhaono1/agent-playbook/figma-designer.json","as_of":"2026-06-21","description":"Figma Designer converts Figma designs into implementation-ready specifications with visual details and design.","install":{"manual":["git clone https://github.com/zhaono1/agent-playbook","cp -r agent-playbook ~/.claude/skills/figma-designer"],"primary":"npx skillfed install zhaono1/agent-playbook/figma-designer","version":"8e648eaa"},"kind":"skill","mirror_url":"https://skillfed.io/zhaono1/agent-playbook/figma-designer.md","similar":[{"id":"patricio0312rev/skills/design-to-component-translator","name":"design-to-component-translator","publisher":"patricio0312rev/skills","url":"https://skillfed.io/patricio0312rev/skills/design-to-component-translator"},{"id":"xtone/ai_development_tools/figma-design-analyzer","name":"Figma Design Analyzer","publisher":"xtone/ai_development_tools","url":"https://skillfed.io/xtone/ai_development_tools/figma-design-analyzer"},{"id":"jamesrochabrun/skills/qa-test-planner","name":"qa-test-planner","publisher":"jamesrochabrun/skills","url":"https://skillfed.io/jamesrochabrun/skills/qa-test-planner"}],"title":"Figma Designer by zhaono1: Create and manage design projects using Figma \u2014 SkillFed","use":{"when":["Yes.","Figma Designer extracts design tokens, component specifications, and layout details from your Figma projects."]},"what":{"lead":"Figma Designer converts Figma designs into implementation-ready specifications with visual details and design tokens.","rest":"Figma Designer transforms design files into comprehensive product requirements by extracting design tokens, component specifications, and layout details. It analyzes Figma projects through MCP server integration and generates structured documentation including color palettes, typography systems, spacing scales, and component props ready for development."}},"id":"zhaono1/agent-playbook/figma-designer","install":{"mode":"external","repo":"https://github.com/zhaono1/agent-playbook"},"links":{"html":"https://skillfed.io/zhaono1/agent-playbook/figma-designer","md":"https://skillfed.io/zhaono1/agent-playbook/figma-designer.md","repo":"https://github.com/zhaono1/agent-playbook"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":10,"language":"JavaScript","last_updated":"2026-06-21","license":null,"name":"Figma Designer","publisher":"zhaono1","stars":65},"relations":{"similar":[{"id":"alinaqi/maggy/ui-mobile"},{"id":"rshankras/claude-code-apple-skills/ux-spec"},{"id":"patricio0312rev/skills/design-to-component-translator"},{"id":"mosif16/codex-Skills/design-guide"},{"id":"manutej/luxor-claude-marketplace/mobile-design"},{"id":"majiayu000/spellbook/app-ui-design"},{"id":"xtone/ai_development_tools/figma-design-analyzer"},{"id":"jamesrochabrun/skills/qa-test-planner"},{"id":"stellarlinkco/myclaude/prototype-prompt-generator"},{"id":"payloadcms/payload/ui4"}]},"slug":{"owner":"zhaono1","repo":"agent-playbook","skill":"figma-designer"},"version":"8e648eaa"}