Claude skillsfor figma
The 6 skills and connectors we'd install first, in order. Hand-picked from designers tools reviewed on SkillHub.
Figma
6 picks · install in this order- Figma Dev Mode MCPConnects to Figma Dev Mode
Figma's official MCP server exposing design structure, auto-layout, and styles to AI coding agents.
- Framelink Figma MCPConnects to Framelink Figma
Provide Figma layout information to AI coding agents for accurate design implementation.
Translate Figma designs into production-ready code with 1:1 visual fidelity. Useful for handing off Figma frames straight to a frontend agent.
Build or update a professional-grade design system library in Figma from a codebase. Useful for keeping the Figma source of truth in sync with shipped components.
Connect Figma design components to code components using Code Connect so design-system updates flow into the codebase automatically.
- Figma Variable AuditSkill
Audit Figma variable collections: tier mapping, naming, alias chains, modes, orphans; can fix in place with Figma Console MCP.
Run the whole chain in Claude
From Figma to launch-ready asset
Take a single Figma frame and ship the full asset kit a launch needs — copy, code, social, the lot.
- Figma Dev Mode MCP
- Frontend Design
- Canvas Design
- Web Asset Generator
- Slack GIF Creator
Health check for your design system
Find out where tokens, components and code have drifted apart, and ship the fixes with clear release notes.
- Figma Dev Mode MCP
- Token Audit
- Component Audit
- Drift Detection
- Change Communication
Brand-consistent decks in 10 minutes
Go from blank slide to a polished, on-brand deck without leaving Claude. Five tools, one chain.
- PowerPoint Skill
- Brand Guidelines
- Theme Factory
- Canvas Design
- Slack GIF Creator
Built something for designers?
We're actively curating this list. If your skill or MCP server belongs here, submit it and we'll review within a few days.
Submit yours