figma/dev-mode-mcp-server-guide
9 skills401 installs16.6k starsGitHub
Install
npx skills add https://github.com/figma/dev-mode-mcp-server-guideSkills in this repo
1Figma Code Connectfigma-code-connect is a Claude Code skill for design & ui/ux. It helps solo builders move faster with AI-assisted development.55installs2Figma Generate Designfigma-generate-design is a Claude Code skill for design & ui/ux. It helps solo builders move faster with AI-assisted development.53installs3Figma Usefigma-use is a Claude Code skill for design & ui/ux. It helps solo builders move faster with AI-assisted development.53installs4Figma Generate DiagramThe figma-generate-diagram skill must load before every generate_diagram tool call to route diagram types and enforce Mermaid constraints for FigJam output. Supported types are flowchart, sequenceDiagram, stateDiagram, gantt, and erDiagram. Unsupported types like pie, mindmap, class, and C4 should be declined without calling the tool. Routes architecture flowcharts, process flowcharts, sequence interactions, ERD schemas, state machines, and gantt schedules to per-type reference files. Recommends Figma manual edit for font or node moves on existing diagrams. Use when users ask to create diagrams in FigJam via Mermaid.51installs5Figma Generate Libraryfigma-generate-library is a Claude Code skill for design & ui/ux. It helps solo builders move faster with AI-assisted development.47installs6Figma Use FigjamThe figma-use-figjam skill guides agents using FigJam through the Figma Dev Mode MCP server for board navigation, diagram context, and collaborative whiteboarding workflows complementary to generate-diagram.46installs7Figma Create New Filefigma-create-new-file is a Claude Code skill for design & ui/ux. It helps solo builders move faster with AI-assisted development.45installs8Figma Use SlidesThe figma-use-slides skill helps agents use Figma's use_figma MCP tool in the Slides context, complementing foundational figma-use guidance for general canvas operations. It covers Slides-specific node creation, layout, text frames, and returning created node IDs from every build script as required by Figma MCP contracts. Workflow reads slide deck structure, plans component placement, executes build scripts through MCP, and validates resulting slide nodes against design constraints. Pair with figma-use for shared authentication, file targeting, and base tool invocation patterns. Output includes created node ID lists, slide thumbnails or structure summaries, and notes on deviations from requested layouts. Use when generating or updating Figma Slides decks via MCP rather than manual design tool interaction. Not every task needs the same depth of design thinking. Before doing anything, identify which gear you're in:28installs9Figma Swiftuifigma-swiftui skill documents SwiftUI ↔ Figma translation. Use whenever the user mentions Swift, SwiftUI, iOS, iPhone, or iPad - in EITHER direction - translating a Figma design into SwiftUI (design → code), or pushing SwiftUI views / screens / tokens back into a Figma file (code → design). Triggers on phrases like 'implement th. name: figma-swiftui description: "SwiftUI ↔ Figma translation. Use whenever the user mentions Swift, SwiftUI, iOS, iPhone, or iPad - in EITHER direction - translating a Figma design into SwiftUI (design → code), or pushing SwiftUI views / screens / tokens back into a Figma file (code → design). Triggers on phrases like 'implement this Figma design in SwiftUI', 'build this screen in Swift', 'push t23installs