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

Ready to run

npx skills add https://github.com/PytaichukBohdan/figma_board_connection --skill figma-generate-design-pytaichukbohdan

💬 Prompt for ChatGPT / Claude Chat▼

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.