7c4d9aa20d
* feat: open documents dropped onto the window Dropping a .fig, .pen, or other readable document did nothing: the canvas drop handler places only images and SVG files and swallowed everything else. The workspace now opens dropped documents in new tabs through the same path as File → Open, passing the file handle where the browser provides one, and reports files it cannot open instead of ignoring them. Images and SVG files dropped on the canvas are still placed. * fix: classify each dropped file instead of matching File identities DataTransferItem.getAsFile() may return a new File, so checking it against the canvas files from dataTransfer.files could miss images and SVG files and open them as documents in engines other than Chromium. Each extracted file is now classified on its own; a spec checks that an SVG dropped on the canvas is placed without opening a tab.
93 lines
4.2 KiB
Markdown
93 lines
4.2 KiB
Markdown
---
|
||
title: Exporting
|
||
description: Export images, SVG, and .fig subsets, and open .fig or .pen documents in OpenPencil.
|
||
---
|
||
|
||
# Exporting
|
||
|
||
Export individual nodes as images or `.fig` subsets, and open full `.fig` or `.pen` documents.
|
||
|
||
## 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× (hidden for SVG — vectors are resolution-independent)
|
||
- **Format** — PNG (transparent background), JPG (white background), WEBP (transparent background), SVG (vector), `.fig` (native document subset)
|
||
|
||
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 | <kbd>⇧</kbd><kbd>⌘</kbd><kbd>E</kbd> | <kbd>Shift</kbd> + <kbd>Ctrl</kbd> + <kbd>E</kbd> |
|
||
| Context menu | Right-click <kbd>→</kbd> Export… | Right-click <kbd>→</kbd> Export… |
|
||
| Properties panel | Click "Export" button | Click "Export" button |
|
||
|
||
The exported file is saved via a native dialog (desktop) or browser download.
|
||
|
||
## Copy/Paste as
|
||
|
||
In addition to file export, you can copy the selection to the clipboard in multiple formats via the context menu (right-click → Copy/Paste as):
|
||
|
||
| Action | Shortcut (Mac) | Shortcut (Win/Linux) |
|
||
|--------|----------------|----------------------|
|
||
| Copy as text | — | — |
|
||
| Copy as SVG | — | — |
|
||
| Copy as PNG | <kbd>⇧</kbd><kbd>⌘</kbd><kbd>C</kbd> | <kbd>Shift</kbd> + <kbd>Ctrl</kbd> + <kbd>C</kbd> |
|
||
| Copy as JSX | — | — |
|
||
|
||
- **Copy as text** — copies visible text content from the selection
|
||
- **Copy as SVG** — copies the selection as SVG markup (paste into code editors, Inkscape, etc.)
|
||
- **Copy as PNG** — renders at 2× and copies to the clipboard (ready to paste into Slack, Notion, etc.)
|
||
- **Copy as JSX** — copies the OpenPencil JSX representation (compatible with `renderJsx()`)
|
||
|
||
## .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 | <kbd>⌘</kbd><kbd>O</kbd> | <kbd>Ctrl</kbd> + <kbd>O</kbd> |
|
||
|
||
A file picker dialog opens, filtered for `.fig` and `.pen` files. On the desktop app, this uses the native OS dialog.
|
||
|
||
You can also drag a `.fig`, `.pen`, or other supported document onto the window; it opens in a new tab. Images and SVG files dropped on the canvas are placed in the document instead, and any other file reports that it can't be opened.
|
||
|
||
### Saving Files
|
||
|
||
| Action | Mac | Windows / Linux |
|
||
|--------|-----|-----------------|
|
||
| Save | <kbd>⌘</kbd><kbd>S</kbd> | <kbd>Ctrl</kbd> + <kbd>S</kbd> |
|
||
| Save As | <kbd>⇧</kbd><kbd>⌘</kbd><kbd>S</kbd> | <kbd>Shift</kbd> + <kbd>Ctrl</kbd> + <kbd>S</kbd> |
|
||
|
||
- **Save** overwrites the currently open file without a dialog
|
||
- **Save As** opens a save dialog to choose a new location
|
||
|
||
Saved files are compressed and include a thumbnail image for preview in file browsers.
|
||
|
||
### 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 | <kbd>⇧</kbd><kbd>⌘</kbd><kbd>E</kbd> | <kbd>Shift</kbd> + <kbd>Ctrl</kbd> + <kbd>E</kbd> |
|
||
| Copy as PNG | <kbd>⇧</kbd><kbd>⌘</kbd><kbd>C</kbd> | <kbd>Shift</kbd> + <kbd>Ctrl</kbd> + <kbd>C</kbd> |
|
||
| Open file | <kbd>⌘</kbd><kbd>O</kbd> | <kbd>Ctrl</kbd> + <kbd>O</kbd> |
|
||
| Save | <kbd>⌘</kbd><kbd>S</kbd> | <kbd>Ctrl</kbd> + <kbd>S</kbd> |
|
||
| Save As | <kbd>⇧</kbd><kbd>⌘</kbd><kbd>S</kbd> | <kbd>Shift</kbd> + <kbd>Ctrl</kbd> + <kbd>S</kbd> |
|
||
|
||
## 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.
|
||
- Use SVG export when you need a vector format for further editing in Illustrator, Inkscape, or code.
|
||
- The thumbnail in exported .fig files enables preview in file browsers and Figma's file picker.
|