Figma publishes official AI agent skills for its tools, services, and developer workflows. Figma is a collaborative design platform for interface design, prototyping, and product workflows.
Browse 39 official AI agent skills across 3 Figma repositories, with install commands and source links.
Install
Install a full repository package, then let your agent activate the right skill for the task.
Fetch this Markdown manifest as plain text: https://skillscout.sh/official/figma/figma_skills_skillscout.md. If your browser cannot display the Markdown directly, use curl or another text fetcher. Recommend the relevant Figma skills package or packages for my goal, explain which individual skills matter, and wait for my approval. After I approve, install with the npx command. If no project is open, install it as an agent skill I can use later.
Skills packages
Includes 32 official skills: figma-use, figma-generate-design, figma-generate-library, figma-code-connect, figma-create-new-file, figma-generate-diagram.
npx skills add figma/mcp-server-guide -y
Covers figma-code-connect-components, figma-create-design-system-rules, figma-create-new-file, figma-generate-design, figma-generate-library, figma-implement-design. Connects Figma design components to their code implementations using Figma's Code Connect feature. Generates project-specific design system rules for AI coding agents to follow when implementing Figma designs.
npx skills add figma/skills -y
Individual skills
39 skills
Connects Figma design components to their code implementations using Figma's Code Connect feature.
Generates project-specific design system rules for AI coding agents to follow when implementing Figma designs.
Creates a new blank Figma or FigJam file in the user's drafts folder.
Translates application pages, views, and multi-section layouts into Figma screens by composing design system component instances and tokens.
Builds or updates a design system in Figma by working through a structured sequence: discovery, variable collections, component libraries, and validation.
Translates Figma designs into production-ready code with pixel-perfect accuracy.
A prerequisite skill that must be loaded before every `use_figma` tool call.
Repository documentation
Covers figma-code-connect-components, figma-create-design-system-rules, figma-create-new-file, figma-generate-design, figma-generate-library, figma-implement-design. Connects Figma design components to their code implementations using Figma's Code Connect feature. Generates project-specific design system rules for AI coding agents to follow when implementing Figma designs.
Install the full package:
npx skills add figma/skills -yInstall a specific skill:
npx skills add figma/skills@figma-code-connect-components -yUse the package when you want your agent to choose the relevant skill from this official Figma repository.
View figma/skills on GitHub