OpenPencil.dev

What is OpenPencil.dev?

OpenPencil is an open-source, Figma-compatible design editor that prioritizes user control, privacy, and extensibility. It natively opens and edits .fig files, allowing seamless copy-paste between Figma and OpenPencil with round-trip fidelity via the Kiwi binary codec. The tool is fully programmable, offering a headless CLI for inspecting, exporting, and analyzing .fig files, as well as JSON output for CI/CD pipelines and automation. Built-in AI assists with design tasks, and the Figma Plugin API can be executed via eval, enabling migration of existing plugins. OpenPencil also exports to Tailwind CSS, making it ideal for developers who want to convert designs directly into utility classes.

Beyond being a standalone editor, OpenPencil serves as a toolkit for building custom editing surfaces. Its Vue SDK allows developers to embed the editor into other products or assemble workflow-specific editors around the same core engine. This makes it suitable for teams needing tailored design tools, such as internal dashboards or specialized graphic editors. The built-in chat features 90 tools for creating shapes, setting styles, managing layout, and analyzing design tokens. Additionally, an MCP server integrates with AI coding assistants like Claude Code, Cursor, and Windsurf, enabling AI-driven design modifications.

OpenPencil is licensed under MIT, meaning users can read and modify every part of the codebase—the editor, engine, file codec, and CLI. It operates without requiring an account, server, or internet connection; the desktop app is approximately 7 MB and installable via Homebrew, while a web app is also available. Real-time collaboration is supported through P2P WebRTC, allowing users to share a link and edit together with live cursors and follow mode, all without a central server. This makes OpenPencil a powerful, privacy-focused alternative to proprietary design tools, especially for developers and teams who value open-source flexibility and offline capability.

Use Cases

Key Features

Figma compatible editor native .fig file support round trip copy paste headless CLI JSON output for CI/C3D built in AI assistance Figma Plugin API execution Tailwind CSS export Vue SDK embeddable 90 tool chat features

Who is it for?

UI/UX designers, frontend developers, design system teams, product teams, open, source contributors, plugin developers, internal tool builders

Similar Tools