skills.rest
zniihgnexy
zniihgnexyCOMMUNITY
Explore all skills by this author →
GitHub

figma-generate-design

Builds or updates Figma screens from code using design system components and tokens.

Updated Apr 1, 2026
Search Tags:#design system#components#MCP#figma#ui design#variables#screen generation
One-click install
npx skills add https://github.com/zniihgnexy/vid_tokenizer --skill figma-generate-design-zniihgnexy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-generate-design
Source: https://github.com/zniihgnexy/vid_tokenizer/tree/main/.ds/codex-home/plugins/cache/openai-curated/figma/314574a046f21938025ae443f9c6dbbd0c2c9b7a/skills/figma-generate-design
Command: npx skills add https://github.com/zniihgnexy/vid_tokenizer --skill figma-generate-design-zniihgnexy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Translating an application page or multi-section layout into Figma by hand leads to hardcoded colors, detached primitives, and screens that drift from the published design system. This Skill assembles full Figma screens from existing design system components, variables, and styles so the result stays linked and updatable. ## Core Features & Use Cases - Design System Discovery: Finds components, color/spacing variables, and text/effect styles via search_design_system or by inspecting existing screens in the file. - Incremental Section-by-Section Assembly: Creates a page wrapper frame, then builds each section in its own use_figma call with variable bindings instead of hardcoded values. - Parallel Pixel Reference Workflow: For web apps, runs generate_figma_design alongside use_figma to match exact layout while keeping proper component instances. - Use Case: Given a React landing page, the Skill maps its sections (header, hero, pricing grid, footer) to published Figma components, overrides placeholder text via setProperties, and validates each section with screenshots. ## Quick Start Ask the agent to take this app page and build it in Figma using the existing design system components and styles.

Frequently Asked Questions about figma-generate-design

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

FAQPage Schema
How do I create a Figma screen from my app code?▼

Read the source to identify sections and components, discover matching design system components via search_design_system, then build each section inside a wrapper frame using imported component instances. Validate each section with get_screenshot before continuing.

How to use Figma design system variables instead of hardcoded colors?▼

Search variables with search_design_system using includeVariables, import library variables by key with importVariableByKeyAsync, then bind them via setBoundVariable for spacing and setBoundVariableForPaint for fills. Never conclude no variables exist from local API results alone.

Does this workflow work for iOS or Android app screens?▼

Yes, but the parallel generate_figma_design capture workflow only applies to web apps renderable in a browser. For mobile apps or updates to existing screens, use the standard section-by-section use_figma workflow.

Why does moving nodes across use_figma calls fail in Figma?▼

Reparenting nodes with appendChild across separate use_figma calls silently fails and orphans frames. Create the page wrapper frame first, return its ID, and append each new section directly inside it within the same script.

When should I use figma-implement-design instead of generating a design?▼

Use figma-implement-design when the deliverable is code generated from an existing Figma design. Use figma-generate-design when the deliverable is a Figma screen built or updated from code or a description.

Related Skills

Explore More Design & Creative Skills→
LAF-USLAF-US

figma-generate-design

Build full-page Figma screens from design-system components, variables, and styles.

Official
Advanced
NagyViktNagyVikt
2

figma-generate-design

Generate and synchronize Figma screens from source code UI structures.

Community
Advanced
AutomatticAutomattic
31

match-page

Compare built web pages to source screenshots and fix divergent visual sections.

Official
Advanced
UlaYugaUlaYuga

figma-generate-design

Builds Figma screens and views from code using design system components, variables, and styles.

Community
Advanced