skills.rest
OniroHuaver
OniroHuaverCOMMUNITY
Explore all skills by this author →
GitHub

figma-generate-design

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

30|4|Updated May 3, 2026
Search Tags:#design system#design automation#UI design#Figma#code to design
One-click install
npx skills add https://github.com/OniroHuaver/openwarp --skill figma-generate-design-onirohuaver
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-generate-design
Source: https://github.com/OniroHuaver/openwarp/tree/main/resources/bundled/mcp_skills/figma/figma-generate-design
Command: npx skills add https://github.com/OniroHuaver/openwarp --skill figma-generate-design-onirohuaver

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill automates the creation and updating of Figma designs from code, significantly reducing the time and effort required to translate design specifications into visual components.

Core Features & Use Cases

  • Design Automation: Converts code-based design specifications into Figma components.
  • Component Reuse: Integrates with existing design systems for efficient design creation.
  • Use Case: Ideal for developers or designers who need to translate UI components from code into Figma screens, leveraging design tokens and components for consistency.

Quick Start

Use the figma-generate-design skill to create a new Figma screen based on the provided JSON design specification.

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 design creation from code?▼

Automate Figma design creation from code by using this Skill to convert code-based design specifications into Figma screens. It applies design system components, variables, and styles to generate visual UI elements directly.

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

Yes, you need a published design system to generate Figma screens from code. The Skill requires access to existing design system components, variables, and styles to ensure consistent UI design automation.

How does code to design automation work with Figma components?▼

Code to design automation works by connecting to a Figma MCP server and translating JSON design specifications into visual components. It reuses existing design system components and variables to build and update Figma screens.

Can I update existing Figma screens using design automation?▼

Yes, you can update existing Figma screens using design automation. The Skill automates both the creation of new screens and the updating of current designs by applying code-based specifications to your design system.

What is the best way to translate web app UI components into Figma?▼

The best way to translate web app UI components into Figma is by automating the process with design tokens and components. This Skill converts your code-based UI specifications into Figma screens, leveraging variables for consistency.

Why is my code to design Figma automation not working?▼

Code to design Figma automation may not work if you lack a connection to a Figma MCP server or access to a published design system. Ensure your environment has the required figma-use dependency configured correctly.

Related Skills

Explore More Design & Creative Skills→
LAF-USLAF-US

figma-generate-design

Build full-page Figma screens from design-system components, variables, and styles.

Official
Advanced
andebet07-ossandebet07-oss

figma-generate-design

Translate code-defined UI into Figma screens using a published design system.

Community
Advanced
Sacred-GSacred-G
2

figma-generate-design

Build or update Figma screens using published design system tokens.

Community
Advanced
OpenElementsLabsOpenElementsLabs

implement-design

Translate Figma designs into UI code using design tokens and validation.

Official
Advanced