ultrasound123d/openfigma
Developer toolsЭта страница переведена автоматически. Технические детали смотрите в оригинале. Открыть оригинал
OpenFigma — a Figma-style vector design editor for the browser. Next.js 16 · React 19 · SVG · Zustand, plus an MCP server (24 AI tools) that lets AI agents build real UI.
Обзор
is a practical, production-shaped clone of a vector design editor, built entirely with , an , and state management. Fully useable out of the box: no heavy database, no deploy complexity — run it and start designing. The idea began in December 2025 as an experiment to understand : 1. — the way Figma behaves on the canvas was studied feature by feature: selection, snapping, guides, layout, history. 2. — instead of copying, every feature was rebuilt from scratch: Next.js + React instead of the original web stack, SVG instead of the C++/WebGL engine. 3. — every important trade-off (SVG vs WebGL, Zustand vs Redux, dual persistence...) was written down with alternatives and reasoning as it was made. 4. — features are checked one by one against the original behavior: more than 50 core features (smart guides, boolean ops, auto-layout, components, undo/redo...) reached ✅ .
README
Показан фрагмент оригинального README. Открыть оригинал.
🎨 OpenFigma — A Figma-Style Design Editor for the Browser
OpenFigma is a practical, production-shaped clone of a Figma-like vector design editor, built entirely with Next.js 16 + React 19 + TypeScript, an SVG rendering engine, and Zustand state management. Fully useable out of the box: no heavy database, no deploy complexity — run it and start designing.
✨ What’s new in v0.5.0 — terminal audit wave (phases 17–23)
Final wave from the terminal audit — three fresh search surfaces over the source corpus (every remaining gap closed, every rejection documented with evidence). On top of v0.4.0 (auto layout, text depth, full gradients, Section/Table/Sticky, comments):
| Phase | Delivered |
|---|---|
| 17 — Paint & vector | pattern paint (tiled fills), outline stroke, flatten, arc tool (donut geometry) |
| 18 — Vector editing | vector edit on parametric shapes (exact Bézier conversion), split vector network |
| 19 — Text advances | text on path (any target + offset slider), hyperlink runs (rendered, clickable in the player), emoji picker, place-image queue mode |
| 20 — Prototype advances | flow starting points (named, first-start precedence), fixed-when-scrolling overlay, Change To, Scroll To |
| 21 — Edit & view parity | paste-over, select-similar/inverse (8 criteria), find & replace (all pages), outlines mode (+hidden/bounds), pixel preview (+retina) |
| 22 — Collaboration | multiplayer presence (SSE cursors/viewport/selection), version history (named + autosave, restore-as-new-version), published libraries (subscribe + master/instance insert) |
| 23 — Audit wave | copy as PNG/SVG/text/layer-name, copy/paste properties, paste here, unlock all, resize-to-fit, math in inputs, frame selection, nudge amounts, shortcuts modal (⌘/), show-comments toggle, add variant |
All phases closed with tsc --noEmit + eslint + next build at zero errors, live browser verification and VLM-checked screenshots.
📸 Screenshots
Curated captures — live-verified in the browser and VLM-checked. Only the significant ones live in img/; the full phase-by-phase set (28 shots) is in download/.
The everyday surface
Paint & geometry
Design systems
Layout engines
Content & collaboration
Установка
This server does not publish a one-line install command.
Open the repository installation guide Новичок в MCP? Начните с руководства на mcpskill.org →Конфигурация
{
"mcpServers": {
"figma-editor": {
"command": "node",
"args": ["mcp-server/dist/index.js"],
"env": { "EDITOR_API_URL": "http://localhost:3000" }
}
}
}