OpenPencil

About

OpenPencil is an open-source design editor that opens your existing Figma .fig files directly, turning pages, components, instances, variables, and auto layout into editable layers that can be saved back to .fig. It also accepts pasted SVG or HTML and CSS, converting them into layers. The app includes design tools such as auto layout, constraints, fills, strokes, effects, and typography, along with undo support and components that accept slots.

The app also covers interactive components, design tokens stored as variables with modes, shader fills, and built-in linting that checks contrast, small text, default names, and empty layers, with one-click fixes. An AI agent can edit the document in response to plain-language requests, and it works with your own API keys or with coding agents such as Claude Code and Cursor. Collaboration happens peer to peer through shared links, with live cursors, comments, and voice calls, and a CLI and MCP server provide scripting and automation. Code export covers Vue, React, HTML, Tailwind, and Storybook stories.

OpenPencil stores documents as local files with no account or server required, and it can sync through your own S3-compatible bucket. Its editor, rendering engine, .fig codec, and CLI are released under the MIT license, and it offers export to .fig, PDF, PPTX, SVG, HTML, and JSX. A hosted team product, OpenPencil Cloud, is in early access and currently has a waitlist.