skills.rest
warpdotdev
warpdotdevOFFICIAL
Explore all skills by this author →
WebsiteGitHub

figma-generate-design

Automates creation and updating of full-page screens in Figma using published design system components and tokens.

64.1k|5.4k|Updated Jul 8, 2021
Search Tags:#figma#tokens#ui-design#workflows#design-system#component-instances
One-click install
npx skills add https://github.com/warpdotdev/warp --skill figma-generate-design-warpdotdev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-generate-design
Source: https://github.com/warpdotdev/warp/tree/main/resources/bundled/mcp_skills/figma/figma-generate-design
Command: npx skills add https://github.com/warpdotdev/warp --skill figma-generate-design-warpdotdev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill enables teams to create or update full-page screens in Figma by reusing the published design system, components, tokens, and styles, rather than drawing primitives manually. It helps ensure visual consistency across projects and accelerates hand-off between developers and designers.

Core Features & Use Cases

  • Reuse design system components, variables, and styles to assemble screens rather than building from scratch.
  • Discover and bind design tokens (colors, spacing, typography) to layout sections, ensuring consistency with the design system.
  • Use case: generate a new app page by composing published components and tokens, then iterate with updates to match evolving specs.

Quick Start

Provide a Figma file URL or key and run the workflow to build or update a full page using design system components.

Frequently Asked Questions about figma-generate-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate full-page Figma screens from code using an existing design system?▼

To generate Figma screens from code, you provide a target Figma file URL or key to the workflow, which then assembles full-page layouts by reusing your published design system components, variables, and styles.

Can I automatically apply design tokens and component instances to Figma UI layouts?▼

Yes, you can automatically apply design tokens and component instances by loading existing Figma variables, text styles, and effect styles via their keys to bind colors, spacing, and typography to layout sections.

What do I need to connect to Figma and automate UI design workflows?▼

To automate UI design workflows, you need a connected Figma MCP, a target Figma file URL or file key, and access to design system libraries to load components and variables.

How do I update Figma component instances to match evolving UI specs?▼

You update Figma component instances by running the workflow against your target file, which modifies the assembled screens by rebinding design tokens and swapping published components to match new specifications.

Does generating Figma screens from code work for both web and mobile interfaces?▼

Generating Figma screens from code works for both web and mobile interfaces, applying consistent design tokens to required UI workflows including headers, navigation, and content grids.

Why use design system tokens to compose Figma screens instead of drawing primitives manually?▼

Using design system tokens to compose Figma screens ensures visual consistency across projects and accelerates hand-off between developers and designers by reusing published components rather than drawing primitives manually.

Related Skills

Explore More Design & Creative Skills→
ahandselahandsel
1

figma-generate-design

Generate Figma screens from code and UI descriptions using design system components.

Community
Advanced
idontcarlidontcarl

figma-generate-design

Translate UI specifications into Figma screens using design system components.

Community
Advanced
tankpkgtankpkg
1

@tank/figma-to-code

Translate Figma designs into CSS and component structures.

Official
Advanced
xlelibertyxleliberty

figma-generate-design

Translate application pages into Figma screens using design system components.

Community
Advanced