{"enrichment":{"faq":[{"a":"figma-implement-design connects to the Figma MCP server to extract design context, visual references, and specifications directly from your Figma file. It then translates those designs into production-ready code with pixel-perfect accuracy, mapping design tokens and integrating with your project's design system and component libraries to ensure the final UI matches your Figma specs exactly.","q":"How does figma-implement-design convert Figma design to code?"},{"a":"Yes. figma-implement-design automates component generation from Figma nodes using the MCP workflow, translating Figma designs into React components with 1:1 visual fidelity. The skill extracts design context and assets, then implements components that integrate seamlessly with your existing project conventions and design systems.","q":"Can figma-implement-design generate React components from Figma?"},{"a":"figma-implement-design extracts design tokens and specifications from your Figma file and maps them into your production code. This ensures consistent styling across your implementation and allows you to leverage Figma's design system directly in your codebase, whether you're using Tailwind, CSS, or other styling approaches.","q":"What does figma-implement-design do with design tokens?"},{"a":"figma-implement-design validates the implemented UI against your Figma designs for layout and styling accuracy, maintaining 1:1 visual fidelity. It handles asset downloads, design context extraction, and precise specification mapping to guarantee your production code matches Figma's visual requirements exactly.","q":"How does figma-implement-design ensure pixel-perfect implementation?"},{"a":"Yes. figma-implement-design integrates Figma designs with your project's design systems and component libraries, ensuring that generated code follows your existing conventions and reuses established components. This keeps your implementation consistent with your broader design infrastructure.","q":"Can figma-implement-design integrate with design systems?"},{"a":"figma-implement-design extracts design context, visual references, specifications, and assets from your Figma file. It downloads necessary assets and maps design tokens to enable complete implementation, supporting the full workflow from design extraction through production-ready code generation.","q":"What assets can figma-implement-design extract from Figma?"}],"shadow_tags":["design-to-code","figma-automation","visual-fidelity","component-generation","design-system-sync","mcp-integration","pixel-perfect","asset-management","design-tokens","workflow-automation"],"summary_rewrite":"This skill translates Figma designs into production-ready code by connecting to the Figma MCP server, extracting design context and visual references, and implementing components with 1:1 visual fidelity. It handles design token mapping, asset downloads, and project convention integration to ensure the final UI matches Figma specs exactly."},"files":[{"bytes":11841,"path":"bundled/skills/figma-implement-design/SKILL.md","sha256":"7e140497d79b3be84b897796c27761662e89c74bcd2d3b1e9396a92c9a6d86ec","url":"https://skillfed.io/files/foryourhealth111-pixel/Vibe-Skills/figma-implement-design/bd370b93/SKILL.md"}],"id":"foryourhealth111-pixel/Vibe-Skills/figma-implement-design","links":{"html":"https://skillfed.io/foryourhealth111-pixel/Vibe-Skills/figma-implement-design","md":"https://skillfed.io/foryourhealth111-pixel/Vibe-Skills/figma-implement-design.md","repo":"https://github.com/foryourhealth111-pixel/Vibe-Skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":184,"language":"Python","last_updated":"2026-07-22","license":"Apache-2.0","name":"figma-implement-design","publisher":"foryourhealth111-pixel","stars":2494},"relations":{"similar":[{"id":"openai/skills/figma-implement-design"},{"id":"tech-leads-club/agent-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":"foryourhealth111-pixel","repo":"Vibe-Skills","skill":"figma-implement-design"},"version":"bd370b93"}