figma-generate-design

Turn app screens into editable Figma views.

UI design

What it does

Creates or updates editable, multi-section Figma views using components, variables, and styles from a published design system.

When to use it

Use when creating or updating a composed Figma view such as a page, modal, drawer, sidebar, or panel.

Give it a target Figma file and source code or a description; it creates or updates the requested view in Figma.

What you provide

This skill

Figma

Write

Creates and updates Figma views (irreversible)

Figma files and libraries

Read

Reads Figma files and libraries

running web app

Read

Captures the running web app

The Figma MCP server must be connected.

The target Figma file must provide a published design system or access to a team library.

The agent must load figma-use before making any use_figma call.