# Figma AI Agent Skills 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. Official page: https://skillscout.sh/official/figma/ Markdown page: https://skillscout.sh/official/figma/figma_skills_skillscout.md Vendor website: https://www.figma.com/ ## Prompt for your agent 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 ### figma/mcp-server-guide Includes 32 official skills: figma-use, figma-generate-design, figma-generate-library, figma-code-connect, figma-create-new-file, figma-generate-diagram. Install: ```bash npx skills add figma/mcp-server-guide -y ``` Source: https://github.com/figma/mcp-server-guide ### figma/skills 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: ```bash npx skills add figma/skills -y ``` Source: https://officialskills.sh/figma/skills ## Individual skills ### figma-use Official Figma skill from figma/mcp-server-guide. Install: ```bash npx skills add figma/mcp-server-guide@figma-use -y ``` Package: figma/mcp-server-guide Source: https://github.com/figma/mcp-server-guide/tree/HEAD/skills/figma-use ### figma-generate-design Official Figma skill from figma/mcp-server-guide. Install: ```bash npx skills add figma/mcp-server-guide@figma-generate-design -y ``` Package: figma/mcp-server-guide Source: https://github.com/figma/mcp-server-guide/tree/HEAD/skills/figma-generate-design ### figma-generate-library Official Figma skill from figma/mcp-server-guide. Install: ```bash npx skills add figma/mcp-server-guide@figma-generate-library -y ``` Package: figma/mcp-server-guide Source: https://github.com/figma/mcp-server-guide/tree/HEAD/skills/figma-generate-library ### figma-code-connect Official Figma skill from figma/mcp-server-guide. Install: ```bash npx skills add figma/mcp-server-guide@figma-code-connect -y ``` Package: figma/mcp-server-guide Source: https://github.com/figma/mcp-server-guide/tree/HEAD/skills/figma-code-connect ### figma-create-new-file Official Figma skill from figma/mcp-server-guide. Install: ```bash npx skills add figma/mcp-server-guide@figma-create-new-file -y ``` Package: figma/mcp-server-guide Source: https://github.com/figma/mcp-server-guide/tree/HEAD/skills/figma-create-new-file ### figma-generate-diagram Official Figma skill from figma/mcp-server-guide. Install: ```bash npx skills add figma/mcp-server-guide@figma-generate-diagram -y ``` Package: figma/mcp-server-guide Source: https://github.com/figma/mcp-server-guide/tree/HEAD/skills/figma-generate-diagram ### figma-use-figjam Official Figma skill from figma/mcp-server-guide. Install: ```bash npx skills add figma/mcp-server-guide@figma-use-figjam -y ``` Package: figma/mcp-server-guide Source: https://github.com/figma/mcp-server-guide/tree/HEAD/skills/figma-use-figjam ### figma-use-slides Official Figma skill from figma/mcp-server-guide. Install: ```bash npx skills add figma/mcp-server-guide@figma-use-slides -y ``` Package: figma/mcp-server-guide Source: https://github.com/figma/mcp-server-guide/tree/HEAD/skills/figma-use-slides ### figma-design-to-code Official Figma skill from figma/mcp-server-guide. Install: ```bash npx skills add figma/mcp-server-guide@figma-design-to-code -y ``` Package: figma/mcp-server-guide Source: https://github.com/figma/mcp-server-guide/tree/HEAD/skills/figma-design-to-code ### figma-swiftui Official Figma skill from figma/mcp-server-guide. Install: ```bash npx skills add figma/mcp-server-guide@figma-swiftui -y ``` Package: figma/mcp-server-guide Source: https://github.com/figma/mcp-server-guide/tree/HEAD/skills/figma-swiftui ### figma-implement-motion Official Figma skill from figma/mcp-server-guide. Install: ```bash npx skills add figma/mcp-server-guide@figma-implement-motion -y ``` Package: figma/mcp-server-guide Source: https://github.com/figma/mcp-server-guide/tree/HEAD/skills/figma-implement-motion ### figma-use-motion Official Figma skill from figma/mcp-server-guide. Install: ```bash npx skills add figma/mcp-server-guide@figma-use-motion -y ``` Package: figma/mcp-server-guide Source: https://github.com/figma/mcp-server-guide/tree/HEAD/skills/figma-use-motion ### figma-code-connect Official Figma skill from figma/mcp-server-guide. Install: ```bash npx skills add figma/mcp-server-guide@figma-code-connect -y ``` Package: figma/mcp-server-guide Source: https://github.com/figma/dev-mode-mcp-server-guide/tree/HEAD/skills/figma-code-connect ### figma-use Official Figma skill from figma/mcp-server-guide. Install: ```bash npx skills add figma/mcp-server-guide@figma-use -y ``` Package: figma/mcp-server-guide Source: https://github.com/figma/dev-mode-mcp-server-guide/tree/HEAD/skills/figma-use ### figma-generate-design Official Figma skill from figma/mcp-server-guide. Install: ```bash npx skills add figma/mcp-server-guide@figma-generate-design -y ``` Package: figma/mcp-server-guide Source: https://github.com/figma/dev-mode-mcp-server-guide/tree/HEAD/skills/figma-generate-design ### figma-generate-diagram Official Figma skill from figma/mcp-server-guide. Install: ```bash npx skills add figma/mcp-server-guide@figma-generate-diagram -y ``` Package: figma/mcp-server-guide Source: https://github.com/figma/dev-mode-mcp-server-guide/tree/HEAD/skills/figma-generate-diagram ### figma-generate-library Official Figma skill from figma/mcp-server-guide. Install: ```bash npx skills add figma/mcp-server-guide@figma-generate-library -y ``` Package: figma/mcp-server-guide Source: https://github.com/figma/dev-mode-mcp-server-guide/tree/HEAD/skills/figma-generate-library ### figma-use-figjam Official Figma skill from figma/mcp-server-guide. Install: ```bash npx skills add figma/mcp-server-guide@figma-use-figjam -y ``` Package: figma/mcp-server-guide Source: https://github.com/figma/dev-mode-mcp-server-guide/tree/HEAD/skills/figma-use-figjam ### figma-create-new-file Official Figma skill from figma/mcp-server-guide. Install: ```bash npx skills add figma/mcp-server-guide@figma-create-new-file -y ``` Package: figma/mcp-server-guide Source: https://github.com/figma/dev-mode-mcp-server-guide/tree/HEAD/skills/figma-create-new-file ### figma-use-slides Official Figma skill from figma/mcp-server-guide. Install: ```bash npx skills add figma/mcp-server-guide@figma-use-slides -y ``` Package: figma/mcp-server-guide Source: https://github.com/figma/dev-mode-mcp-server-guide/tree/HEAD/skills/figma-use-slides ### generate-project-plan Official Figma skill from figma/mcp-server-guide. Install: ```bash npx skills add figma/mcp-server-guide@generate-project-plan -y ``` Package: figma/mcp-server-guide Source: https://github.com/figma/mcp-server-guide/tree/HEAD/workflow-skills/generate-project-plan ### figma-swiftui Official Figma skill from figma/mcp-server-guide. Install: ```bash npx skills add figma/mcp-server-guide@figma-swiftui -y ``` Package: figma/mcp-server-guide Source: https://github.com/figma/dev-mode-mcp-server-guide/tree/HEAD/skills/figma-swiftui ### figma-use-motion Official Figma skill from figma/mcp-server-guide. Install: ```bash npx skills add figma/mcp-server-guide@figma-use-motion -y ``` Package: figma/mcp-server-guide Source: https://github.com/figma/dev-mode-mcp-server-guide/tree/HEAD/skills/figma-use-motion ### figma-implement-motion Official Figma skill from figma/mcp-server-guide. Install: ```bash npx skills add figma/mcp-server-guide@figma-implement-motion -y ``` Package: figma/mcp-server-guide Source: https://github.com/figma/dev-mode-mcp-server-guide/tree/HEAD/skills/figma-implement-motion ### video-interaction-mapper Official Figma skill from figma/mcp-server-guide. Install: ```bash npx skills add figma/mcp-server-guide@video-interaction-mapper -y ``` Package: figma/mcp-server-guide Source: https://github.com/figma/mcp-server-guide/tree/HEAD/workflow-skills/video-interaction-mapper ### figma-design-to-code Official Figma skill from figma/mcp-server-guide. Install: ```bash npx skills add figma/mcp-server-guide@figma-design-to-code -y ``` Package: figma/mcp-server-guide Source: https://github.com/figma/dev-mode-mcp-server-guide/tree/HEAD/skills/figma-design-to-code ### figma-generative-plugins Official Figma skill from figma/mcp-server-guide. Install: ```bash npx skills add figma/mcp-server-guide@figma-generative-plugins -y ``` Package: figma/mcp-server-guide Source: https://github.com/figma/mcp-server-guide/tree/HEAD/skills/figma-generative-plugins ### figma-shaders Official Figma skill from figma/mcp-server-guide. Install: ```bash npx skills add figma/mcp-server-guide@figma-shaders -y ``` Package: figma/mcp-server-guide Source: https://github.com/figma/mcp-server-guide/tree/HEAD/skills/figma-shaders ### figma-generative-plugins Official Figma skill from figma/mcp-server-guide. Install: ```bash npx skills add figma/mcp-server-guide@figma-generative-plugins -y ``` Package: figma/mcp-server-guide Source: https://github.com/figma/dev-mode-mcp-server-guide/tree/HEAD/skills/figma-generative-plugins ### figma-shaders Official Figma skill from figma/mcp-server-guide. Install: ```bash npx skills add figma/mcp-server-guide@figma-shaders -y ``` Package: figma/mcp-server-guide Source: https://github.com/figma/dev-mode-mcp-server-guide/tree/HEAD/skills/figma-shaders ### generate-project-plan Official Figma skill from figma/mcp-server-guide. Install: ```bash npx skills add figma/mcp-server-guide@generate-project-plan -y ``` Package: figma/mcp-server-guide Source: https://github.com/figma/dev-mode-mcp-server-guide/tree/HEAD/workflow-skills/generate-project-plan ### video-interaction-mapper Official Figma skill from figma/mcp-server-guide. Install: ```bash npx skills add figma/mcp-server-guide@video-interaction-mapper -y ``` Package: figma/mcp-server-guide Source: https://github.com/figma/dev-mode-mcp-server-guide/tree/HEAD/workflow-skills/video-interaction-mapper ### figma-code-connect-components Connects Figma design components to their code implementations using Figma's Code Connect feature. Install: ```bash npx skills add figma/skills@figma-code-connect-components -y ``` Package: figma/skills Source: https://officialskills.sh/figma/skills/figma-code-connect-components ### figma-create-design-system-rules Generates project-specific design system rules for AI coding agents to follow when implementing Figma designs. Install: ```bash npx skills add figma/skills@figma-create-design-system-rules -y ``` Package: figma/skills Source: https://officialskills.sh/figma/skills/figma-create-design-system-rules ### figma-create-new-file Creates a new blank Figma or FigJam file in the user's drafts folder. Install: ```bash npx skills add figma/skills@figma-create-new-file -y ``` Package: figma/skills Source: https://officialskills.sh/figma/skills/figma-create-new-file ### figma-generate-design Translates application pages, views, and multi-section layouts into Figma screens by composing design system component instances and tokens. Install: ```bash npx skills add figma/skills@figma-generate-design -y ``` Package: figma/skills Source: https://officialskills.sh/figma/skills/figma-generate-design ### figma-generate-library Builds or updates a design system in Figma by working through a structured sequence: discovery, variable collections, component libraries, and validation. Install: ```bash npx skills add figma/skills@figma-generate-library -y ``` Package: figma/skills Source: https://officialskills.sh/figma/skills/figma-generate-library ### figma-implement-design Translates Figma designs into production-ready code with pixel-perfect accuracy. Install: ```bash npx skills add figma/skills@figma-implement-design -y ``` Package: figma/skills Source: https://officialskills.sh/figma/skills/figma-implement-design ### figma-use A prerequisite skill that must be loaded before every `use_figma` tool call. Install: ```bash npx skills add figma/skills@figma-use -y ``` Package: figma/skills Source: https://officialskills.sh/figma/skills/figma-use ## figma/skills package overview 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. ### Top skills in this package - figma-code-connect-components: Connects Figma design components to their code implementations using Figma's Code Connect feature. - figma-create-design-system-rules: Generates project-specific design system rules for AI coding agents to follow when implementing Figma designs. - figma-create-new-file: Creates a new blank Figma or FigJam file in the user's drafts folder. - figma-generate-design: Translates application pages, views, and multi-section layouts into Figma screens by composing design system component instances and tokens. - figma-generate-library: Builds or updates a design system in Figma by working through a structured sequence: discovery, variable collections, component libraries, and validation. - figma-implement-design: Translates Figma designs into production-ready code with pixel-perfect accuracy. - figma-use: A prerequisite skill that must be loaded before every `use_figma` tool call. ### Install Install the full package: ```bash npx skills add figma/skills -y ``` Install a specific skill: ```bash npx skills add figma/skills@figma-code-connect-components -y ``` Use the package when you want your agent to choose the relevant skill from this official repository. Source: https://github.com/figma/skills#readme