Canvas

Everything on the canvas is an HTML element with CSS. A frame is a <div> (or a section, nav, button and so on), text is a text element, and layout is real flexbox and grid. What you draw is what your agent reads, what the code panel shows and what you export.

Press Ctrl+/ for every shortcut. Ctrl stands for Cmd on a Mac. Many Figma shortcuts work as aliases.

Moving around

• Pan: hold Space and drag, drag with the middle mouse button, or use the hand tool (H).
• Zoom: Ctrl and the mouse wheel, pinch, the zoom tool (Z), or + and -. Shift+0 is 100%, Shift+1 fits everything, Shift+2 fits the selection. From 600% a pixel grid shows.
• A file opens with its page fitted. Each page remembers its view on this device.
• New artboards that land off screen are brought into view.

Tools

The toolbar also has an icon picker with the Lucide set, 2015 icons placed as editable vectors in the text colour. Search goes by name and a short list of synonyms.

Selecting

• Click to select, Shift+click to add, drag a marquee. Ctrl+A selects all.
• Double-click drills into a group. Enter selects a child, or starts editing text. Shift+Enter or \ selects the parent. Tab and Shift+Tab move between siblings, N and Shift+N between frames.
• Esc steps out to the parent, then clears the selection.
• Ctrl+F finds on the canvas. The layers panel (Alt+1) has search and filters.

Moving, resizing, arranging

• Drag to move. Eight handles resize; Shift keeps the ratio, Alt resizes from the centre. Rotate from outside a corner. Shift+H and Shift+V flip. Alt-drag duplicates.
• Smart guides snap to pixels, siblings and rotated layers, also while you resize a rotated layer. Hold Alt to measure distances.
• Arrow keys nudge by 1, with Shift by 10.
• Group (Ctrl+G), ungroup (Ctrl+Shift+G), wrap in a frame (Ctrl+Alt+G). Align with Alt+A, Alt+H, Alt+D, Alt+W, Alt+V, Alt+S; distribute with Alt+Shift+H and Alt+Shift+V; tidy with Ctrl+Alt+T.
• Ctrl+] and Ctrl+[ bring forward and send back. Lock with Ctrl+Shift+L, hide with Ctrl+Shift+H.
• Cut, copy and paste, paste on top (Ctrl+Shift+V), paste to replace (Ctrl+Shift+R), copy and paste styles (Ctrl+Alt+C, Ctrl+Alt+V). Pasted layers land clear of what is already there.
• Layers get names from their role, element, class and text. Ctrl+R renames.

Artboards, frames and pages

An artboard is a top-level frame on a page: the screen you design in. Common widths are 1440, 768 and

1. Leave its height to the content, as a web page does, or fix it for slides and posters. Pages

separate flows or explorations; several sizes of one flow belong side by side on one page.

Layout

Select a frame and press Shift+A to add flex layout. The inspector then sets:

• Flex: direction, wrap, gap (negative too), padding and alignment. Gap and padding have handles on the canvas, and you reorder flex children by dragging them.
• Grid: CSS Grid on any frame.
• Absolute position inside a frame, with constraints for children of a frame without layout: left, right, both, centre or scale. They are written as plain CSS and kept through moves and resizes.
• Size: fixed, hug or fill, with min and max, and an aspect ratio lock held by CSS aspect-ratio.
• Overflow and scrolling.

Style

• Fills: solid colours, linear, radial and conic gradients, and images, several layered and reordered by dragging. Linear and radial gradients have handles on the canvas; drag, add and delete stops there. Colours in hex, named, OKLCH, P3, LCH and LAB, and an eyedropper. Conic gradients have no canvas handles. CSS keeps a linear gradient's line through the centre, so its far handle slides along the colour band.
• Borders, outline, radius per corner, shadows (several, inset, reordered by dragging), opacity, blend modes, filters, backdrop filters and clipping.
• Other styles: any CSS property, grouped and filterable. Simplify styles removes what does not change the rendering, by trying it on the real element and comparing before and after.
• Pseudo-elements and conditions: ::before and ::after, and style that applies under @container, @media or a state such as :hover. See Pseudo-elements and conditions.

Text

• Every Google Fonts family works by name, and so do fonts installed on your machine.
• Line height, tracking, case, decoration, truncation, OpenType features, text gradients and text strokes. Variable font axes work for local variable fonts.
• Rich text: select part of a text and change its weight, style, colour, size or link. Bold, italic, underline, strike, code and links in pasted HTML become ranges too; other inline elements stay layers of their own.
• Two people or an agent can type in the same text layer at once; the edits merge per character.
• Text styles are named bundles of family, size, weight, line height and tracking. Apply one from the inspector; changing it changes every layer that uses it. They export as CSS classes.

Vectors

• The pen (P) draws paths. Edit nodes and curves, paste SVG, and edit fills and strokes.
• Shape to path (Ctrl+Shift+O) and the boolean operations union (Ctrl+Alt+U), subtract (Ctrl+Alt+Shift+S), intersect (Ctrl+Alt+I) and exclude (Ctrl+Alt+X) make ordinary paths, editable node by node.
• Arrow caps are real markers. Strokes can sit inside or outside.

Limits: there are no vector networks and no shape builder. A gradient fill becomes its first colour when a shape turns into a path, an outside stroke needs a fill, and a boolean result replaces its sources (undo brings them back). Images cannot be turned into vectors.

Images and media

• Place images with I, or paste or drop them. Crop, fit and filters work for PNG, JPEG and the like. HEIC, HEIF, AVIF and WebP upload and fit, without crop and filters; HEIC has not been tried.
• Video and iframe embeds are layers too.
• Your agent can generate images with your own OpenAI or Gemini key; see Privacy. This has not been run against the real services yet.

Shaders

The shader tool (S) places real-time WebGL effects from @paper-design/shaders as layers, with presets and every control in the inspector. At most eight run live at once: the selected one first, then the largest on screen. The rest show a still frame.

Live data

Put {{field}} placeholders in a layer's text, image source, attributes or styles. The Repeat section of the inspector then makes one copy per record of pasted JSON or CSV, or of a public URL, and runs again to refresh. In a flex or grid parent the copies lay out like any children. Values that would escape a style or a URL are refused and reported.

Tokens and theme modes

Tokens are CSS variables that belong to the file: colour, radius, spacing, container, breakpoint, font family, weight, size, line height and tracking. Use them as var(--name) in any style; change one and every layer that uses it follows. Open them with Alt+2.

A file can have theme modes, such as light, dark or compact. A token holds one value per mode, and an artboard, layer or page says which mode it shows. Switch it in the inspector or the Tokens panel.

On Omarchy, a button in the Tokens panel brings the active Omarchy palette in as tokens.

Tokens and repositories meet through your agent: it reads CSS variables and Tailwind themes into tokens, and writes tokens out as CSS or a Tailwind theme block for you to put in the repo. There is no panel for that, and Bogen never writes into a repository itself.

Prototype and preview

The Prototype section of the inspector sets where a click on a layer goes, the transition and its duration, and styles while hovering. Ctrl+Alt+Enter opens the preview: click through artboards, try device widths, and go full screen to present. A preview has its own URL, which opens by itself. At another device width, media and container conditions take effect, and hover and focus blocks apply under the pointer.

There is no smart animate, and the hover styles of this section and links stay out of exports. Hover blocks made under Pseudo-elements and conditions do go into exports.

Motion

The motion panel (Alt+M) has a keyframes editor, timing, looping and presets. Scrub an artboard's timeline, or play and pause all motion with Alt+P. Exports to video render animations frame by frame; see Export and code.

Comments and other people

• Press C and click to comment on a layer. Threads have image attachments, @mentions of people and agents, resolve, search and filter. Alt+C shows them.
• A comment that mentions @claude or @codex starts that agent; see Agents.
• People in the same file see each other's cursors and selections, can follow each other, and can chat at the cursor with /.

The window

• Command palette (Ctrl+P) over commands, layers, pages, files and tokens.
• Minimal UI (Ctrl+\\) hides the panels. Panels resize.
• Settings (Ctrl+,): nudge size, zoom direction and interface size.
• F6 moves between the areas of the window. Tooltips show shortcuts.
• The chrome respects reduced motion. Text in it has at least 4.5:1 contrast in the built-in light and dark themes.

Home screen

Recent files, nested folders, search, sort, grid and list, duplicate, multi-select, and moving files by menu or by dragging. Thumbnails are rendered. Download .bogen saves a file, and Open brings a .bogen file back. Folders are kept per device and do not sync yet.