skills.rest
Luohao-Yan
Luohao-YanCOMMUNITY
Explore all skills by this author →
GitHub

figma-generate-design

Construct or update Figma screens programmatically using a design system API.

6|Updated May 10, 2026
Search Tags:#figma#ui automation#screen design#layout conversion#design system integration
One-click install
npx skills add https://github.com/Luohao-Yan/warp-cn --skill figma-generate-design-luohao-yan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-generate-design
Source: https://github.com/Luohao-Yan/warp-cn/tree/main/resources/bundled/mcp_skills/figma/figma-generate-design
Command: npx skills add https://github.com/Luohao-Yan/warp-cn --skill figma-generate-design-luohao-yan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires figma-sdk, use-figma, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This skill helps streamline the process of translating application layouts or design system specifications into fully functioning screens within the Figma environment. It minimizes manual adjustments and ensures that designs stay consistent with the design system's standards.

Core Features & Use Cases

  • Screen Building from Code: Converts UI layouts from source code directly into Figma screens.
  • Design System Utilization: Leverages the design system components, variables, and styles for building and updating screens.
  • Multi-section Assemblies: Enables the incremental construction of complex screens, section by section.

Quick Start

Load figma-generate-design, provide the screen specifications or code, and run the skill to automatically build a full Figma screen from your design system.

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 source code layouts into full Figma screens?▼

You can convert source code layouts into full Figma screens by loading the figma-generate-design skill, providing your screen specifications, and running it to programmatically build the UI using your design system components.

Can I build complex multi-section Figma screens incrementally?▼

Yes, you can build complex multi-section Figma screens incrementally. The skill enables the incremental construction of full-page applications, allowing you to assemble intricate UI layouts section by section.

Does Figma UI automation work with existing design system components and variables?▼

Figma UI automation works with existing design system components and variables. The skill integrates your design components, color variables, and text effects directly through an agent's design system API to ensure consistency.

What is the best way to update Figma screens without manual adjustments?▼

The best way to update Figma screens without manual adjustments is using programmatic UI automation. This skill translates application layouts or design system specifications into fully functioning screens while minimizing manual tweaks.

Do I need a design system API to generate Figma screens from code?▼

Yes, you need a design system API to generate Figma screens from code. The skill operates through an agent's design system API to integrate your existing components, variables, and styles into the constructed layouts.

Related Skills

Explore More Design & Creative Skills→
wiltaylorwiltaylor

figma-generate-design

Converts application layouts into Figma screens using design system components and variables.

Community
Advanced
webrix-aiwebrix-ai
1

design-handoff

Extract design specifications and implementation details from Figma handoff materials.

Official
Intermediate
vuralserhat86vuralserhat86
43

figma_integration

Convert Figma variables to CSS and Auto Layout to Flexbox or Grid.

Community
Intermediate
idontcarlidontcarl

figma-implement-design

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

Community
Advanced