skills.rest
Lutimi
LutimiCOMMUNITY
Explore all skills by this author →
GitHub

figma-generate-design

Assemble full-page Figma screens by reusing published design system components.

Updated Apr 17, 2026
Search Tags:#automation#layout#components#figma#design-system#variables#text-styles
One-click install
npx skills add https://github.com/Lutimi/claude2figma --skill figma-generate-design-lutimi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-generate-design
Source: https://github.com/Lutimi/claude2figma/tree/main/.cursor/skills/figma-generate-design
Command: npx skills add https://github.com/Lutimi/claude2figma --skill figma-generate-design-lutimi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill enables efficient creation and updating of Figma screens by reusing a published design system — components, variables, and text styles — rather than drawing from scratch, preventing drift and speeding up delivery.

Core Features & Use Cases

  • Reuse design system components, variables, and styles to assemble coherent screens.
  • Update existing screens by swapping components and binding tokens without re-creating layouts.
  • Support a stepwise workflow: wrap content in a page wrapper frame, then add sections inside.

Quick Start

Create or update a full-page Figma screen by reusing the published design system components, variables, and styles, assembling sections inside a dedicated wrapper.

Frequently Asked Questions about figma-generate-design

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

FAQPage Schema
How do I assemble Figma screens from a design system instead of drawing from scratch?▼

You can assemble full-page Figma screens by reusing published design system components, variables, and text styles, orchestrating wrapper and section construction to prevent layout drift.

Can I update existing Figma pages by swapping components and binding variables?▼

Yes, you can update existing Figma screens by swapping components and binding design system variables without re-creating the underlying layouts.

Do I need a connected Figma MCP environment and a published design system to automate page assembly?▼

Yes, prerequisites include a connected Figma MCP environment and access to a published design system to discover components, variables, and text styles for screen assembly.

What is the stepwise workflow for building full-page Figma screens using design system tokens?▼

The stepwise workflow involves creating a page wrapper frame, adding sections inside that wrapper, and validating the applied design system components, variables, and text styles.

Does this approach work for discovering components and text styles across multiple Figma libraries?▼

Yes, the process discovers components, variables, and text styles across published Figma libraries to ensure coherent screen assembly and token binding.

What are the limitations of reusing design system tokens for Figma layout automation?▼

This approach relies entirely on existing published design system components and variables, meaning it cannot generate screens if the required libraries or Figma MCP environment are missing.

Related Skills

Explore More Design & Creative Skills→
flowelflowel

figma-generate-design

Automate Figma screen creation and updates using design system tokens.

Community
Intermediate
idontcarlidontcarl

figma-generate-design

Translate UI specifications into Figma screens using design system components.

Community
Advanced
dylantarredylantarre
38

figma

Synchronize design tokens between codebases and Figma bidirectionally via API workflows involving Tokens Studio or Variables.

Community
Intermediate
xlelibertyxleliberty

figma-generate-design

Translate application pages into Figma screens using design system components.

Community
Advanced