skills.rest
LAF-US
LAF-USOFFICIAL
Explore all skills by this author →
GitHub

figma-generate-design

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

Updated Dec 17, 2024
Search Tags:#automation#layout#figma#tokens#design-system#wireframe#component-instances
One-click install
npx skills add https://github.com/LAF-US/IDAHO-VAULT --skill figma-generate-design-laf-us
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-generate-design
Source: https://github.com/LAF-US/IDAHO-VAULT/tree/main/.codex/plugins/cache/openai-curated/figma/314574a046f21938025ae443f9c6dbbd0c2c9b7a/skills/figma-generate-design
Command: npx skills add https://github.com/LAF-US/IDAHO-VAULT --skill figma-generate-design-laf-us

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enables teams to build or update complete Figma screens by reusing published design-system components, variables, and styles, reducing manual recreation and ensuring parity with the design system.

Core Features & Use Cases

  • Reuse design-system components, variables, and styles to assemble screens rather than drawing primitives.
  • Discover components, variables, and text/effect styles via design-system searches and by inspecting existing frames.
  • Follow a step-by-step workflow: create a page wrapper, build sections, override texts via component properties, apply styles, and validate with screenshots.

Quick Start

Provide the target Figma file URL or file key and a page description to build or update a full screen using the design system.

Frequently Asked Questions about figma-generate-design

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

FAQPage Schema
How do I generate Figma screens from code using design-system tokens?▼

To generate Figma screens from code, you provide a target file URL and a page description. The system then translates your UI code into accurate layouts by reusing published design-system components, variables, and styles instead of hard-coded values.

Can I build Figma layouts by reusing existing component instances?▼

Yes, you can build Figma layouts by reusing existing component instances. The system discovers published design-system components via library queries and assembles full-page screens by overriding texts through component properties and applying variables.

Do I need a Figma MCP server to automate UI layout creation?▼

Yes, automating UI layout creation requires a connected Figma MCP server. You also need access to the target Figma file and the ability to discover components, variables, and styles via design-system queries and library imports.

What is the workflow for translating UI descriptions into Figma wireframes?▼

The workflow for translating UI descriptions into Figma wireframes follows a step-by-step process: create a page wrapper, build sections, override texts via component properties, apply styles, and validate the generated layout with screenshots.

How does applying design-system variables improve Figma screen generation?▼

Applying design-system variables during Figma screen generation ensures strict parity with your design system and reduces manual recreation. It leverages design tokens instead of hard-coded values to maintain accurate layouts across pages.

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
johnlindquistjohnlindquist
24

figma

Extract design tokens, components, and styles from Figma files.

Community
Intermediate
rodhrodh

prototype

Convert wireframe designs into executable prompts for prototyping tools.

Community
Intermediate
pawan0631pawan0631

figma-generate-design

Build full-page Figma screens from code or descriptions using design system components.

Community
Advanced