Open Pencil
Open Pencil is an AI-native design editor and open-source Figma alternative.
Last verified:
What is Open Pencil?
Open Pencil is an open-source, AI-native design editor that serves as a Figma alternative built from scratch with full .fig file compatibility. It enables users to turn natural language prompts into UI directly on an infinite canvas in real-time using built-in AI. The tool opens and saves native Figma files using the same Kiwi binary codec as Figma, supporting copy-paste between Figma and Open Pencil while preserving fills, strokes, auto-layout, text, effects, corner radii, and vector networks.
Key features include concurrent Agent Teams where an orchestrator decomposes complex pages into spatial sub-tasks handled by multiple AI agents simultaneously, Design-as-Code via .op JSON files that are Git-friendly and diffable, and a built-in MCP Server connecting to Claude Code, Cursor, and Windsurf. The tool exports to React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, and React Native. It runs as a web app at app.Open Pencil.dev and as a native desktop application via Tauri v2 (~7 MB) on macOS, Windows, and Linux.
Open Pencil is for UI/UX designers who want a Figma alternative, developers who need design-to-code workflows, teams requiring real-time P2P collaboration via WebRTC without servers, and open-source enthusiasts who want to modify and extend the tool. It supports 90+ AI tools for creating shapes, setting styles, managing layouts, working with components and variables, running boolean operations, analyzing design tokens, and exporting assets.
The tool includes professional vector editing with pen tool supporting vector networks (not simple paths), bezier curves with tangent handles, auto-layout via Yoga WASM with flexbox and CSS Grid, components with override support, variables with design tokens supporting collections and modes (Light/Dark), and rich text with per-character formatting. Rendering uses Skia (CanvasKit WASM), the same engine as Figma.
Open Pencil pricing
Pricing model: Freemium
Completely free and open-source under the MIT License. No subscription, no account required, no credit card needed. Free to use, modify, and distribute forever. The only cost is bringing your own API key for AI features from providers like Anthropic, OpenAI, Google AI, or OpenRouter. Desktop app downloads are free, web app at app.openpencil.dev is free, and all features including AI chat, MCP server, CLI, and SDK are free.
Open Pencil pros
- Fully free and open-source under MIT License
- Native .fig file import/export with same Kiwi codec as Figma
- Copy-paste between Figma and OpenPencil bidirectionally
- Built-in AI chat with 90+ tools for design operations
- Bring your own API key - no subscription required
- No account or internet required for core features
- Design-as-Code with Git-friendly .op JSON files
- Export to React+Tailwind, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native
- Real-time P2P collaboration via WebRTC without servers
- Desktop app is ~7 MB with Tauri v2, signed & notarized for macOS
- Runs in browser instantly at app.openpencil.dev, no installation
- MCP Server for headless .fig file access with Claude Code, Cursor, Windsurf
- Full undo support for all AI mutations and operations
- Auto-layout via Yoga WASM with flexbox and CSS Grid
- Google Fonts fallback - auto-fetches missing fonts from .fig files
- Multi-page documents with independent viewport state
- Multi-file tabs for opening multiple documents simultaneously
- SDK available for building custom editors (@open-pencil/vue)
- CLI for inspecting, exporting, analyzing .fig files from terminal
- PWA installable on mobile with touch-optimized UI
Open Pencil cons
- Desktop app requires Rust and platform-specific prerequisites to build from source
- AI features require bringing your own API key from Anthropic, OpenAI, Google AI, or OpenRouter
- Relatively new tool with smaller community compared to Figma
- Limited plugin ecosystem compared to established design tools
- No built-in cloud storage - relies on local files or user's own setup
- Real-time collaboration is P2P only - no server-based persistence
- Development server opens at localhost:1420 requiring local setup
- Some advanced Figma features may not be fully implemented yet
Frequently asked questions about Open Pencil
What is OpenPencil?
OpenPencil is the world's first open-source AI-native vector design tool and Figma alternative built from scratch with full .fig file compatibility. It enables users to turn natural language prompts into UI directly on an infinite canvas in real-time, featuring concurrent Agent Teams, Design-as-Code via .op JSON files, built-in MCP Server, and multi-model intelligence support.
Is OpenPencil really free?
Yes, OpenPencil is fully free and open-source under the MIT License. There is no subscription, no account required, no credit card needed, and no internet required for core features. The only potential cost is bringing your own API key from AI providers like Anthropic or OpenAI if you want to use AI chat features.
Can I open Figma files in OpenPencil?
Yes, OpenPencil opens and saves native Figma .fig files directly using the same Kiwi binary codec as Figma with 194 schema definitions and ~390 fields per node. You can also copy and paste between Figma and OpenPencil bidirectionally, with fills, strokes, auto-layout, text, effects, corner radii, and vector networks preserved.
How do I install OpenPencil?
You can use OpenPencil immediately in your browser at app.openpencil.dev with no installation required. For desktop, download pre-built binaries for macOS (Apple Silicon .dmg aarch64, Intel .dmg x64), Windows (x64/ARM .msi or .exe), or Linux (x64 .AppImage or .deb) from the releases page. macOS users can also install via Homebrew: brew install open-pencil/tap/open-pencil.
What AI models does OpenPencil support?
OpenPencil supports connecting to Anthropic, OpenAI, Google AI, OpenRouter, or any compatible endpoint for AI chat. You bring your own API key and configure your preferred provider. The AI chat has 90+ tools that can create shapes, set styles, manage layout, work with components and variables, run boolean operations, analyze design tokens, and export assets.
What code exports does OpenPencil support?
OpenPencil exports to React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, and React Native. Design-as-Code uses .op JSON files that are Git-friendly and diffable. You can also export images (PNG, JPG, WEBP at 0.5×–4× scale) and SVG with shapes, text with style runs, gradients, effects, and blend modes.
How does real-time collaboration work?
OpenPencil uses P2P collaboration via WebRTC with no server required. Share a link and edit together with live cursors showing colored arrows and name pills, presence avatars, and follow mode to click and follow a peer's viewport. Room IDs are secure via crypto.getRandomValues(), and local persistence uses IndexedDB.
What is the MCP Server in OpenPencil?
The MCP Server connects Claude Code, Cursor, Windsurf, or any MCP client to read and write .fig files headlessly with 90+ tools. It supports two transports: stdio and HTTP. Install with npm install -g @open-pencil/mcp and configure in your MCP client settings with command 'openpencil-mcp'.
Can I build custom editors with OpenPencil?
Yes, OpenPencil is also a toolkit for building custom editors. The SDK lives in the monorepo and is published as @open-pencil/vue for Vue applications. It has three layers: @open-pencil/core (framework-agnostic editor engine), @open-pencil/vue (Vue composables and headless primitives), and your app for styling, routing, file flows, and product-specific UI.
What drawing tools does OpenPencil have?
OpenPencil includes Shapes (Rectangle R, Ellipse O, Line L, Polygon, Star), Pen tool with vector networks (not simple paths) and bezier curves with tangent handles, Text with canvas-native editing and IME support, Rich text with per-character bold/italic/underline/strikethrough, Auto-layout via ⇧A toggling, Components with create (⌥⌘K) and component sets (⇧⌘K), Variables with design tokens, and Sections as organizational containers.