Quick start

This guide will walk you through creating your first design, working with files, and exploring key features.

Create your first design

Open OpenPencil

Launch the desktop app or visit app.openpencil.dev

Create a shape

Press R to activate the rectangle tool, then click and drag on the canvas to create a rectangle.

Style the shape

With the rectangle selected:

Change the fill color using the color picker in the right panel
Adjust opacity, stroke, and corner radius
Use the transform controls to resize or rotate

Draw with the pen tool

Press P to activate the pen tool:

Click to create anchor points
Drag to create curves
Hold Shift to constrain angles
Press Enter to complete the path

Working with text

Create text

Press T for the text tool, then click on the canvas and start typing.

Style text

Select the text and use the right panel to:

Choose a system font with queryLocalFonts() API
Adjust size, weight, line height, and letter spacing
Apply color and effects
Use Text Resize to control text box behavior (auto-width, auto-height, or fixed)

Rich text formatting

Select a text range and apply different styles:

Font family, size, and weight per character
Style runs stored as { start, end, ...style } spans

Auto-layout

Create responsive layouts with Yoga WASM-powered flexbox:

Select multiple objects

Select two or more shapes by dragging or holding Shift and clicking.

Create auto-layout

Press Shift+A or click Auto-layout in the right panel.

Configure layout

Adjust layout properties:

Direction: horizontal or vertical
Alignment: start, center, end, space-between
Padding: inner spacing
Gap: spacing between items
Sizing: hug contents or fill container

Nested layouts

Auto-layout frames can be nested. Child frames with auto-layout create complex responsive designs.

Opening and saving files

Open a .fig file

Desktop app
Web version

File → Open or drag a .fig file onto the app window.Uses the File System Access API (showOpenFilePicker()) with fallback to Tauri dialog.

File → Open and select a .fig file from your computer.Uses browser File System Access API (Chrome/Edge) with fallback to file input.

Save a file

File → Save exports the current document as a .fig file:

Desktop: Uses Tauri file system commands with Zstd compression
Web: Uses File System Access API with fflate compression

The .fig file format:

ZIP archive containing canvas.fig (Kiwi binary) and images
Kiwi format: vendored schema from Figma’s binary codec
Vector data: vectorNetworkBlob binary format

Test compatibility by opening your saved .fig files in Figma. See Figma compatibility for details.

Copy and paste with Figma

OpenPencil uses the same clipboard format as Figma:

Copy from Figma

Select nodes in Figma and press Cmd/Ctrl+C.

Paste into OpenPencil

Focus the OpenPencil canvas and press Cmd/Ctrl+V.Nodes are decoded from Kiwi binary format and added to your document.

Copy from OpenPencil to Figma

Select nodes in OpenPencil, copy (Cmd/Ctrl+C), and paste into Figma.Works in both directions with full fidelity for supported node types.

Real-time collaboration

Share your document and collaborate in real time via P2P WebRTC:

Start sharing

Click the Share button in the top-right panel.

Share the link

Copy the generated link: app.openpencil.dev/share/<room-id>Share it with collaborators via any communication channel.

Collaborate

Collaborators see:

Your cursor and selection in real time
All edits as they happen
Presence indicators with colored avatars

Follow mode

Click a peer’s avatar to follow their viewport. Click again to unfollow.

How it works:

P2P sync via Trystero (WebRTC)
Document state synced with Yjs CRDT
Local persistence with y-indexeddb
No server required — peers connect directly

AI chat

Use AI to generate and modify designs:

Open chat

Click the AI button in the toolbar or press Cmd/Ctrl+K.

Describe what you want

Type a natural language description:“Create a login form with email and password fields”“Make this button rounded with a gradient from purple to blue”

AI executes tools

The AI uses 75+ built-in tools to:

Create shapes, text, and components
Set fills, strokes, and effects
Modify layout and constraints
Create variables and collections

Bring your own key

Configure your API key in Settings:

OpenAI (GPT-4, GPT-4o)
Anthropic (Claude 3.5 Sonnet)
Google (Gemini Pro)
OpenRouter (any model)

CLI operations

Inspect and manipulate .fig files without opening the GUI:

# Install CLI
bunx @open-pencil/cli

# Document info
bunx @open-pencil/cli info design.fig

# Node tree
bunx @open-pencil/cli tree design.fig

# Find nodes
bunx @open-pencil/cli find design.fig --name "Button"
bunx @open-pencil/cli find design.fig --type TEXT

# Export to image
bunx @open-pencil/cli export design.fig
bunx @open-pencil/cli export design.fig -f jpg -s 2 -q 90

# Analyze design tokens
bunx @open-pencil/cli analyze colors design.fig
bunx @open-pencil/cli analyze typography design.fig

All commands support --json for machine-readable output.

CLI reference

Explore all CLI commands and options

MCP server

Connect AI coding tools to OpenPencil:

Stdio (Claude Code, Cursor)
HTTP (scripts, CI)

# Install globally
bun add -g @open-pencil/mcp

Add to your MCP config (~/Library/Application Support/Code/User/globalStorage/rooveterinaryinc.roo-cline/settings/cline_mcp_settings.json for Cursor):

{
  "mcpServers": {
    "open-pencil": {
      "command": "openpencil-mcp"
    }
  }
}

# Start HTTP server
openpencil-mcp-http

# Configure
PORT=3100 OPENPENCIL_MCP_ROOT=/path/to/designs openpencil-mcp-http

Use with any HTTP client:

curl http://localhost:3100/mcp \
  -H "Content-Type: application/json" \
  -d '{"method": "list_tools"}'

MCP reference

Set up the MCP server and explore 75+ available tools

Keyboard shortcuts

Shortcut	Action
V	Select tool
R	Rectangle
O	Ellipse
L	Line
P	Pen tool
T	Text
F	Frame
Cmd/Ctrl+D	Duplicate
Cmd/Ctrl+G	Group
Cmd/Ctrl+]	Bring forward
Cmd/Ctrl+[	Send backward
Shift+A	Auto-layout
Cmd/Ctrl+K	AI chat

All shortcuts

See the complete keyboard shortcuts reference

Next steps

Drawing tools

Learn about shapes, pen tool, text, and vector networks

File format

Understand the .fig file format and Kiwi codec

Collaboration

Deep dive into P2P collaboration architecture

Components

Create reusable components with live instance sync

Get Started

Core Features

Desktop App

Guides

Create your first design

Working with text

Auto-layout

Opening and saving files

Open a .fig file

Save a file

Copy and paste with Figma

Real-time collaboration

AI chat

CLI operations

CLI reference

MCP server

MCP reference

Keyboard shortcuts

All shortcuts

Next steps

Drawing tools

File format

Collaboration

Components

Get Started

Core Features

Desktop App

Guides

Documentation Index

​Create your first design

​Working with text

​Auto-layout

​Opening and saving files

​Open a .fig file

​Save a file

​Copy and paste with Figma

​Real-time collaboration

​AI chat

​CLI operations

CLI reference

​MCP server

MCP reference

​Keyboard shortcuts

All shortcuts

​Next steps

Drawing tools

File format

Collaboration

Components

Create your first design

Working with text

Auto-layout

Opening and saving files

Open a .fig file

Save a file

Copy and paste with Figma

Real-time collaboration

AI chat

CLI operations

MCP server

Keyboard shortcuts

Next steps