Figma/figma-generate-design — Agent Skills | officialskills.sh
officialskills.sh
...
Back to skills

figma-generate-design

officialdesign

Translates application pages, views, and multi-section layouts into Figma screens by composing design system component instances and tokens.

FigmaFigma
View all Figma skills →

Setup & Installation

npx skills add https://github.com/figma/mcp-server-guide --skill figma-generate-design
or paste the link and ask your coding assistant to install it
https://github.com/figma/mcp-server-guide/tree/main/skills/figma-generate-design
View on GitHub

What This Skill Does

Translates application pages, views, and multi-section layouts into Figma screens by composing design system component instances and tokens. Works alongside figma-use to handle the screen-building workflow rather than drawing primitives with hardcoded values.

Builds screens from existing design system components and tokens rather than recreating layouts from scratch, so Figma files stay consistent with the live design system instead of drifting into one-off values.

When to use it

  • Pushing a coded landing page into Figma as a design system-based screen
  • Updating an existing Figma screen to match changes in the application UI
  • Building a multi-section product page in Figma from a written description
  • Syncing a dashboard view from code into Figma for design review
  • Converting an app's onboarding flow into Figma screens using published components

Similar Skills

gif-sticker-maker

Takes a photo of a person, pet, object, or logo and generates 4 animated GIF stickers in Funko Pop / Pop Mart figurine style.

wpds

Assists with building UI components and interfaces using the WordPress Design System (WPDS).

accessibility

Audits and improves web accessibility against WCAG 2.

algorithmic-art

Generates algorithmic and generative art using p5.