skills.rest
PytaichukBohdan
PytaichukBohdanCOMMUNITY
Explore all skills by this author →
GitHub

figma-generate-design

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

Updated Mar 25, 2026
Search Tags:#automation#components#figma#tokens#design-system#variables#styles
One-click install
npx skills add https://github.com/PytaichukBohdan/figma_board_connection --skill figma-generate-design-pytaichukbohdan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-generate-design
Source: https://github.com/PytaichukBohdan/figma_board_connection/tree/main/.claude/skills/figma-generate-design
Command: npx skills add https://github.com/PytaichukBohdan/figma_board_connection --skill figma-generate-design-pytaichukbohdan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Build or update full-page screens in Figma by reusing the published design system — components, variables, and styles — rather than drawing primitives with hardcoded values.

Core Features & Use Cases

  • Reuses design-system components, tokens, and styles to assemble screens incrementally.
  • Automatically discovers and applies components, variables, and text/effect styles, avoiding hard-coded values.
  • Use Case: when you need to translate a code-driven page or multi-section layout into a Figma screen that stays linked to the design system.

Quick Start

Provide a source page or description and let the agent build or update a Figma screen using the design system tokens.

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 design tokens instead of drawing primitives?▼

To generate Figma screens from design tokens, provide a source page description and let the agent assemble the layout section-by-section, reusing published design system components, variables, and styles rather than hardcoding primitive values.

Do I need a Figma MCP server to build full-page screens using design system components?▼

Yes, building full-page Figma screens using design system components requires a connected Figma MCP server, a target file URL or key, and a published design system or team library to source tokens and styles from.

Can I translate a code-driven page layout into a Figma screen that stays linked to my design system?▼

Yes, you can translate a code-driven multi-section page layout into a Figma screen that stays linked to your design system by automatically discovering and applying existing components, text styles, effect styles, and variables.

What is the best way to update existing Figma pages using design system variables and styles?▼

The best way to update Figma pages with design system variables is to provide the updated source content and the target file URL, allowing the agent to incrementally assemble and apply matching styles, tokens, and components.

Why does my Figma design generation use hardcoded values instead of my published design system tokens?▼

Figma design generation uses hardcoded values when the target file lacks a published design system or team library. Ensure your file has published components and variables so the agent can discover and apply them correctly.

Can I use this approach to build multi-section layouts in Figma without manually placing each component?▼

Yes, this approach builds multi-section layouts in Figma without manual placement by incrementally assembling the screen section-by-section, automatically matching the source content to your design system components and styles.

Related Skills

Explore More Design & Creative Skills→
OniroHuaverOniroHuaver
30

figma-generate-design

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

Community
Advanced
webrix-aiwebrix-ai
1

design-handoff

Extract design specifications and implementation details from Figma handoff materials.

Official
Intermediate
d0d012d0d012
9

figma-design

Extract tokens, styles, and constraints from Figma design files.

Community
Advanced
terzigoluterzigolu
37

figma-generate-design

Translate code-based UI layouts into Figma screens using design-system tokens.

Community
Intermediate