skills.rest
guhans6
guhans6COMMUNITY
Explore all skills by this author →
GitHub

figma-generate-design

Build and update Figma screens using design system components and API endpoints.

Updated May 11, 2026
Search Tags:#design system#UI development#Figma#Automation#screen design
One-click install
npx skills add https://github.com/guhans6/agent-workbench --skill figma-generate-design-guhans6
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-generate-design
Source: https://github.com/guhans6/agent-workbench/tree/main/shared/skills/figma-generate-design
Command: npx skills add https://github.com/guhans6/agent-workbench --skill figma-generate-design-guhans6

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill solves the problem of building or updating screens in Figma from scratch, reducing manual drawing and ensuring consistency with design systems.

Core Features & Use Cases

  • Design System Components: Utilizes Figma's design system components, variables, and styles to assemble screens automatically.
  • Workflow Integration: Integrates with figma-use and supports various workflows, such as code to Figma or description-based screen building.
  • Validation & Update: Offers validation for individual sections and allows for updating existing screens incrementally.

Quick Start

Use the figma-generate-design skill to create a Figma screen by specifying a web app page, providing source code or description of the screen, and ensuring the Figma MCP server is connected.

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 building Figma screens from a design system?▼

To generate Figma screens from source code, specify the web app page, provide the source code or description, and ensure the Figma MCP server is connected. The skill uses API endpoints like createFrame to assemble the UI components directly in Figma.

Can I incrementally update existing Figma screens using design system components?▼

Yes, you can incrementally update existing Figma screens using design system components. The skill offers validation for individual sections and allows for updating existing screen structures incrementally rather than rebuilding from scratch.

Does the Figma screen generation process support code to design workflows?▼

Yes, the Figma screen generation process supports code to design workflows. It integrates with figma-use workflows, allowing you to build screens directly from source code or text descriptions into structured Figma frames.

Do I need the Figma MCP server connected to build screens from source code?▼

Yes, you need the Figma MCP server connected to build screens from source code. Ensuring this server connection is a required prerequisite for the skill to manipulate the Figma file structure and execute API operations.

What are the limitations of automating Figma screen design with design system variables?▼

Automating Figma screen design with design system variables requires strict adherence to existing design system components and styles. It is limited to manipulating file structures via specific API endpoints like setBoundVariableForPaint and does not support freehand drawing.

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
xlelibertyxleliberty

figma-generate-design

Translate application pages into Figma screens using design system components.

Community
Advanced
idontcarlidontcarl

figma-generate-design

Translate UI specifications into Figma screens using design system components.

Community
Advanced
codesour-designcodesour-design

source-command-gravity-tokens

Apply Gravity design system tokens to Figma screens via component linking and variable binding.

Community
Intermediate