figma-generate-design

Name: figma-generate-design
Availability: InStock
Author: allofmeng

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

12|7|Updated Sep 15, 2025

Search Tags:#automation #figma #tokens #design-system #screens #component-instances #code-to-design

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Translates code-driven UI into production-ready Figma screens by reusing a published design system and its tokens, ensuring consistency and faster iteration.

Core Features & Use Cases

Reuses a published design system to assemble screens incrementally, component-by-component.
Maps colors, spacing, typography, and effects to design-system tokens rather than hard-coded values.
Use cases include creating new screens from code, updating existing frames to reflect UI changes, or converting multi-section pages.

Quick Start

Load the Figma file and run the script to generate or update a full screen from code 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 convert code to Figma screens using design tokens?▼

To convert code to Figma screens, this skill maps code-driven UI to a published design system, reusing components, tokens, and styles to assemble production-ready frames incrementally. It requires a connected Figma environment and access to target files.

Can I update existing Figma frames to reflect UI code changes?▼

Yes, you can update existing Figma frames to reflect UI changes by reusing mapped components, tokens, and styles from your connected design-system libraries. This ensures your design files stay synchronized with code modifications without manual rebuilding.

What is needed to map UI to design tokens in Figma?▼

Mapping UI to design tokens requires a connected Figma environment with access to target files and published design-system libraries. The skill uses these libraries to translate hard-coded values into matching Figma variables, text styles, and effect styles.

Does generating multi-section Figma layouts from code require a published design system?▼

Generating multi-section Figma layouts from code requires a published design system to ensure consistency. The skill reuses the library's component instances, spacing, typography, and color tokens to assemble full pages accurately rather than relying on hard-coded values.

What are the limitations of code to design automation for Figma?▼

Limitations include requiring pre-published design-system libraries; the skill cannot generate screens from code without existing tokens, variables, and component instances to map to. It also requires direct Figma environment connectivity to access target files and search the design system.