Figma Generate Design
Rebuild or sync full pages, modals, and multi-section views in Figma from code or descriptions while reusing published components, variables, and styles.
Overview
Figma Generate Design is an agent skill for the Build phase that translates application pages and multi-section UI into Figma by assembling published design-system components and tokens section-by-section.
Install
npx skills add https://github.com/figma/mcp-server-guide --skill figma-generate-designWhat is this skill?
- Preferred workflow when users ask to write, push, or update full pages and composed views in Figma from code
- Discovers design-system components, variables, and styles via Code Connect, existing screens, and library search
- Imports system pieces and assembles layouts incrementally section-by-section
- Uses design tokens instead of hardcoded colors, spacing, and typography
- Pairs with figma-use for Figma MCP tasks involving translation from application UI
- section-by-section assembly workflow
- supports pages, modals, dialogs, drawers, sidebars, and panels
Adoption & trust: 2.5k installs on skills.sh; 1.6k GitHub stars; 2/3 security scanners passed (skills.sh audits); trending (+100% hot-view momentum).
What problem does it solve?
You have working UI in code or a spec but no Figma screen that reuses your library, so reviews drift toward one-off mocks.
Who is it for?
Solo builders syncing marketing or product screens to Figma after Code Connect or a mature component library is in the file.
Skip if: One-off icon tweaks or tasks with no Figma design system, variables, or reusable components to discover.
When should I use this skill?
User wants to write to Figma, create in Figma from code, push a page, build or update screens, or convert composed views using the design system.
What do I get? / Deliverables
You get an incremental, design-system-faithful Figma composition aligned to code or description instead of primitive shapes with hardcoded values.
- Assembled Figma frames per section
- Imported design-system components and token-backed styles
Recommended Skills
Journey fit
Screen and view assembly in Figma is core product UI work during the build phase before handoff and ship polish. The skill targets composed interfaces—landing pages, drawers, dialogs—not generic API wiring, so it belongs on the frontend shelf.
How it compares
Use this structured design-system assembly workflow instead of dumping raw screenshots or drawing ad-hoc frames in chat.
Common Questions / FAQ
Who is figma-generate-design for?
Indie builders and small teams using Figma MCP who need full pages, modals, and panels rebuilt from code or descriptions with real components and tokens.
When should I use figma-generate-design?
During build when you say write to Figma, push a page from code, build a landing page in Figma, or update a screen to match the app; also when handing UI to design review before ship.
Is figma-generate-design safe to install?
Review the Security Audits panel on this Prism page before enabling MCP access to Figma files and design libraries in your workspace.
Workflow Chain
Requires first: figma use
SKILL.md
READMESKILL.md - Figma Generate Design
# Build / Update Screens and Views from Design System Use this skill to create or update **screens, views, and multi-section UI containers** in Figma by **reusing the published design system** — components, variables, and styles — rather than drawing primitives with hardcoded values. This includes full pages, modals, dialogs, drawers, sidebars, panels, and any composed view with multiple sections. The key insight: the Figma file likely has a published design system with components, color/spacing variables, and text/effect styles that correspond to the codebase's UI components and tokens. Find and use those instead of drawing boxes with hex colors. **MANDATORY**: You MUST also load [figma-use](../figma-use/SKILL.md) before any `use_figma` call. That skill contains critical rules (color ranges, font loading, etc.) that apply to every script you write. **Always pass `skillNames: "figma-generate-design"` when calling `use_figma` as part of this skill.** This is a logging parameter — it does not affect execution. ## Skill Boundaries - Use this skill when the deliverable is a **composed Figma view** (new or updated) — full-page screens, modals, dialogs, drawers, sidebars, panels, or any multi-section container — built from design system component instances. - If the user wants to create **new reusable components or variants**, use [figma-use](../figma-use/SKILL.md) directly. - If the user wants to write **Code Connect mappings**, switch to [figma-code-connect](../figma-code-connect/SKILL.md). ## Prerequisites - Figma MCP server must be connected - The target Figma file must have a published design system with components (or access to a team library) - User should provide either: - A Figma file URL / file key to work in - Or context about which file to target (the agent can discover pages) - Source code or description of the screen/view to build/update ## Parallel Workflow with generate_figma_design (Web Apps Only) When building a screen from a **web app** that can be rendered in a browser, the best results come from running both approaches in parallel: 1. **In parallel:** - Start building the screen using this skill's workflow (use_figma + design system components) - Run `generate_figma_design` to capture a pixel-perfect screenshot of the running web app 2. **Once both complete:** Update the use_figma output to match the pixel-perfect layout from the `generate_figma_design` capture. The capture provides the exact spacing, sizing, and visual treatment to aim for, while your use_figma output has proper component instances linked to the design system. If the capture contains images, transfer them to your use_figma output by copying `imageHash` values from the capture's image fills (see Step 5 for details). 3. **Once confirmed looking good:** Delete the `generate_figma_design` output — it was only used as a visual reference. This combines the best of both: `generate_figma_design` gives pixel-perfect layout accuracy, while use_figma gives proper design system component instances that stay linked and