skills.rest
Charitablebusinessronin
CharitablebusinessroninCOMMUNITY
Explore all skills by this author →
GitHub

figma-generate-design

Build full-page Figma screens from a published design system.

Updated Mar 18, 2026
Search Tags:#automation#workflow#components#figma#design-system#screens#design-ops
One-click install
npx skills add https://github.com/Charitablebusinessronin/Allura_Memory --skill figma-generate-design-charitablebusinessronin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-generate-design
Source: https://github.com/Charitablebusinessronin/Allura_Memory/tree/main/.opencode/skills/figma-generate-design
Command: npx skills add https://github.com/Charitablebusinessronin/Allura_Memory --skill figma-generate-design-charitablebusinessronin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

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

Core Features & Use Cases

  • Discover and import design system components, variables, and text/effect styles into Figma frames.
  • Build or update complete screens by assembling component instances and binding design tokens rather than hard-coded values.
  • Use a stepwise workflow that creates a page wrapper, builds sections, validates with screenshots, and updates existing screens as needed.

Quick Start

Provide a description of the target screen and run the generate workflow to build it in Figma from the design system.

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?▼

To generate Figma screens, describe the target layout and run the workflow to import design system components, variables, and text styles, then assemble component instances and bind design tokens within a page wrapper.

Can I build full-page UI designs in Figma using design tokens instead of hardcoded values?▼

Yes, you can build full-page UI designs by discovering and importing design system assets, then binding variables and text styles to component instances rather than drawing primitives with hardcoded values.

What is the process for updating existing Figma screens with new design system components?▼

Updating existing Figma screens involves running a stepwise workflow that builds sections, validates visual results with screenshots, and reassembles component instances using the updated design system components and tokens.

Do I need a published design system to automate Figma screen creation?▼

Yes, a published design system is required to automate Figma screen creation, as the workflow relies on discovering and importing existing components, variables, and text styles to assemble consistent full-page screens.

How does the design-ops workflow validate assembled Figma screens?▼

The design-ops workflow validates assembled Figma screens by taking screenshots of the built frames, ensuring the component instances and design tokens render correctly before finalizing the page wrapper sections.

What's the best way to maintain consistent UI components across multiple Figma pages?▼

The best way to maintain consistent UI components across Figma pages is to reuse a published design system, assembling component instances and binding design tokens rather than hardcoding primitive values on each page.

Related Skills

Explore More Design & Creative Skills→
pathtoresiliencebvpathtoresiliencebv

figma-generate-design

Generate Figma screens from source code or descriptions using design system components.

Community
Advanced
vinhnxvvinhnxv
6

design-prototype

Convert Figma designs into React prototypes with Storybook stories.

Community
Advanced
nesihaver-ILnesihaver-IL

figma

Transform Figma designs into React components and design tokens.

Community
Intermediate
xlelibertyxleliberty

figma-generate-design

Translate application pages into Figma screens using design system components.

Community
Advanced