This is the heavyweight workflow for building full Figma screens from code or descriptions while respecting your design system. Instead of drawing rectangles with hardcoded hex values, it discovers existing components through Code Connect files, searches library assets, and assembles pages section by section using proper component instances and variable tokens. The workflow is strict about sequencing: you discover components first, then build incrementally. It includes a parallel path for web apps that captures pixel-perfect screenshots via generate_figma_design while simultaneously building with proper components, then reconciles the two. The result is screens that stay linked to your design system rather than becoming one-off snowflakes. Expects you already have a published component library and knows you'll need figma-use loaded alongside it.
npx skills add https://github.com/figma/mcp-server-guide --skill figma-generate-design