Figma Design Generator

Features

• Translates application code or descriptions into Figma designs
• Discovers and reuses design system components, variables, and styles
• Assembles UI views incrementally section-by-section
• Supports creation/updates of full pages, modals, dialogs, drawers, and panels
• Integrates with Figma's Code Connect for component mapping

Use Cases

• Translating a new application page or view into Figma
• Updating existing Figma screens to match code changes
• Building complex multi-section UI containers like modals or sidebars in Figma
• Ensuring design fidelity by using design system tokens instead of hardcoded values

Non-Goals

• Creating new reusable components or variants (use figma-use directly)
• Writing Code Connect mappings (use figma-code-connect)
• Generating code from Figma designs (handled by other tools/skills)
• Manual drawing of UI elements without leveraging design system tokens

Workflow

1. Understand the deliverable, identifying sections and components.
2. Collect design system keys (components, variables, styles) via Code Connect, existing screens, or search.
3. Create a wrapper frame in Figma for the view.
4. Build each UI section inside the wrapper, importing and binding design system assets.
5. Validate the full view and transfer images if applicable.
6. Update existing views by identifying, modifying, or replacing nodes.

Practices

• Design system token utilization
• Component instance reuse
• Section-by-section assembly
• Error recovery and validation

Prerequisites

• Figma MCP server connection
• Target Figma file with a published design system (or accessible library)
• Source code or description of the screen/view
• Optionally, a Figma file URL or key for context