- Move docs/ → packages/docs/ as @open-pencil/docs workspace package - Add screenshot.png as hero image on landing page - Add GitHub Actions workflow for Cloudflare Pages deploy (openpencil.dev) - Remove vitepress from root devDependencies - Root docs:* scripts delegate via bun --filter
37 lines
1.6 KiB
Markdown
37 lines
1.6 KiB
Markdown
---
|
|
layout: doc
|
|
title: User Guide
|
|
description: Learn how to use OpenPencil — canvas navigation, drawing, text, components, auto-layout, and more.
|
|
---
|
|
|
|
# User Guide
|
|
|
|
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.
|
|
|
|
::: tip Cross-platform shortcuts
|
|
Throughout this guide, keyboard shortcuts use Mac notation: **⌘** = Command (Ctrl on Windows/Linux), **⌥** = Option (Alt), **⇧** = Shift.
|
|
:::
|
|
|
|
## 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
|
|
|
|
- [Auto Layout](./auto-layout) — flexbox-based automatic positioning with Yoga
|
|
- [Components](./components) — reusable components, instances, and overrides
|
|
- [Variables](./variables) — design variables, collections, modes, and fill bindings
|