skills.rest
flowel
flowelCOMMUNITY
Explore all skills by this author →
GitHub

figma-generate-design

Automate Figma screen creation and updates using design system tokens.

Updated Jun 12, 2026
Search Tags:#design system#UI design#Figma#Automation#screen creation
One-click install
npx skills add https://github.com/flowel/AiSkills --skill figma-generate-design-flowel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-generate-design
Source: https://github.com/flowel/AiSkills/tree/main/skills/codex/figma-generate-design
Command: npx skills add https://github.com/flowel/AiSkills --skill figma-generate-design-flowel

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill simplifies the process of creating or updating full-page screens in Figma by leveraging existing design system components and styles, reducing the need for manual UI design.

Core Features & Use Cases

  • Design System Integration: Utilizes components, variables, and styles from a published design system.
  • Automated Layout: Assembles screens incrementally section-by-section using design system tokens.
  • Workflow Automation: Streamlines the workflow for building or updating screens in Figma from code or descriptions.
  • Use Case: Ideal for developers or designers looking to create a cohesive UI/UX for an application quickly and efficiently.

Quick Start

Use the figma-generate-design skill to create a new screen in Figma based on the provided design system and source code or description.

Frequently Asked Questions about figma-generate-design

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

FAQPage Schema
How do I automate Figma screen creation using design system components?▼

Automated Figma screen creation uses design system tokens and components to assemble full-page UI layouts incrementally section-by-section. It connects to the Figma MCP server to build or update screens from code or text descriptions without manual UI design.

Do I need a published design system to generate Figma screens automatically?▼

Yes, a published design system is required to generate Figma screens automatically. The workflow relies on existing components, variables, and styles defined in the design system to ensure the assembled UI maintains visual consistency and correct token mapping.

What is the best way to update existing Figma screens with new design system tokens?▼

The best way to update existing Figma screens with new design system tokens is via incremental section-by-section assembly. This approach integrates with the Figma MCP server to apply updated styles and components while maintaining pixel-perfect layout accuracy.

Can I build Figma UI designs from source code descriptions?▼

Yes, you can build Figma UI designs from source code or text descriptions. The workflow translates your input into design system components and variables, automating the layout assembly directly within your Figma file through the MCP server.

Does automated Figma screen assembly support parallel workflows?▼

Yes, automated Figma screen assembly supports parallel workflows using pixel-perfect screenshots. This allows multiple sections of a full-page screen to be built and reviewed simultaneously while maintaining strict visual accuracy and design system compliance.

Related Skills

Explore More Design & Creative Skills→
OniroHuaverOniroHuaver
30

figma-generate-design

Create Figma screens from JSON design specifications using design system components.

Community
Advanced
HeartcoolmanHeartcoolman
88

figma-generate-design

Automate Figma screen creation and updates using design system components and variables.

Community
Advanced
idontcarlidontcarl

figma-implement-design

Convert Figma designs into UI code with design-token integration.

Community
Advanced
xlelibertyxleliberty

figma-generate-design

Translate application pages into Figma screens using design system components.

Community
Advanced