skills.rest
ndriyo
ndriyoCOMMUNITY
Explore all skills by this author →
GitHub

figma-generate-design

Generate and update Figma views from code or design descriptions.

Updated Aug 23, 2026
Search Tags:#design system#figma#UI design#automated layout#component resolution#Figma automation
One-click install
npx skills add https://github.com/ndriyo/primepm --skill figma-generate-design-ndriyo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-generate-design
Source: https://github.com/ndriyo/primepm/tree/main/.agents/skills/figma-generate-design
Command: npx skills add https://github.com/ndriyo/primepm --skill figma-generate-design-ndriyo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

Teams often face difficulties translating code components and design descriptions into precise, reusable Figma views, leading to inconsistencies and lengthy manual work.

Core Features & Use Cases

  • Automated Figma view creation and updates: Generate full-page screens, modals, drawers, or panels in Figma using design system tokens and component instances.
  • Component and style resolution: Discover and import design system components, variables, and styles from Code Connect files or existing screens, ensuring design consistency.
  • Practical scenario: For a developer building a new app screen, use this Skill to automatically generate the layout in Figma aligned with the codebase’s design system, accommodating images, nested components, and style bindings.

Quick Start

Load the design system components and your code definition, then run this Skill to generate or update the Figma view corresponding to your source code or description.

Frequently Asked Questions about figma-generate-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate Figma view creation from code components?▼

Automating Figma view creation from code involves resolving design system components, styles, and variables to generate full-page screens or modals directly from source code. This ensures consistent UI design workflows and adherence to team design systems.

What is the best way to keep Figma layouts aligned with a codebase design system?▼

Keeping Figma layouts aligned with a codebase design system requires resolving components and styles from Code Connect files or existing screens. This ensures design consistency and automatically updates Figma views corresponding to your source code.

Can I generate complex Figma layouts with nested components and images?▼

Yes, generating complex Figma layouts supports nested components and incorporates images from parallel captures. This allows you to build intricate app screens while maintaining strict design system token bindings and style consistency.

Do I need Code Connect files to resolve Figma design system components?▼

Code Connect files are used to discover and import design system components, variables, and styles, but existing screens can also be used. This resolves the design system elements needed to generate or update accurate Figma views.

How do I update existing Figma screens from design descriptions?▼

Updating existing Figma screens from design descriptions is done by loading the design system components and running the automation to resolve styles and variables. This modifies the current Figma view to match the updated source description efficiently.

Related Skills

Explore More Design & Creative Skills→
pathtoresiliencebvpathtoresiliencebv

figma-code-connect-components

Create Figma Code Connect mappings between design components and codebase components.

Community
Intermediate
Kushal9889Kushal9889

figma-code-connect

Convert Figma components to TypeScript or JavaScript code snippets.

Community
Advanced
DevPelumiDevPelumi

figma-generate-design

Build Figma UI screens from source code using design system components.

Community
Advanced
NagyViktNagyVikt
2

figma-generate-design

Generate and synchronize Figma screens from source code UI structures.

Community
Advanced