Figma Generate Design
Use this skill alongside figma-use when the task involves translating an application...
Install
npx skills add figma/mcp-server-guide --skill figma-generate-design -g -a claude-code -y- Repository
- figma/mcp-server-guide2.1k
- Category
- Design
- Updated
- 7d ago
- License
- See repository
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- No, instructions only
What it does
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.
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 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.
HTML-to-Figma Exceptions
Use html_to_figma for initial creation in these cases:
- The input is an existing raw or static HTML document. Pass it directly to
html_to_figma. - The prompt asks to create a new design and there is no rendered UI implementation to reproduce. Create a self-contained HTML document and pass it to
html_to_figma.
If html_to_figma is unavailable, follow the existing workflow below.
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 directly.
- If the user wants to write Code Connect mappings, switch to figma-code-connect.
