skills.rest
DevPelumi
DevPelumiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

figma-generate-design

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

Updated May 13, 2026
Search Tags:#design system#figma#design tokens#ui design#screen generation#component instances
One-click install
npx skills add https://github.com/DevPelumi/sleeqma --skill figma-generate-design-devpelumi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-generate-design
Source: https://github.com/DevPelumi/sleeqma/tree/main/backend/figma-plugin-bundle/skills/figma-generate-design
Command: npx skills add https://github.com/DevPelumi/sleeqma --skill figma-generate-design-devpelumi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Manually building Figma UI screens with hardcoded colors, spacing and primitive shapes is time-consuming, error-prone and disconnects the design from the live design system, making future updates difficult. This Skill eliminates that manual work by reusing your published design system's components, variables and styles to create linked, maintainable Figma screens.

Core Features & Use Cases

  • Design System Reuse: Automatically discovers and uses existing design system components, color/spacing variables, text styles and effect styles instead of hardcoding values, so screens stay linked to the design system and update automatically when the system evolves.
  • Multi-Section View Building: Creates or updates full pages, modals, dialogs, drawers, sidebars, panels and other composed multi-section UI containers from source code or textual descriptions.
  • Pixel-Perfect Image Support: For web-based source assets with images, runs a parallel capture workflow to transfer rasterized images into Figma, since the Figma Plugin API cannot fetch external image URLs directly.
  • Use Case: Turn a React landing page codebase into a fully linked Figma screen that matches your team's design system, with all components, colors and spacing pulled directly from the published library.

Quick Start

Use the figma-generate-design skill to build a Figma version of the user settings modal from the existing React component code, reusing all design system components and 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 build Figma screens from code using my existing design system?▼

To build Figma screens from code, this skill reuses your published design system's components, variables, and styles instead of hardcoded values. It automatically constructs and updates multi-section UI views directly from your source code or textual descriptions.

Can I generate Figma component instances and design tokens from a React codebase?▼

Yes, you can generate Figma component instances and design tokens from a React codebase. The skill discovers and applies your existing published design system components, color variables, and text styles to ensure the generated screens remain fully linked to your library.

How does Figma handle external image URLs when generating UI screens?▼

When generating UI screens with images, Figma cannot fetch external image URLs directly via the Plugin API. The skill runs a parallel pixel-perfect capture workflow to transfer rasterized images from web-based source assets into your Figma file.

What types of UI views can I create by reusing design system components in Figma?▼

You can create or update full pages, modals, dialogs, drawers, sidebars, and panels. These multi-section UI containers are composed by reusing existing design system components to maintain visual accuracy and design system linkage.

Why do my Figma screens break when the design system updates?▼

Figma screens break if they use hardcoded colors and spacing instead of linked design tokens. This skill prevents that by reusing published design system variables and styles, ensuring your screens update automatically when the system evolves.

Does this skill require existing published Figma libraries to work?▼

Yes, this skill requires existing published Figma libraries. It functions by discovering and applying your published design system components, variables, and styles to create linked, maintainable screens rather than generating primitive shapes from scratch.

Related Skills

Explore More Design & Creative Skills→
calvingitcalvingit
2

figma-generate-design

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

Community
Advanced
flowelflowel

figma-generate-design

Automate Figma screen creation and updates using design system tokens.

Community
Intermediate
kaikunnnnkaikunnnn

design

Map Figma design nodes to Tailwind CSS tokens and component structures.

Community
Advanced
terzigoluterzigolu
37

figma-generate-design

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

Community
Intermediate