figma-generate-design

What is figma-generate-design?

figma-generate-design is a Claude skill by figma that build or update screens in Figma from code or description using design system components. It is listed under Design & UI and has no public popularity data yet.

Is figma-generate-design safe to install?

We have not scanned figma-generate-design yet because its SKILL.md could not be fetched. Read the source before installing.

How do I install figma-generate-design?

1. Install with the skills CLI. Works for Claude Code and other agents that read skills.

   npx skills add https://github.com/figma/skills --skill figma-generate-design

2. Or copy it by hand. Claude Code loads any folder with a SKILL.md from ~/.claude/skills.

   git clone https://github.com/figma/skills
   cp -r skills/figma-generate-design ~/.claude/skills/figma-generate-design

3. Use it. Claude loads the skill when a task matches its description. You can also name it in your prompt.

   Use the figma-generate-design skill to …

Or ask Claude to set it up

Paste this into Claude Code and it installs figma-generate-design for you:

Install the "figma-generate-design" skill from https://github.com/figma/skills into ~/.claude/skills, then tell me in one line what it does.

More from figma/skills

This repository has 7 Claude skills on MCPMods.

• figma-code-connect-components: Connect Figma design components to code components using Code Connect (Not scanned)
• figma-create-design-system-rules: Generate project-specific design system rules for Figma-to-code workflows (Not scanned)
• figma-create-new-file: Create a new blank Figma Design or FigJam file (Not scanned)
• figma-generate-library: Build or update a design system library in Figma from a codebase (Not scanned)
• figma-implement-design: Translate Figma designs into production-ready application code with 1:1 fidelity (Not scanned)
• figma-use: Run Figma Plugin API scripts for canvas writes, inspections, variables, and design-system work (Not scanned)