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.
4.2 KiB
| title | description |
|---|---|
| Exporting | 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 | ⇧⌘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.
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 | ⇧⌘C | Shift + Ctrl + C |
| 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 | ⌘O | Ctrl + O |
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 | ⌘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
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 | ⇧⌘E | Shift + Ctrl + E |
| Copy as PNG | ⇧⌘C | Shift + Ctrl + C |
| 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.
- 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.