---
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: <kbd>⌘</kbd> = <kbd>Command</kbd> (<kbd>Ctrl</kbd> on Windows/Linux), <kbd>⌥</kbd> = <kbd>Option</kbd> (<kbd>Alt</kbd>), <kbd>⇧</kbd> = <kbd>Shift</kbd>.
:::

## 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
- [Components](./components) — reusable components, instances, and overrides
- [Variables](./variables) — design variables, collections, modes, and fill bindings