skills.rest
xleliberty
xlelibertyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

figma-generate-design

Translate application pages into Figma screens using design system components.

Updated Nov 3, 2016
Search Tags:#frontend#figma#prototyping#design-system#design-tokens#ui-automation
One-click install
npx skills add https://github.com/xleliberty/mydotfiles --skill figma-generate-design-xleliberty
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-generate-design
Source: https://github.com/xleliberty/mydotfiles/tree/main/.config/.claude/plugins/cache/claude-plugins-official/figma/2.1.3/skills/figma-generate-design
Command: npx skills add https://github.com/xleliberty/mydotfiles --skill figma-generate-design-xleliberty

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill solves the disconnect between codebase UI and Figma design files by enabling the automated assembly of screens using your existing design system components, variables, and styles.

Core Features & Use Cases

  • Design System Integration: Automatically discovers and applies published components, color variables, and text styles to ensure design consistency.
  • Incremental Assembly: Builds complex screens section-by-section, allowing for precise control and validation at every step.
  • Use Case: When you need to translate a new web application page into a Figma screen, this skill assembles the layout using your design system's buttons, cards, and typography instead of hardcoded primitives.

Quick Start

Use the figma-generate-design skill to build the user profile page in Figma based on the provided source code and 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 generate Figma screens from code automatically?▼

You can build Figma screens from code by translating application page layouts into Figma using your published design system components and design tokens. The Skill incrementally assembles UI sections to maintain layout consistency.

Can I build Figma layouts using existing design system components?▼

Yes, you can build Figma layouts using existing design system components. The Skill automatically discovers published components, color variables, and text styles to assemble UI screens, ensuring design consistency without hardcoded primitives.

Do I need a Figma MCP server connection to sync design tokens?▼

Yes, an active Figma MCP server connection is required to sync design tokens. You also need access to a published design system library to ensure component and variable synchronization during automated screen layout updates.

What is the best way to update Figma designs when UI code changes?▼

The best way to update Figma designs when UI code changes is through automated layout updates. The Skill translates modified application pages into Figma screens section-by-section, allowing precise control and validation during design system synchronization.

Does Figma UI automation work for both web and mobile applications?▼

Yes, Figma UI automation works for both web and mobile applications. The Skill supports incremental screen construction and automated layout updates across both platforms by leveraging your design system components and design tokens.

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
oxieoxie

ui-ux-design

Generate grayscale UI variants, functional prototypes, and polished designs with accessibility tests.

Community
Intermediate
manuelbrandner85manuelbrandner85

imagegen-frontend-web

Generate section-based website design reference images for frontend development.

Community
Advanced
daffy0208daffy0208
34

Figma Developer

Convert Figma designs into React components and design tokens.

Community
Intermediate