Vibma — Vibe Design meets Figma
Vibma is an open-source MCP server that lets AI agents design directly in Figma. Read layouts, create components, modify styles, and build entire design systems through conversation.
What's Included
74 MCP tools across 17 modules:
- Document & Navigation — pages, viewport, selection
- Node Creation — frames, shapes, text, sections, SVG, boolean operations
- Components — create, combine as variants, add properties, instantiate, search
- Layout — auto-layout, padding, alignment, sizing, spacing via
update_frame - Styling — fills, strokes, corner radius, opacity, effects, constraints
- Typography — font properties, text alignment, text styles, text content scanning
- Design Tokens — paint styles, text styles, effect styles with smart resolution
- Variables — collections, modes, variable binding to node properties
- Linting — 8 lint rules with auto-fix tools for auto-layout and shape-to-frame conversion
- Export — node images, CSS extraction
Architecture
- MCP Server (
dist/mcp.js) — runs locally, speaks MCP to any compatible AI client (Claude, Cursor, etc.) - Figma Plugin (
plugin/) — runs inside Figma, connects to the MCP server via local WebSocket relay - WebSocket Relay — bridges MCP server ↔ Figma plugin on localhost
Key Design Decisions
- Batch-first — most tools accept
items: [...]arrays for bulk operations - Smart warnings — hardcoded colors suggest matching paint styles; manual font props suggest text styles
- Style resolution — fuzzy name matching with available-names-on-failure for self-correction
- Variable binding at creation —
fillVariableId,strokeVariableId,fontColorVariableIdon create tools - Serialized autoFocus — viewport tracks created/modified nodes without racing the next command
Downloads
| Asset | Contents |
|---|---|
| vibma-mcp-v0.1.0.zip | MCP server build (mcp.js, mcp.cjs, type declarations)
|
| vibma-plugin-v0.1.0.zip | Figma plugin build (code.js, ui.html, manifest.json)
|
Setup
See DRAGME.md for full setup instructions, or paste this to your AI agent:
Set up Vibma so I can vibe-design in Figma.
Follow the instructions at https://raw.githubusercontent.com/ufira-ai/vibma/refs/heads/main/DRAGME.md
Requirements
- Figma desktop app
- Node.js or Bun
- Any MCP-compatible AI client (Claude Desktop, Claude Code, Cursor, etc.)
🤖 Generated with Claude Code