skills.rest
figma
figmaOFFICIAL
Explore all skills by this author →
WebsiteGitHub

figma-generate-design

Build full-page Figma UIs by importing design system components, variables, and styles.

1.9k|171|Updated Aug 5, 2025
Search Tags:#design system#UI design#Figma#Automation#Code-to-Figma
One-click install
npx skills add https://github.com/figma/mcp-server-guide --skill figma-generate-design-figma
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-generate-design
Source: https://github.com/figma/mcp-server-guide/tree/main/skills/figma-generate-design
Command: npx skills add https://github.com/figma/mcp-server-guide --skill figma-generate-design-figma

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill solves the problem of manually creating and updating complex UIs in Figma, allowing you to leverage your design system components for efficiency and consistency.

Core Features & Use Cases

  • Design System Integration: Automatically discovers and imports components, variables, and styles from your design system.
  • Full-Page UI Construction: Assemble full-page screens, modals, dialogs, drawers, and multi-section views incrementally.
  • Use Case: For product teams looking to convert existing web pages or applications into Figma designs using their design system, ensuring consistency across platforms.

Quick Start

To create a new screen in Figma based on your code or description, call the use_figma function with the skillNames parameter including 'figma-generate-design'.

Frequently Asked Questions about figma-generate-design

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

FAQPage Schema
How do I convert a web page UI into a Figma design using my design system?▼

To convert a web page UI into a Figma design, this Skill automates discovering and importing your design system components, variables, and styles to assemble full-page screens incrementally. It requires connecting the Figma MCP server and specifying a target Figma file.

Can I automatically build full-page UIs in Figma from existing code?▼

Yes, you can automatically build full-page UIs in Figma from existing code. The Skill maps your code or descriptions to imported design system components to assemble screens, modals, and multi-section views directly in Figma.

Does building UIs in Figma with this method require a specific server setup?▼

Building UIs in Figma with this automation requires the Figma MCP server to be connected and a target Figma file to be specified. This environment setup allows the system to access and apply your design system components.

What is the best way to keep Figma designs consistent with a design system when converting applications?▼

The best way to keep Figma designs consistent when converting applications is to automatically discover and import design system components, variables, and styles. This ensures that assembled full-page UIs maintain strict consistency across platforms.

How does automated UI construction handle complex layouts like modals and drawers in Figma?▼

Automated UI construction handles complex layouts in Figma by incrementally assembling full-page screens, modals, dialogs, drawers, and multi-section views. It leverages your imported design system components to build these structures efficiently.

Are there limitations when importing design system variables for full-page UI construction in Figma?▼

Limitations for importing design system variables depend on the connected Figma MCP server and the target Figma file specified. The Skill requires these prerequisites to discover and apply components, variables, and styles for UI construction.

Related Skills

Explore More Design & Creative Skills→
allofmengallofmeng
12

figma-code-connect-components

Identify unmapped Figma components and fetch matching code components for Code Connect mappings.

Community
Advanced
figmafigma
1.9k

figma-design-to-code

Convert Figma design files into code with implementation instructions.

Official
Advanced
d0d012d0d012
9

figma-design

Extract tokens, styles, and constraints from Figma design files.

Community
Advanced
MesteriisMesteriis

figma-to-code

Convert Figma design elements into code while preserving assets and fidelity.

Community
Advanced