skills.rest
jbarlek3-web
jbarlek3-webCOMMUNITY
Explore all skills by this author →
GitHub

figma-generate-design

Assemble Figma screens from design system components and tokens.

Updated Aug 23, 2026
Search Tags:#automation#figma#mcp#design-system#design-tokens#screen-design#component-instances
One-click install
npx skills add https://github.com/jbarlek3-web/claudecommandcenter --skill figma-generate-design-jbarlek3-web
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-generate-design
Source: https://github.com/jbarlek3-web/claudecommandcenter/tree/main/skills/.curated/figma-generate-design
Command: npx skills add https://github.com/jbarlek3-web/claudecommandcenter --skill figma-generate-design-jbarlek3-web

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create and update Figma screens by reusing a published design system to ensure consistency and rapid iteration.

Core Features & Use Cases

  • Reuse design system components, variables, and styles to assemble full screens
  • Build or update entire pages or views section-by-section inside a dedicated wrapper frame
  • Use Case: translate code-driven UI into a pixel-perfect Figma screen aligned to tokens and components

Quick Start

Provide a Figma file URL and target page context, then run the skill to build or update the screen inside a wrapper frame.

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 an existing design system?▼

You can build Figma screens by providing a target file URL and source content; the skill discovers published design system components, variables, and styles to assemble UI screens section-by-section inside a wrapper frame.

Can I translate code-driven UI into a pixel-perfect Figma screen?▼

Yes, you can translate code-driven UI into a pixel-perfect Figma screen by mapping the source content to existing design system component instances and design tokens for visual consistency.

Do I need a Figma MCP server to automate screen design?▼

Yes, automating Figma screen design requires a connected Figma MCP server, along with a target file URL or discovery context, to access and assemble components using design tokens.

How does a design system ensure consistency when updating Figma pages?▼

Updating Figma pages ensures consistency by discovering and reusing published design system components, variables, and text styles, assembling new screens inside a dedicated wrapper frame.

What's the best way to reuse design tokens when creating Figma components?▼

The best way to reuse design tokens is by leveraging a connected Figma MCP server to discover published variables and styles, then assembling screens using component instances mapped to those tokens.

Can I update specific sections of a Figma page without breaking the overall layout?▼

Yes, you can update specific sections of a Figma page by building or modifying views section-by-section inside a dedicated wrapper frame, ensuring the overall screen layout remains intact.

Related Skills

Explore More Design & Creative Skills→
PytaichukBohdanPytaichukBohdan

figma-generate-design

Assemble Figma screens from design system components, tokens, and styles.

Community
Advanced
takapomtakapom

figma

Extract Figma design data and generate React Native components and design tokens.

Community
Advanced
NagyViktNagyVikt
2

figma-generate-design

Generate and synchronize Figma screens from source code UI structures.

Community
Advanced
lalaABClalaABC

figma-generate-design

Creates screen designs from text descriptions using your custom color palette.

Community
Advanced