# Figma Generate Design

Use this skill alongside figma-use when the task involves translating an application...

- Repository: https://github.com/figma/mcp-server-guide (2138 stars)
- Category: Design
- License: see repository
- Last updated: 2026-10-28
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add figma/mcp-server-guide --skill figma-generate-design -g -a claude-code -y`
Codex: `npx skills add figma/mcp-server-guide --skill figma-generate-design -g -a codex -y`
Cursor: `npx skills add figma/mcp-server-guide --skill figma-generate-design -g -a cursor -y`
Gemini CLI: `npx skills add figma/mcp-server-guide --skill figma-generate-design -g -a gemini-cli -y`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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.

## 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](../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

The rest: https://github.com/figma/mcp-server-guide/blob/HEAD/skills-figquery/figma-generate-design/SKILL.md