Figma agent skills
Work with Figma designs, Code Connect, design systems, and design-to-code workflows using publisher-maintained instructions.
Published by Figma
What these skills help with
Work with Figma designs, Code Connect, design systems, and design-to-code workflows using publisher-maintained instructions.
Connect designs to code
Map Figma components to reusable code with Code Connect.
Build from designs
Use design context to implement interfaces in code.
Create reusable design libraries
Generate component libraries for consistent interface design.
Explore Figma skills
View all
Figma Code Connect
Creates and maintains Figma Code Connect template files that map Figma components to code snippets.
Figma Create New File
Create Figma Design, FigJam, and Slides files in a team workspace.
Figma Design To Code
Translate Figma designs into application code using design context, tokens, and component mappings.
Install Figma skills
Download the complete source, choose a skill folder, and follow the setup instructions for your assistant.
Read the source repository
Check prerequisites, supported tools, and installation steps from the publisher.
figma/dev-mode-mcp-server-guideDownload the source files
Keep scripts and references with the SKILL.md file. Some skills require a service account or API credentials.
Download source ZIP
Figma skill workflows
Plan a workshop in FigJam
Organize a collaborative diagram or whiteboard for a team session.
Prepare a slide deck
Turn the presentation brief into a structured Figma Slides document.
Map an interaction from video
Analyze the reference video and document the interface behavior.
Agent skills FAQ
An agent skill is a folder of instructions, usually headed by a SKILL.md file, that helps an AI assistant perform a specific task. A skill may also include scripts, examples, and reference files.
