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. This Skill assembles composed Figma views from the published design system so screens stay linked to real components, variables, and styles. ## Core Features & Use Cases - Design system discovery: Resolves component keys from Code Connect files, existing screens, or library search, plus variables and text/effect styles, before building anything. - Section-by-section assembly: Creates a wrapper frame and builds each section in its own use_figma call, binding variables and importing component instances instead of hardcoding values. - Parallel pixel reference: Runs generate_figma_design alongside the build for web apps to capture exact layout and transfer image fills via imageHash. - Use Case: Convert a React settings modal into Figma by resolving the Button and Input component sets from Code Connect, binding spacing and color variables, then validating each section with screenshots. ## Quick Start Take this settings page from my React app and build it in Figma using our design system components.
