skills.rest
phoenicisf
phoenicisfCOMMUNITY
Explore all skills by this author →
GitHub

figma-generate-design

Build or update full-page Figma screens using published design system components and tokens.

Updated Nov 7, 2025
Search Tags:#automation#figma#tokens#design-system#ui-translation#component-instances
One-click install
npx skills add https://github.com/phoenicisf/forex-analyzer --skill figma-generate-design-phoenicisf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-generate-design
Source: https://github.com/phoenicisf/forex-analyzer/tree/main/.agents/skills/figma-generate-design
Command: npx skills add https://github.com/phoenicisf/forex-analyzer --skill figma-generate-design-phoenicisf

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide enables teams to translate code-driven UI into live Figma screens by reusing published design system components, tokens, and styles, ensuring consistency and speeding up iterative design.

Core Features & Use Cases

  • Reuse design-system components, variables, and text/effect styles to assemble or update full-page screens in Figma.
  • Support workflows for building new screens or updating existing ones, with steps for wrapper frames, section blocks, and validation.
  • Update existing screens by swapping components, changing text, and adjusting layout with design-system tokens.

Quick Start

Create or update a complete Figma screen by applying the design system components, tokens, and styles from the codebase.

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 code UI into Figma screens using design tokens?▼

You can translate code UI into Figma by reusing published design system components, tokens, and styles to assemble full-page screens instead of hand-drawing elements. The process imports component instances, colors, spacing, and text styles directly into a target Figma file.

Do I need a published design system to generate Figma screens from code?▼

Yes, a published design system is required to generate Figma screens from code. You need a connected Figma environment with a target file containing published variables, components, and text or effect styles to import and apply during the UI translation.

Can I update existing Figma screens by swapping components and adjusting layout with design tokens?▼

Yes, you can update existing Figma screens by swapping design system components, changing text content, and adjusting layout using imported spacing and color tokens. This supports iterative updates while maintaining consistency with the published design system.

What's the best way to build full-page Figma screens from a codebase?▼

The best way to build full-page Figma screens from a codebase is to reuse design system components and variables iteratively. This involves creating wrapper frames, assembling section blocks, and validating imported tokens against the published design system.

Does UI translation from code to Figma support iterative design updates?▼

Yes, UI translation from code to Figma supports iterative design updates. You can build new screens or update existing ones by applying design system components, tokens, and styles in successive passes, ensuring design consistency across iterative code-driven changes.

Related Skills

Explore More Design & Creative Skills→
warpdotdevwarpdotdev
64.1k

figma-generate-design

Automates creation and updating of full-page screens in Figma using published design system components and tokens.

Official
Advanced
daffy0208daffy0208
34

UX Designer

Create information architecture, user flows, wireframes, and prototypes for digital products.

Community
Intermediate
Bigme2020Bigme2020

figma-rule

Generate repository-specific Figma MCP rules from codebase conventions.

Community
Intermediate
idontcarlidontcarl

figma-generate-design

Translate UI specifications into Figma screens using design system components.

Community
Advanced