figma-generate-design

Translate code or design descriptions into Figma screens using a published design system.

2|Updated Mar 26, 2026

Search Tags:#components #figma #tokens #design-system #screens #text-styles

Ready to run

npx skills add https://github.com/calvingit/skills --skill figma-generate-design-calvingit

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: figma-generate-design
Source: https://github.com/calvingit/skills/tree/main/external-skills/Design/figma-generate-design
Command: npx skills add https://github.com/calvingit/skills --skill figma-generate-design-calvingit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Build or update Figma screens by reusing a published design system, eliminating manual sketching and maintaining consistency with tokens and components.

Core Features & Use Cases

Reuse design system components, variables, and text/effect styles to assemble screens.
Create a page wrapper and build sections sequentially to preserve layout integrity.
Coordinate parallel workflows with generate_figma_design for image-heavy screens and transfer images via image hashes.
Override text in component instances with setProperties to reflect code defaults and runtime values.
Validate visually with screenshots to ensure fidelity and catch issues early.

Quick Start

Provide a target Figma file URL and access to the linked design system library, then run the workflow to create a wrapper frame and start adding sections.

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 code using a design system?▼

To generate Figma screens from code, this skill translates code or design descriptions into complete layouts by reusing a connected design system. It loads existing components, variables, and text styles to ensure visual consistency across web and mobile interfaces.

What do I need to connect before building Figma screens with design tokens?▼

Building Figma screens with design tokens requires access to a target Figma file URL and a linked design system library. You must also connect the figma-use workflow to load the necessary components, variables, and text styles before generating layouts.

How does the workflow handle layout integrity when creating multiple Figma sections?▼

The workflow preserves layout integrity when creating Figma sections by first generating a page wrapper frame. It then builds subsequent sections sequentially, ensuring that all design system components and tokens align properly within the Figma file.

Can I override text in Figma component instances to match runtime values?▼

Yes, you can override text in Figma component instances to match code defaults and runtime values. The skill utilizes the setProperties function to update text within instances, ensuring the generated Figma screens reflect accurate data.

What is the best way to validate Figma screens generated from design descriptions?▼

The best way to validate generated Figma screens is by capturing screenshots directly within the workflow. This allows you to visually inspect the assembled components and tokens, ensuring fidelity and catching layout issues early in the design process.

How do I transfer images for image-heavy Figma screens during generation?▼

For image-heavy Figma screens, you can coordinate parallel workflows and transfer images using image hashes. This allows the generation process to handle complex visual assets while assembling screens from design system components.