skills.rest
Martino17x
Martino17xCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

figma-generate-design

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

Updated Aug 13, 2026
Search Tags:#design system#figma#design tokens#design generation#screen generation#code to figma
One-click install
npx skills add https://github.com/Martino17x/Sentinel-Invest --skill figma-generate-design-martino17x
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-generate-design
Source: https://github.com/Martino17x/Sentinel-Invest/tree/main/.agents/skills/skills-design/figma-generate-design
Command: npx skills add https://github.com/Martino17x/Sentinel-Invest --skill figma-generate-design-martino17x

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Translating implemented app pages or written descriptions into Figma designs is slow manual work, and keeping Figma screens aligned with design system components and tokens is error-prone. This Skill automates that translation so designs stay consistent with the source of truth. ## Core Features & Use Cases - Code-to-Figma Translation: Convert existing app pages or component code into Figma screens built from design system components. - Design Token Application: Apply design tokens so generated screens match the established visual system. - Screen Updates: Update existing Figma screens when the underlying code or description changes. - Use Case: A developer finishes a settings page in React and asks the agent to reproduce it in Figma using the team's design system, producing a screen designers can review and iterate on. ## Quick Start Ask the agent to generate a Figma screen from your current page code using the figma-generate-design skill.

Frequently Asked Questions about figma-generate-design

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

FAQPage Schema
How do I convert code to a Figma design?▼

Invoke the figma-generate-design skill by name or with a trigger phrase like "code to figma". The skill builds or updates Figma screens from your code or description using design system components and tokens.

How do I generate Figma screens from a text description?▼

Describe the screen you want and ask the agent to run figma-generate-design. The skill translates the description into a Figma screen composed of design system components rather than freeform elements.

Does this skill work without installing the upstream Figma bundle?▼

No. This entry is a catalogue stub that advertises the skill for discovery. To run the full workflow with its original scripts and references, install the upstream bundle from https://github.com/figma/skills into your agent's skills directory.

Can I update an existing Figma screen instead of creating a new one?▼

Yes. The skill supports both building new screens and updating existing ones, so regenerated screens can reflect changes in the underlying code or description while staying aligned with design tokens.

What are the limitations of code-to-Figma generation?▼

Generated screens depend on the available design system components and tokens, so highly custom layouts may need manual adjustment in Figma. The catalogue entry itself contains no executable scripts and relies on the upstream bundle.

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
launchapp-devlaunchapp-dev
38

design-review-process

Codify a four-gate design review process with criteria, checklists, and approvals.

Official
Advanced
serkan-ozalserkan-ozal
7

visual-testing

Detect visual discrepancies between live pages and Figma design references.

Community
Intermediate
mayzhangminmayzhangmin

figma-generate-design

Translate screenshots into pixel-accurate Figma screens using a published design library.

Community
Advanced