Anton A S de048b4d21 Add User Guide section with 11 articles derived from OpenSpec specs

New docs/user-guide/ section covering: canvas navigation, selection &
manipulation, drawing shapes, text editing, pen tool, layers & pages,
context menu, exporting, auto-layout, components, and variables.

Each article includes Mac+Win/Linux shortcuts tables, cross-platform
note, cross-links between related articles, and consistent structure.

VitePress sidebar updated with User Guide as first group (12 entries).

2026-03-01 13:02:47 +03:00

2.5 KiB

Raw Blame History

title	description
Exporting	Exporting images (PNG, JPG, WEBP) and saving/opening .fig files in OpenPencil.

Exporting

Export individual nodes as images, or save and open entire documents as .fig files.

::: tip Cross-platform shortcuts ⌘ = Ctrl, ⌥ = Alt on Windows and Linux. :::

Image Export

Select a node and use the Export section in the properties panel.

Export Settings

Scale — 0.5×, 0.75×, 1×, 1.5×, 2×, 3×, or 4×
Format — PNG (transparent background), JPG (white background), WEBP (transparent background)

You can add multiple export settings to export the same node at different scales or formats in one go. A live preview with a checkerboard background shows what will be exported.

Export Methods

Method	Mac	Windows / Linux
Keyboard shortcut	⇧ ⌘ E	Shift + Ctrl + E
Context menu	Right-click → Export…	Right-click → Export…
Properties panel	Click "Export" button	Click "Export" button

The exported file is saved via a native dialog (desktop) or browser download.

.fig File Operations

OpenPencil uses the .fig format for full documents — the same binary format as Figma.

Opening Files

Action	Mac	Windows / Linux
Open file	⌘ O	Ctrl + O

A file picker dialog opens, filtered for .fig files. On the desktop app, this uses the native OS dialog.

Saving Files

Action	Mac	Windows / Linux
Save	⌘ S	Ctrl + S
Save As	⇧ ⌘ S	Shift + Ctrl + S

Save overwrites the currently open file without a dialog
Save As opens a save dialog to choose a new location

The export pipeline encodes the scene graph to Kiwi binary format, compresses it, and writes a ZIP archive with the payload and a thumbnail image.

Round-trip Compatibility

Files exported from OpenPencil can be opened in Figma, and vice versa. The .fig format preserves all node types, properties, fills, strokes, effects, vector data, and layout settings.

Keyboard Shortcuts

Action	Mac	Windows / Linux
Export selection	⇧ ⌘ E	Shift + Ctrl + E
Open file	⌘ O	Ctrl + O
Save	⌘ S	Ctrl + S
Save As	⇧ ⌘ S	Shift + Ctrl + S

Tips

Use 2× or 3× scale when exporting for high-DPI screens.
JPG always uses a white background — use PNG or WEBP if you need transparency.
The thumbnail in exported .fig files enables preview in file browsers and Figma's file picker.

2.5 KiB Raw Blame History Unescape Escape