figma-generate-design

Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code', 'convert this modal/dialog/drawer/panel to Figma'. This is the preferred workflow skill whenever the user wants to build or update a full page, modal, dialog, drawer, sidebar, panel, or any composed multi-section view in Figma from code or a description. Discovers design system components, variables, and styles from Code Connect files, existing screens, and library search, then imports them and assembles views incrementally section-by-section using design system tokens instead of hardcoded values. If the user wants to create new reusable components or variants, use figma-use directly. If the user wants to write Code Connect mappings, switch to figma-code-connect.

Blank image placeholders — if images are missing, you need to transfer them from the generatefigmadesign capture (see below) 2. Identify which sections need updating and which can stay. 3. For each section that needs changes: Always search before building. The design system likely has the component, variable, or style you need. Manual construction and hardcoded values should be the exception, not the rule. Componentize by default. Build repeated or reusable elements as a component once, then place instances. Do not ship a flat tree of one-off frames that needs a second "make it componentized" pass. Configuration keys: ABC123.

Run: npx -y skills add https://github.com/figma/mcp-server-guide --skill figma-generate-design --agent claude-code — the source lives at github.com/figma/mcp-server-guide.