Open in vscode.dev Install

Keyboard and accessibility

Every keyboard shortcut, moving between the editor's regions with F6, screen readers, high contrast themes and reduced motion.

The Keyboard Shortcuts panel: a search over every shortcut, by category.
  • Press CtrlShift? for the shortcuts
  • Search for a command
  • Every shortcut, by category

The Keyboard Shortcuts panel (CtrlShift?, UI Designer: Keyboard Shortcuts) lists every shortcut of the editor, including the keys you rebound in VS Code. The tables below are the same list.

Tools#

Key Tool
V Move
K Scale
H (or hold Space) Hand
F Frame
R Rectangle
O Ellipse
L Line
P Pen
Shift+P Pencil
T Text
C Comment
Shift+D Inspect (Dev Mode)

Edit#

Key Action
Ctrl+Z / Ctrl+Shift+Z Undo / redo
Ctrl+S Save
Ctrl+X, Ctrl+C, Ctrl+V Cut, copy, paste (also in the Layers view)
Ctrl+Shift+C Copy as PNG
Ctrl+D Duplicate
Delete Delete
Ctrl+R Rename layers

Selection#

Key Action
Ctrl+A Select all on the page (in the Layers tree: the focused row’s siblings)
Tab / Shift+Tab Select the next / previous sibling on the canvas
Enter Select the children; edit a text or a vector
Shift+Enter Select the parent
Esc Clear the selection
Arrows, Shift+Arrows Nudge by 1 px, by 10 px

Arrange#

Key Action
Ctrl+G Group selection
Ctrl+Alt+G Frame selection
Ctrl+Shift+G Ungroup
Ctrl+] / Ctrl+[ Move up (bring forward) / move down (send backward)
Ctrl+Shift+] / Ctrl+Shift+[ Bring to front / send to back
Ctrl+Alt+] / Ctrl+Alt+[ Indent into the layer above / unindent out of the parent
Shift+H, Shift+V Flip horizontal, vertical
Shift+A Add auto layout

Vector and components#

Key Action
Ctrl+E Flatten
Ctrl+Shift+O Outline stroke
Ctrl+Alt+M Use as mask
Ctrl+Alt+K Create component
Ctrl+Alt+B Detach instance

View#

Key Action
+ / − Zoom in / out
Shift+0 Zoom to 100 %
Shift+1 Zoom to fit
Shift+2 Zoom to selection
Shift+R Rulers
Ctrl+Shift+4 Layout guides
Ctrl+Y Outline mode

Panels and dialogs#

Key Action
Ctrl+/ Quick actions
Ctrl+Shift+? Keyboard shortcuts
Ctrl+Shift+E Export selection
Ctrl+Alt+Enter Preview
Ctrl+Alt+I Ask Claude (AI panel)
Ctrl+Shift+Escape Stop the agent

Focus#

Key Action
F6 / Shift+F6 Next / previous region of the editor
Arrows Move inside a tool bar, tabs, tree or list
F2 Rename the focused layer
Esc Close a menu, popover or dialog
Right Open a submenu
Enter / Shift+Enter Design panel: commit a field and go to the next / previous one
Esc Design panel: back to the canvas

Ctrl+E, Ctrl+Shift+O, Ctrl+Alt+K, Ctrl+Alt+B, Ctrl+Alt+Enter, Ctrl+Y, Ctrl+Alt+I, Ctrl+Shift+E, Ctrl+/, Ctrl+Shift+? and Ctrl+Shift+Escape are VS Code keybindings (the commands ud.vector.flatten, ud.vector.outlineStroke, ud.createComponent, ud.instance.detach, ud.preview, ud.toggleOutlineMode, ud.ai.togglePanel, ud.exportSelection, ud.quickActions, ud.showShortcuts and ud.stopAgent), so you can change them in VS Code’s Keyboard Shortcuts editor and the panel shows your keys. VS Code keeps Ctrl+Shift+F for its own search, so Find and Replace opens from Quick actions or UI Designer: Find and Replace.

Regions and keyboard navigation#

F6 moves the focus to the next region of the editor, in order the left panel, the tool bar, the canvas, the right panel and the status strip (regions that are not shown, such as the panels when they are VS Code views, are skipped) and ShiftF6 back. Inside a region:

  • The tool bar is one tab stop; Left and Right move between its buttons.
  • The Layers tree: Up and Down move, Right expands or enters a frame, Left collapses or goes to the parent, Home and End jump to the first and last row, F2 renames. Every layer on the canvas is reachable there.
  • Menus: Up and Down move, Right or Enter opens a submenu, Left or Esc closes it.
  • Number fields: Up and Down change the value by 1, with Shift by 10; Enter or Tab commits, Esc reverts.
  • Modals trap the focus, close with Esc and return the focus to where you were. Every control has a visible focus ring.

Screen readers#

Panels use the matching ARIA roles: the tool bar is a toolbar, the layer tree a tree with multi-selection, tabs a tablist, number fields spinbuttons with labels such as “X position”. The canvas announces the selection. Changes made by an agent are announced in a polite live region (“Claude changed 3 layers”), at most once every few seconds.

High contrast and reduced motion#

The editor uses your VS Code colour theme, including High Contrast dark and light, where focus rings use the theme’s contrast border colour so they stay visible. With reduced motion turned on in your system, the canvas, the AI panel and the preview player skip their animations. Canvas content is your design and keeps its own colours.

Edit this page