5.5 KiB
Features
Figma .fig File Import & Export
Open and save native Figma files directly. Import decodes the full 194-definition Kiwi schema including NodeChange messages with ~390 fields. Export encodes the scene graph back to Kiwi binary with Zstd compression and thumbnail generation. Save (⌘S) and Save As (⇧⌘S) use native OS dialogs on the desktop app. The import/export pipeline supports round-trip fidelity.
Figma Clipboard
Copy/paste between OpenPencil and Figma. When you copy in Figma, OpenPencil decodes the fig-kiwi binary from the clipboard. When you copy in OpenPencil, it encodes fig-kiwi binary that Figma can read. Also works between OpenPencil instances.
Vector Networks
The pen tool uses Figma's vector network model — not simple paths. Click to place corner points, click+drag for bezier curves with tangent handles. Supports open and closed paths. Vector data uses the same vectorNetworkBlob binary format as Figma.
Auto-Layout
Yoga WASM provides CSS flexbox layout. Frames support:
- Direction — horizontal, vertical, wrap
- Gap — spacing between children
- Padding — uniform or per-side
- Justify — start, center, end, space-between
- Align — start, center, end, stretch
- Child sizing — fixed, fill, hug
Shift+A toggles auto-layout on a frame or wraps selected nodes.
Inline Text Editing
Text nodes use CanvasKit's Paragraph API for rendering with proper text shaping and line breaking. Double-click to edit inline with a textarea overlay. Supports font families, weights, sizes, and line height. System fonts are available via the Local Font Access API.
Undo/Redo
Every operation is undoable. The system uses an inverse-command pattern — before applying any change, it snapshots affected fields. The snapshot becomes the inverse. ⌘Z undoes, ⇧⌘Z redoes.
Snap Guides
Edge and center snapping with red guide lines when nodes align. Rotation-aware — snap calculations use actual visual bounds of rotated nodes. Coordinates are computed in absolute canvas space.
Canvas Rulers
Rulers at the top and left edges show coordinate scales. When you select a node, rulers highlight its position with a translucent band and show coordinate badges at the start/end points.
Color Picker & Fill Types
HSV color selection with hue slider, alpha slider, hex input, and opacity control. The fill type picker provides tabs for Solid, Gradient (Linear, Radial, Angular, Diamond), and Image. Switching to a gradient type shows an editable gradient stop bar. Gradient transforms position the gradient within the shape. Connected to fill and stroke sections in the properties panel.
Layers Panel
Tree view of the document hierarchy using Reka UI Tree component. Expand/collapse frames, drag to reorder (changes z-order), toggle visibility per node.
Properties Panel
Context-sensitive panel with sections:
- Appearance — size, position, rotation, opacity, corner radius, visibility
- Fill — solid/gradient/image type picker, gradient stop editor, hex input, opacity
- Stroke — color, weight, opacity, cap, join, dash pattern
- Typography — font family, weight, size, alignment
- Layout — auto-layout controls when enabled
- Position — alignment buttons, rotation, flip
- Page — canvas background color (shown when no nodes selected)
Group/Ungroup
⌘G groups selected nodes. ⇧⌘G ungroups. Nodes are sorted by visual position when grouping to preserve reading order.
Sections
Sections (S) are top-level organizational containers on the canvas. Each section displays a title pill with the section name. Title text color automatically inverts based on the pill's background luminance for readability. Creating a section auto-adopts overlapping sibling nodes. Frame name labels are shown for direct children of sections.
Multi-Page Documents
Documents support multiple pages like Figma. The pages panel lets you add, delete, and rename pages. Each page maintains independent viewport state (pan, zoom, background color). Double-click a page name to rename inline.
Hover Highlight
Nodes highlight on hover with a shape-aware outline that follows the actual geometry — ellipses get elliptical outlines, rounded rectangles get rounded outlines, vectors get path outlines. This provides visual feedback before clicking to select.
Advanced Rendering (Tier 1)
The CanvasKit renderer supports full Tier 1 visual features for Figma rendering parity:
- Gradient fills — linear, radial, angular, diamond with gradient stops and transforms
- Image fills — decoded from blob data with scale modes (fill, fit, crop, tile)
- Effects — drop shadow, inner shadow, layer blur, background blur, foreground blur
- Stroke properties — cap (none, round, square, arrow), join (miter, bevel, round), dash patterns
- Arc data — partial ellipses with start/end angle and inner radius (donuts)
Desktop App
Tauri v2 shell (~5MB vs Electron's ~100MB). Native menu bar with File/Edit/View/Object/Window/Help menus on all platforms. macOS gets an app-level submenu. Native Save/Open dialogs via Tauri plugin-dialog. Zstd compression offloaded to Rust for .fig export performance. Developer Tools accessible via ⌘⌥I.
ScrubInput
All numeric inputs in the properties panel use a drag-to-scrub interaction — drag horizontally to adjust the value, or click to type directly. Supports suffix display (°, px, %).