# OpenPencil: The AI-Native, Open-Source Figma Alternative Design Editor

This repository profile is provided by osrepos.com, an open source repository discovery platform.

Source: osrepos.com
Repository profile: https://osrepos.com/repo/open-pencil-open-pencil
Generated for open source discovery and AI-assisted research.

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
OSRepos URL: https://osrepos.com/repo/open-pencil-open-pencil

## 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.

## Topics

- ai
- design-editor
- figma-alternative
- open-source
- typescript
- collaboration
- design tools
- webgpu

## Repository Information

Last analyzed by OSRepos: Sun Jun 21 2026 08:46:04 GMT+0100 (Western European Summer Time)
Detail views: 12
GitHub clicks: 2

## Safety Notice

OSRepos shares public repositories for knowledge and discovery only. Review source code, dependencies, licenses, and security implications before running or installing anything.

## Content

## Introduction
OpenPencil 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.

Currently 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.

You can [try OpenPencil online](https://app.openpencil.dev/demo){:target="_blank"} to explore its features.

## Installation
Getting started with OpenPencil is straightforward. For macOS users, you can install it via Homebrew:

sh
brew install openpencil


Alternatively, 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.

## Examples
OpenPencil offers a robust command-line interface (CLI) for interacting with design files programmatically.

First, install the CLI globally:

sh
npm install -g @open-pencil/cli
# or: bun add -g @open-pencil/cli


Here are some examples of what you can do:

### Inspect Design Files
Browse node trees, search by name or type, and dig into properties without opening the editor:

sh
openpencil tree design.fig
openpencil find design.pen --type TEXT
openpencil node design.fig --id 1:23
openpencil info design.fig


Example output:


[0] [page] "Getting started" (0:46566)
  [0] [section] "" (0:46567)
    [0] [frame] "Body" (0:46568)
      [0] [frame] "Introduction" (0:46569)
        [0] [frame] "Introduction Card" (0:46570)
          [0] [frame] "Guidance" (0:46571)


### Query with XPath
Use XPath selectors to find nodes by type, attributes, and structure:

sh
openpencil query design.fig "//FRAME"                              # All frames
openpencil query design.fig "//FRAME[@width < 300]"                # Frames under 300px
openpencil query design.fig "//TEXT[contains(@name, 'Button')]"     # Text with 'Button' in name
openpencil query design.fig "//*[@cornerRadius > 0]"               # Rounded corners
openpencil query design.fig "//SECTION//TEXT"                       # Text inside sections


### Export Designs
Render to various formats like PNG, JPG, WEBP, SVG, `.fig`, or JSX. You can also export selections/pages as `.fig` and convert whole documents:

sh
openpencil export design.fig                           # PNG
openpencil export design.fig -f jpg -s 2 -q 90        # JPG at 2x, quality 90
openpencil export design.fig -f fig --page "Page 1"   # Export a page as .fig
openpencil export design.fig -f jsx --style tailwind   # Tailwind JSX
openpencil convert design.pen output.fig               # Convert between document formats


Example JSX output:

html
<div className="flex flex-col gap-4 p-6 bg-white rounded-xl">
  <p className="text-2xl font-bold text-[#1D1B20]">Card Title</p>
  <p className="text-sm text-[#49454F]">Description text</p>
</div>


### Lint Design Files
Catch naming, layout, structure, and accessibility issues directly from the terminal:

sh
openpencil lint design.fig
openpencil lint design.pen --preset strict
openpencil lint design.fig --rule color-contrast
openpencil lint design.fig --list-rules


### Analyze and Extract Design Tokens
Audit an entire design system, find inconsistencies, extract palettes, and identify components:

sh
openpencil analyze colors design.fig
openpencil analyze typography design.fig
openpencil analyze spacing design.fig
openpencil analyze clusters design.fig
openpencil variables design.fig


Example analysis output:


#1d1b20  ?????????????????????????????? 17155×
#49454f  ?????????????????????????????? 9814×
#ffffff  ?????????????????????????????? 8620×
#6750a4  ?????????????????????????????? 3967×

3771× frame "container" (100% match)
     size: 40×40, structure: Frame > [Frame]

2982× instance "Checkboxes" (100% match)
     size: 48×48, structure: Instance > [Frame]


### Script with Figma Plugin API
Use `eval` to access the full Figma Plugin API, allowing you to modify files and write back changes:

sh
openpencil eval design.fig -c "figma.currentPage.children.length"
openpencil eval design.fig -c "figma.currentPage.selection.forEach(n => n.opacity = 0.5)" -w


### Control the Running App
When the desktop app is running, the CLI can connect via RPC to operate on the live canvas, useful for automation or AI agents:

sh
openpencil tree                               # Inspect the live document
openpencil export -f png                      # Screenshot the current canvas
openpencil eval -c "figma.currentPage.name"   # Query the editor


## Why Use OpenPencil?
OpenPencil 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.

OpenPencil 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.

## Links
For more information and to get involved, explore these official links:

*   [GitHub Repository](https://github.com/open-pencil/open-pencil){:target="_blank"}
*   [Try it Online](https://app.openpencil.dev/demo){:target="_blank"}
*   [Download Latest Release](https://github.com/open-pencil/open-pencil/releases/latest){:target="_blank"}
*   [Official Documentation](https://openpencil.dev){:target="_blank"}