Pencil Interface

Pencil provides a visual design environment built around an infinite canvas. This page covers the core interface elements you will interact with daily — the canvas itself, frames, selection behavior, panels, and undo/redo.

Infinite Canvas

The canvas is an unlimited workspace. There are no fixed page boundaries — you can pan in any direction and place elements wherever you like.

Pan — Spacebar + Drag to move around the canvas.
Zoom — Cmd/Ctrl + Scroll to zoom in and out.

Navigation Shortcuts

Shortcut	Action
`Spacebar` + Drag	Pan the canvas
`Shift` + Scroll	Horizontal pan
`Cmd/Ctrl` + `0`	Zoom to fit
`Cmd/Ctrl` + `1`	Zoom to 100%

Frames

Frames are containers for your designs. They group elements together and define screen boundaries — similar to artboards in other design tools. Use frames to represent individual pages, screens, or sections of your application.

Create a new frame with Cmd/Ctrl + Option/Alt + G.

Selection

Pencil uses color-coded selection indicators to help you understand what you have selected:

Blue box — a regular element is selected.
Purple / magenta box — a reusable component is selected.

Interaction	Behavior
`Click`	Select an element
`Cmd/Ctrl` + Click	Direct select (bypass groups)
`Shift` + Click	Add to selection
`Cmd/Ctrl` + `A`	Select all elements

Layers Panel

The Layers Panel provides a hierarchical view of every element on the canvas. It works similarly to the layers panel in Figma — you can expand groups, reorder layers by dragging, and toggle visibility.

Properties Panel

Content coming soon.

AI Chat

Content coming soon.

Undo / Redo

Standard undo and redo shortcuts are supported:

Cmd + Z — Undo
Cmd + Shift + Z — Redo

Note: Undo/redo in Pencil is more limited than in standard editors. Not every action may be reversible, and the history depth may be shorter than expected. Save your work frequently to avoid losing changes.

Last updated: February 22, 2026