{"enrichment":{"faq":[{"a":"Figma Implement Design guides you through converting Figma mockups into production-ready code. Start by extracting design context and capturing visual references from your Figma file, then apply your project's conventions to achieve 1:1 visual fidelity. The skill walks you through fetching node data, downloading assets, and validating the final UI against Figma specs to ensure your implementation matches the design exactly.","q":"How do I implement a Figma design into working code?"},{"a":"Figma Implement Design covers the complete handoff workflow from design to development. It teaches you how to interpret design specs, extract necessary assets and measurements, and understand the designer's intent. The process includes fetching node data from Figma, organizing assets for your project, and establishing checkpoints to validate that your code matches the original design specifications before deployment.","q":"What is the figma design handoff process for developers?"},{"a":"Figma Implement Design provides a structured approach to turning Figma mockups into functional code. The skill emphasizes capturing visual references, downloading design assets, and applying your project conventions consistently. By following the guidance on extracting design context and validating against specs, you'll translate Figma prototypes into production-ready implementations with accurate visual fidelity.","q":"How can I convert Figma mockups and prototypes into code?"},{"a":"Figma Implement Design establishes best practices for converting design specs to production. Key practices include extracting complete design context upfront, maintaining 1:1 visual fidelity throughout implementation, organizing and validating assets properly, and using project conventions consistently. The skill emphasizes validating your final UI against Figma specs to catch discrepancies early and ensure designs translate accurately to code.","q":"What best practices should I follow for translating Figma designs?"},{"a":"Figma Implement Design includes validation techniques to verify your code matches the original specs. After implementing your UI, download and compare assets, check measurements and spacing against Figma, and validate visual elements systematically. The skill guides you through this verification process to catch any deviations and make corrections, ensuring production-ready code that matches your Figma design precisely.","q":"How do I ensure my implementation matches the Figma design exactly?"}],"shadow_tags":["design-to-code","handoff-process","developer-workflow","ui-implementation","design-specs","prototype-execution","figma-integration","frontend-build"],"summary_rewrite":"This skill translates Figma designs into production-ready code by extracting design context, capturing visual references, and applying project conventions for 1:1 visual fidelity. It guides you through fetching node data, downloading assets, and validating the final UI against Figma specs to ensure designs match exactly."},"gist":{"api_url":"https://skillfed.io/api/skills/tech-leads-club/agent-skills/figma-implement-design.json","as_of":"2026-07-24","description":"Figma Implement Design converts Figma designs to production code with pixel-perfect accuracy using the Figma.","install":{"manual":["git clone https://github.com/tech-leads-club/agent-skills","cp -r agent-skills ~/.claude/skills/figma-implement-design"],"primary":"npx skillfed install tech-leads-club/agent-skills/figma-implement-design","version":"e1e69d65"},"kind":"skill","mirror_url":"https://skillfed.io/tech-leads-club/agent-skills/figma-implement-design.md","similar":[{"id":"openai/skills/figma-implement-design","name":"Figma Implement Design","publisher":"openai/skills","url":"https://skillfed.io/openai/skills/figma-implement-design"},{"id":"foryourhealth111-pixel/Vibe-Skills/figma-implement-design","name":"figma-implement-design","publisher":"foryourhealth111-pixel/Vibe-Skills","url":"https://skillfed.io/foryourhealth111-pixel/Vibe-Skills/figma-implement-design"},{"id":"PracticalSwan/agent-skills/figma-implement-design","name":"figma-implement-design","publisher":"PracticalSwan/agent-skills","url":"https://skillfed.io/PracticalSwan/agent-skills/figma-implement-design"},{"id":"openai/skills/figma-code-connect-components","name":"Figma Code Connect Components","publisher":"openai/skills","url":"https://skillfed.io/openai/skills/figma-code-connect-components"},{"id":"xtone/ai_development_tools/implementing-figma-to-swiftui","name":"Implementing Figma To Swiftui","publisher":"xtone/ai_development_tools","url":"https://skillfed.io/xtone/ai_development_tools/implementing-figma-to-swiftui"}],"title":"Figma Implement Design by tech-leads-club \u2014 SkillFed","use":{"when":["Figma Implement Design covers the complete handoff workflow from design to development.","Figma Implement Design provides a structured approach to turning Figma mockups into functional code."]},"what":{"lead":"Figma Implement Design converts Figma designs to production code with pixel-perfect accuracy using the Figma MCP server.","rest":"This skill translates Figma designs into production-ready code by extracting design context, capturing visual references, and applying project conventions for 1:1 visual fidelity. It guides you through fetching node data, downloading assets, and validating the final UI against Figma specs to ensure designs match exactly."}},"id":"tech-leads-club/agent-skills/figma-implement-design","install":{"mode":"external","repo":"https://github.com/tech-leads-club/agent-skills"},"links":{"html":"https://skillfed.io/tech-leads-club/agent-skills/figma-implement-design","md":"https://skillfed.io/tech-leads-club/agent-skills/figma-implement-design.md","repo":"https://github.com/tech-leads-club/agent-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":448,"language":"TypeScript","last_updated":"2026-07-24","license":"NOASSERTION","name":"Figma Implement Design","publisher":"tech-leads-club","stars":4951},"relations":{"similar":[{"id":"openai/skills/figma-implement-design"},{"id":"foryourhealth111-pixel/Vibe-Skills/figma-implement-design"},{"id":"PracticalSwan/agent-skills/figma-implement-design"},{"id":"openai/skills/figma-code-connect-components"},{"id":"xtone/ai_development_tools/implementing-figma-to-swiftui"},{"id":"Devin-AXIS/iPolloWork/figma-design-to-code"},{"id":"Aradotso/mcp-skills/figma-mcp-server"},{"id":"Devin-AXIS/iPolloWork/figma-swiftui"},{"id":"figma/mcp-server-guide/figma-swiftui"},{"id":"figma/mcp-server-guide/figma-design-to-code"}]},"slug":{"owner":"tech-leads-club","repo":"agent-skills","skill":"figma-implement-design"},"version":"e1e69d65"}