What problem does it solve? Implementing UI from Figma often degrades into screenshot guessing, duplicated tokens, and lookalike components that ignore the design system. This Skill uses the official Figma MCP to pull structured design context—hierarchy, variables, components, Code Connect mappings, and assets—so implementations preserve actual design intent. ## Core Features & Use Cases - Design-to-code workflow: Resolve exact frames or selections, retrieve layout, spacing, typography, and variables, then build reusable components that match Figma semantics. - Design-system authority resolution: Decide whether Figma or code is the source of truth when they disagree, and report drift instead of inventing near-duplicate tokens. - Code-to-Figma writes: When the MCP seat allows, write native editable Figma structures and reuse existing components, styles, and variables. - Use Case: A developer receives a Figma handoff link for a new settings page. The Skill retrieves the exact frame's variables and Code Connect mappings, reuses the repository's existing tokens and components, and verifies the rendered result in the browser against the intended frame. ## Quick Start Use the Figma MCP to retrieve the design context for this Figma frame link and implement it as a component using our existing design tokens.
