What problem does it solve? Translating an application page, modal, or multi-section view into Figma by hand produces disconnected frames with hardcoded colors and placeholder text that drift from the design system. This Skill assembles composed Figma views from published design system components, variables, and styles so the result stays linked and updatable. ## Core Features & Use Cases - Design system discovery: Resolves component keys from Code Connect files, existing screens, and library search, plus variables and text/effect styles, before any canvas mutation. - Incremental section-by-section assembly: Creates a wrapper frame first, then builds each section in its own use_figma call with component instances, bound variables, and applied styles, validating with screenshots after each step. - Parallel pixel-reference workflow: Runs generate_figma_design alongside use_figma for web apps to capture exact layout and rasterized images, then transfers image hashes into the design system output. - Use Case: Given a React settings modal, the Skill finds the Button and Input component keys via Code Connect, imports them, binds spacing and color variables, overrides text via setProperties, and produces a Figma modal matching the code. ## Quick Start Take this settings page from my React app and build it in Figma using our published design system components.
