{"enrichment":{"faq":[{"a":"figma-implement-design extracts design context, assets, and visual references directly from your Figma file, then translates them into production-ready application code that matches your specifications pixel-for-pixel. The skill validates every implementation against the original design to ensure complete visual parity and follows your project's conventions and design system throughout the process.","q":"How does figma-implement-design convert Figma designs to code?"},{"a":"Yes. figma-implement-design is built to convert Figma designs into production-ready application code with exact visual fidelity. It implements Figma components and frames using your project design system conventions, translates design tokens and layout specifications into working code, and validates the implemented UI against Figma screenshots for pixel-perfect accuracy.","q":"Can figma-implement-design turn Figma into production code?"},{"a":"figma-implement-design translates Figma design tokens and layout specifications into working code that integrates seamlessly with your application. It respects your project's design system conventions, ensuring that colors, typography, spacing, and other token values are accurately reflected in the generated code.","q":"What does figma-implement-design do with design tokens?"},{"a":"figma-implement-design validates implemented UI against Figma screenshots to maintain pixel-perfect accuracy. By comparing the generated code output directly against your original design, the skill confirms that every visual element matches your Figma specifications before delivering production-ready code.","q":"How does figma-implement-design ensure visual parity?"},{"a":"Yes. figma-implement-design implements Figma components and frames using your project design system conventions. It can work with individual components, entire frames, and design system structures, translating them into code that follows your established patterns and standards.","q":"Does figma-implement-design support component implementation?"},{"a":"figma-implement-design integrates the Figma MCP server to retrieve structured design context and assets directly from your Figma files. This integration enables reliable access to design specifications, node IDs, and visual references needed to generate accurate, production-ready code.","q":"What role does the Figma MCP server play in figma-implement-design?"}],"shadow_tags":["design-to-code","figma-integration","pixel-perfect-ui","component-generation","design-system-sync","visual-fidelity","mcp-workflow","ui-implementation"],"summary_rewrite":"Turn Figma designs into production-ready application code that matches your specifications pixel-for-pixel. This skill extracts design context, assets, and visual references from Figma, then translates them into code following your project's conventions and design system. Validates every implementation against the original design to ensure complete visual parity."},"files":[{"bytes":14218,"path":"figma-implement-design/SKILL.md","sha256":"78178c0d679f3a5b23831bdf68d497f1aaf0ffe6f14e6c3bb77e1528727ee00d","url":"https://skillfed.io/files/PracticalSwan/agent-skills/figma-implement-design/45f0e686/SKILL.md"}],"id":"PracticalSwan/agent-skills/figma-implement-design","links":{"html":"https://skillfed.io/PracticalSwan/agent-skills/figma-implement-design","md":"https://skillfed.io/PracticalSwan/agent-skills/figma-implement-design.md","repo":"https://github.com/PracticalSwan/agent-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":2,"language":"Python","last_updated":"2026-07-11","license":"MIT","name":"figma-implement-design","publisher":"PracticalSwan","stars":6},"relations":{"similar":[{"id":"foryourhealth111-pixel/Vibe-Skills/figma-implement-design"},{"id":"openai/skills/figma-implement-design"},{"id":"tech-leads-club/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":"PracticalSwan","repo":"agent-skills","skill":"figma-implement-design"},"version":"45f0e686"}