skills.rest
rakibulism
rakibulismCOMMUNITY
Explore all skills by this author →
Website𝕏@rakibulismGitHub

figma-generate-design

Build composed Figma views from source code using design system components.

2|1|Updated May 17, 2026
Search Tags:#design system#figma#ui layout#screen design#font verification#component instances#image transfer
One-click install
npx skills add https://github.com/rakibulism/agent-skills-os --skill figma-generate-design-rakibulism
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-generate-design
Source: https://github.com/rakibulism/agent-skills-os/tree/main/skills/figma-figma-generate-design
Command: npx skills add https://github.com/rakibulism/agent-skills-os --skill figma-generate-design-rakibulism

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill helps you translate an application page, modal, drawer, sidebar, or other composed UI view into Figma while preserving the source design system instead of rebuilding everything with ad hoc shapes and hardcoded values.

Core Features & Use Cases

  • Design-system-first composition: Reuses published components, variables, and styles from the target Figma file or linked libraries.
  • Screen and view building: Best for full pages, dialogs, drawers, panels, sidebars, and other multi-section layouts that need to be assembled incrementally.
  • Code-to-Figma workflows: Supports translating code-based UI into a Figma screen, including matching source structure, component boundaries, and text overrides.
  • Visual validation: Encourages section-by-section screenshots, font verification, and image transfer from capture workflows to keep the Figma result faithful and editable.

Quick Start

Use the figma-generate-design skill to recreate this screen in Figma from the source code using the existing design system and preserve the correct font and image assets.

Frequently Asked Questions about figma-generate-design

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

FAQPage Schema
How do I translate source code into a Figma screen layout?▼

To translate source code into a Figma screen layout, use the skill to build composed views by resolving component keys, binding variables, and applying styles from your published design system. This preserves the source structure and component boundaries without rebuilding everything with hardcoded values.

What is the best way to recreate a UI modal in Figma using an existing design system?▼

Recreating a UI modal in Figma using an existing design system involves incremental assembly within wrapper frames. The skill applies published component instances, variables, and styles, ensuring text overrides and font verification match the original source design.

Does the Figma layout generation process support image transfer from screenshots?▼

Yes, the Figma layout generation process supports image transfer from capture workflows. It uses section-by-section screenshots and visual validation to ensure the generated Figma result remains faithful and editable while preserving the correct image assets.

Can I build multi-section Figma panels without hardcoding style values?▼

You can build multi-section Figma panels without hardcoding values by reusing published design system components, variables, and styles. The skill resolves component keys and applies variable binding to assemble sidebars and panels incrementally.

Why does my generated Figma view require wrapper frames for component instances?▼

Generated Figma views require wrapper frames because they provide the structural boundaries needed for incremental assembly and proper component key resolution. Wrapper frames ensure that variable binding and style application map correctly to the target Figma file.

Related Skills

Explore More Design & Creative Skills→
ahandselahandsel
1

figma-generate-design

Generate Figma screens from code and UI descriptions using design system components.

Community
Advanced
DevPelumiDevPelumi

figma-generate-design

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

Community
Advanced
moasqmoasq
32

asc-shots-pipeline

Orchestrate iOS screenshot capture, framing, and uploads via Xcode CLI tools.

Community
Advanced
Sacred-GSacred-G
2

figma-generate-design

Build or update Figma screens using published design system tokens.

Community
Advanced