{"name":"OpenPencil: The AI-Native, Open-Source Figma Alternative Design Editor","description":"OpenPencil is an innovative AI-native design editor, serving as a powerful open-source alternative to Figma. It supports .fig files, integrates AI for design creation, and provides a fully programmable toolkit with a headless Vue SDK. This project emphasizes real-time collaboration and local data control, making it a compelling choice for designers and developers seeking flexibility and ownership.","github":"https://github.com/open-pencil/open-pencil","url":"https://osrepos.com/repo/open-pencil-open-pencil","source":"osrepos.com","sourceDescription":"This repository profile is provided by osrepos.com, an open source repository discovery platform.","repositoryProfile":"https://osrepos.com/repo/open-pencil-open-pencil","generatedFor":"open source discovery and AI-assisted research","markdown":"https://osrepos.com/repo/open-pencil-open-pencil.md","json":"https://osrepos.com/repo/open-pencil-open-pencil.json","topics":["ai","design-editor","figma-alternative","open-source","typescript","collaboration","design tools","webgpu"],"keywords":["ai","design-editor","figma-alternative","open-source","typescript","collaboration","design tools","webgpu"],"stars":null,"summary":"OpenPencil is an innovative AI-native design editor, serving as a powerful open-source alternative to Figma. It supports .fig files, integrates AI for design creation, and provides a fully programmable toolkit with a headless Vue SDK. This project emphasizes real-time collaboration and local data control, making it a compelling choice for designers and developers seeking flexibility and ownership.","content":"## Introduction\nOpenPencil is an AI-native, open-source design editor that aims to be a comprehensive alternative to Figma. It allows users to open and edit `.fig` and `.pen` design files, offering a familiar interface with powerful new capabilities. Key features include built-in AI for design creation, a fully programmable toolkit with a headless Vue SDK for custom editors, and real-time collaboration without needing a server or account.\n\nCurrently under active development, OpenPencil is not yet ready for production use. It focuses on Figma-compatible visual design with real-time collaboration, distinguishing itself from other projects with similar names.\n\nYou can [try OpenPencil online](https://app.openpencil.dev/demo){:target=\"_blank\"} to explore its features.\n\n## Installation\nGetting started with OpenPencil is straightforward. For macOS users, you can install it via Homebrew:\n\nsh\nbrew install openpencil\n\n\nAlternatively, you can download the desktop application from the [releases page](https://github.com/open-pencil/open-pencil/releases/latest){:target=\"_blank\"} or simply use the [web app](https://app.openpencil.dev){:target=\"_blank\"} directly, which requires no installation.\n\n## Examples\nOpenPencil offers a robust command-line interface (CLI) for interacting with design files programmatically.\n\nFirst, install the CLI globally:\n\nsh\nnpm install -g @open-pencil/cli\n# or: bun add -g @open-pencil/cli\n\n\nHere are some examples of what you can do:\n\n### Inspect Design Files\nBrowse node trees, search by name or type, and dig into properties without opening the editor:\n\nsh\nopenpencil tree design.fig\nopenpencil find design.pen --type TEXT\nopenpencil node design.fig --id 1:23\nopenpencil info design.fig\n\n\nExample output:\n\n\n[0] [page] \"Getting started\" (0:46566)\n  [0] [section] \"\" (0:46567)\n    [0] [frame] \"Body\" (0:46568)\n      [0] [frame] \"Introduction\" (0:46569)\n        [0] [frame] \"Introduction Card\" (0:46570)\n          [0] [frame] \"Guidance\" (0:46571)\n\n\n### Query with XPath\nUse XPath selectors to find nodes by type, attributes, and structure:\n\nsh\nopenpencil query design.fig \"//FRAME\"                              # All frames\nopenpencil query design.fig \"//FRAME[@width < 300]\"                # Frames under 300px\nopenpencil query design.fig \"//TEXT[contains(@name, 'Button')]\"     # Text with 'Button' in name\nopenpencil query design.fig \"//*[@cornerRadius > 0]\"               # Rounded corners\nopenpencil query design.fig \"//SECTION//TEXT\"                       # Text inside sections\n\n\n### Export Designs\nRender to various formats like PNG, JPG, WEBP, SVG, `.fig`, or JSX. You can also export selections/pages as `.fig` and convert whole documents:\n\nsh\nopenpencil export design.fig                           # PNG\nopenpencil export design.fig -f jpg -s 2 -q 90        # JPG at 2x, quality 90\nopenpencil export design.fig -f fig --page \"Page 1\"   # Export a page as .fig\nopenpencil export design.fig -f jsx --style tailwind   # Tailwind JSX\nopenpencil convert design.pen output.fig               # Convert between document formats\n\n\nExample JSX output:\n\nhtml\n<div className=\"flex flex-col gap-4 p-6 bg-white rounded-xl\">\n  <p className=\"text-2xl font-bold text-[#1D1B20]\">Card Title</p>\n  <p className=\"text-sm text-[#49454F]\">Description text</p>\n</div>\n\n\n### Lint Design Files\nCatch naming, layout, structure, and accessibility issues directly from the terminal:\n\nsh\nopenpencil lint design.fig\nopenpencil lint design.pen --preset strict\nopenpencil lint design.fig --rule color-contrast\nopenpencil lint design.fig --list-rules\n\n\n### Analyze and Extract Design Tokens\nAudit an entire design system, find inconsistencies, extract palettes, and identify components:\n\nsh\nopenpencil analyze colors design.fig\nopenpencil analyze typography design.fig\nopenpencil analyze spacing design.fig\nopenpencil analyze clusters design.fig\nopenpencil variables design.fig\n\n\nExample analysis output:\n\n\n#1d1b20  ?????????????????????????????? 17155×\n#49454f  ?????????????????????????????? 9814×\n#ffffff  ?????????????????????????????? 8620×\n#6750a4  ?????????????????????????????? 3967×\n\n3771× frame \"container\" (100% match)\n     size: 40×40, structure: Frame > [Frame]\n\n2982× instance \"Checkboxes\" (100% match)\n     size: 48×48, structure: Instance > [Frame]\n\n\n### Script with Figma Plugin API\nUse `eval` to access the full Figma Plugin API, allowing you to modify files and write back changes:\n\nsh\nopenpencil eval design.fig -c \"figma.currentPage.children.length\"\nopenpencil eval design.fig -c \"figma.currentPage.selection.forEach(n => n.opacity = 0.5)\" -w\n\n\n### Control the Running App\nWhen the desktop app is running, the CLI can connect via RPC to operate on the live canvas, useful for automation or AI agents:\n\nsh\nopenpencil tree                               # Inspect the live document\nopenpencil export -f png                      # Screenshot the current canvas\nopenpencil eval -c \"figma.currentPage.name\"   # Query the editor\n\n\n## Why Use OpenPencil?\nOpenPencil emerges as a vital project in response to the limitations of closed design platforms like Figma. Figma's proprietary binary format and active resistance to programmatic access, such as the removal of CDP support, often hinder developer workflows and limit user control over their design files.\n\nOpenPencil offers a compelling alternative by being entirely open-source (MIT licensed), natively reading `.fig` files, and ensuring every operation is scriptable. This approach guarantees that your design data remains on your machine and your workflows are not subject to external platform changes, providing true ownership and flexibility.\n\n## Links\nFor more information and to get involved, explore these official links:\n\n*   [GitHub Repository](https://github.com/open-pencil/open-pencil){:target=\"_blank\"}\n*   [Try it Online](https://app.openpencil.dev/demo){:target=\"_blank\"}\n*   [Download Latest Release](https://github.com/open-pencil/open-pencil/releases/latest){:target=\"_blank\"}\n*   [Official Documentation](https://openpencil.dev){:target=\"_blank\"}","metrics":{"detailViews":12,"githubClicks":1},"dates":{"published":null,"modified":"2026-06-21T07:46:04.000Z"}}