Panels

The panels are VS Code views: Pages, Layers, Assets, History and Comments in the primary side bar, Design, Prototype, Inspect and Claude in the secondary side bar.

Where the panels are#

Side bar	Views
Primary: the UI Designer container of the activity bar (the layers icon)	Pages, Layers, Assets, History, Comments
Secondary: the UI Designer container on the other side of the editor	Design, Prototype, Inspect, Claude (the AI panel; desktop only)

Every view can be expanded, collapsed, resized and reordered by dragging its header, and moved to another side bar, the panel area or a container of its own (drag the header, or right-click it and choose Move To; Reset Location puts it back). History, Comments, Prototype, Inspect and Claude start collapsed; the commands and modes that use them open them: Show Version History reveals History, C (Comment mode) Comments, ShiftD (Inspect mode) Inspect, CtrlAltI Claude. UI Designer: Show Design Panels shows Layers and Design.

To have the panels inside the editor beside the canvas instead, set ud.layout.panels to "editor". In that layout the Comments list replaces the left panel in Comment mode, and History and the AI panel replace the right panel.

Layers#

Pages lists the pages: click to switch, + (Add Page) to add, double-click to rename, drag to reorder. Layers is the tree of the current page: click selects, Shift and Ctrl extend the selection, CtrlA selects the focused row’s siblings, double-click or F2 renames. The lock and eye icons appear on hover; components and instances are purple. The view’s title bar has Find and Replace, Reveal Selection in Layers and Collapse All Layers.

Drag and drop. Dragging a selected row moves the whole selection. The top or bottom of a row puts the layers above or below it (a line shows where); the middle of a frame, group, section or component puts them inside it (the row is outlined). Hovering a closed container opens it after a moment. Layers keep their place on the canvas when they move into another frame, and one drag is one undo step. A layer cannot be dropped into itself, its own children, a locked layer or a layer that takes no children; Esc cancels the drag.

The row menu. Right-click a row:

Cut, Copy, Paste (into the selected container, else beside the selection), Duplicate, Delete;
Arrange: Bring to front (CtrlShift]), Move up (Ctrl]), Move down (Ctrl[), Send to back (CtrlShift[), Indent (CtrlAlt]: into the frame, group, section or component on the row just above, as its last row) and Unindent (CtrlAlt[: out of its parent, onto the row right after it);
Create ▸ (Frame, Rectangle, Ellipse, Line, Polygon, Star, Text: a 100 × 100 layer inside the selected container, or above the selected layer);
then Ask Claude…, Copy as PNG, Group, Ungroup, Show or Hide, Lock or Unlock, Select matching ▸, Rename… and the component actions.

An item is disabled when it would move nothing (Move up on the top row, Indent when the row above is not an unlocked container, Unindent on a top-level layer). Several selected layers keep their order, and each command is one undo step. The cut, copy, paste, duplicate, delete and arrange keys work in the Layers view as in the editor. With the tree focused, the arrow keys move through it (Left and Right collapse and expand), Home and End jump to the first and last row.

Assets#

Assets lists the local components grouped by page and section, the components of every library this file uses, and the colour, text, effect and grid styles. Drag a component to the canvas to place an instance, or click it to place one at the centre of the view. Libraries opens the library manager. UI Designer: Show Assets opens the view from the Command Palette.

Design#

The Design view shows the properties of the selection in sections: frame presets, position and rotation, auto layout or layout grid, appearance (opacity, corner radius, mask), typography for text, fill, stroke, effects, layout guides and export. With nothing selected it shows the page: background, variable modes, styles and export.

A value bound to a variable shows the variable instead. Number fields accept expressions such as 120/3 or +8, and dragging a field’s label scrubs the value.
Enter commits a field and moves to the next one (ShiftEnter to the previous one), Tab walks the fields, Esc returns the focus to the canvas with the layer still selected.
Fills are solid, linear, radial or angular gradients, or images; strokes have a position, width, dashes and caps.
Effects: + adds a drop shadow, inner shadow, layer blur, background blur, noise or texture. A blur is Normal or Progressive (from a start radius at one point to the full blur at another, with handles on the canvas). Noise scatters grains (Mono, Duo or Multi); Texture roughens the layer by moving its pixels along a grain. Grains depend only on the layer, so the canvas and every export show the same ones.

Prototype holds flows and interactions (Prototyping); Inspect is the read-only developer view (Handoff to code); Claude is the AI panel.

History#

UI Designer: Show Version History opens History: every change grouped by session, with its time, actor and summary, and the named versions. Click an entry to preview the design at that point, then restore it as a new change. UI Designer: Save Version… names the current state. Earlier history, from before the last consolidation, comes from git.

Comments#

Comments lists the threads of every page; Filter Comments… in its title bar shows Open, Resolved or Mine. See Handoff to code.

Problems#

Lint findings (UI Designer: Lint Design) appear in VS Code’s Problems panel; choosing one selects the layer, and UI Designer: Fix Lint Findings fixes what can be fixed automatically. Font warnings (“1 font missing”) show in the status strip.

Keyboard Shortcuts#

The panel lists every shortcut of the editor, including the ones you rebound in VS Code. The full table is on Keyboard and accessibility.