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 10:02:47 +00:00
---
layout: doc
title: User Guide
description: Learn how to use OpenPencil — canvas navigation, drawing, text, components, auto-layout, and more.
---
# User Guide
2026-03-01 10:58:54 +00:00
OpenPencil is an open-source, Figma-compatible design editor — fully local, AI-native, and programmable. This guide covers everything you need to know to use the editor effectively.
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 10:02:47 +00:00
::: tip Cross-platform shortcuts
2026-03-08 10:08:30 +00:00
Throughout this guide, keyboard shortcuts use Mac notation: < kbd > ⌘< / kbd > = < kbd > Command< / kbd > (< kbd > Ctrl< / kbd > on Windows/Linux), < kbd > ⌥< / kbd > = < kbd > Option< / kbd > (< kbd > Alt< / kbd > ), < kbd > ⇧< / kbd > = < kbd > Shift< / kbd > .
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 10:02:47 +00:00
:::
## Getting Around
- [Canvas Navigation ](./canvas-navigation ) — panning, zooming, and the hand tool
- [Selection & Manipulation ](./selection-and-manipulation ) — selecting, moving, resizing, rotating, and organizing nodes
## Creating Content
- [Drawing Shapes ](./drawing-shapes ) — rectangles, ellipses, lines, frames, sections, polygons, and stars
- [Text Editing ](./text-editing ) — creating and editing text with rich formatting
- [Pen Tool ](./pen-tool ) — drawing vector paths with bezier curves
## Organizing & Managing
- [Layers & Pages ](./layers-and-pages ) — the layers panel, pages, and properties panel
- [Context Menu ](./context-menu ) — right-click actions for clipboard, grouping, components, and more
- [Exporting ](./exporting ) — image export and .fig file operations
## Advanced Features
Remove implementation details from user guide
Replace internal references (Yoga, CanvasKit, Paragraph API, style runs,
characterStyleIDs, vectorNetworkBlob, Kiwi binary, scene graph, font-kit,
Local Font Access API, COMPONENT type, override key format, hex codes, px
specs) with user-facing language across all 7 locales.
2026-03-08 09:55:25 +00:00
- [Auto Layout ](./auto-layout ) — flexbox-based automatic positioning
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 10:02:47 +00:00
- [Components ](./components ) — reusable components, instances, and overrides
- [Variables ](./variables ) — design variables, collections, modes, and fill bindings
