The editor at a glance

When you open a file, you are in the editor: the canvas in the middle, panels on each side, a bar along the top and a small toolbar floating at the bottom. This page names each part, so the rest of the Guide makes sense.

The tab bar

Along the very top, Home is the first tab and every file you open gets a tab of its own, with its picture when you hover. Press + (⌥⌘N) for a new file. Right-click a file’s tab for the file menu. ⌃⇥ moves to the next tab, and ⌥⌘W closes this one.

When you press Preview, the prototype opens in a tab beside the file, marked with a play sign. Your account face sits at the end of the tab bar.

The top bar

• Deck (top left, with the uxdeck mark) is the main menu: Deck settings, Account settings, Go to Home, New file, Install as an app (when your browser offers it), then the File, Edit, View, Tool and Preferences menus, your AI balance and Help.
• Insert (the +) adds a frame, section, stack, text, button, image, video or sticky note, and holds the Shapes and Draw tools. Beside it sit quick buttons for Frame, Text and Pen.
• The file’s name, in the middle, opens the file menu: Rename, Duplicate, Copy link to page, Move to folder, Export page, Save a local copy, Open a local copy…, Save a version…, Version history…, Invite…, Deck settings, Move to archive and Move to trash. Double-click the name to rename it. Next to it, the folder the file is in, and a Live badge when it is published.
• On the right: Preview (the play button), Export options (the three dots), the faces of people in the file with Invite, and Publish. If you cannot publish the file, a single Export button replaces both the three dots and Publish.

The left panel

Three tabs:

• File lists the file’s pages at the top, with + to add one, and the layers of the current page below. Each layer row can be hidden, locked or zoomed to. Read Pages, frames and sections and Layers.
• Assets holds the file’s components, and its text and effect styles. Read Components and variants.
• Agent is where you talk to uxdeck’s agent. Read The agent.

The right panel

Three tabs, with ⌥8 and ⌥9 for the first two:

• Design shows the settings of what you selected: layout, size, fill, stroke, text, effects, export. With nothing selected, it shows the page: its canvas colour, the fonts the file uses and its variables.
• Prototype links screens together and sets how they move. Read Link screens and Preview.
• Review holds the coach’s Findings, the Checklist, the file’s Comments and Reading. Read The UX coach.

The floating toolbar

At the bottom of the canvas: Move (V), Hand (H), Blocks, Quick actions (⌘K), Coach, Fix my design, Comment (C), the light or dark theme, and the zoom level. Click the zoom level for Zoom in, Zoom out, Zoom to fit, Zoom to selection and 50, 100 or 200%.

A dot on Coach means the coach has a finding for you. Read Quick actions for the search field that reaches everything else.

Make room

• Hide interface (⌘\) hides both panels, the top bar and the tab bar, leaving the canvas and the floating toolbar. Press it again to bring them back.
• Drag the inner edge of a panel to make it wider or narrower.
• Right-click the right panel to switch its tab; right-click either panel for Hide interface.

Viewers

If you can only view a file, the Insert tools are gone and the floating toolbar offers Ask to edit. You can still move around, select layers, read their settings, comment and play the prototype. Read Viewers and asking to edit.

Catches

• Some buttons depend on your role. Only the file’s owner can publish; anyone else sees Export in its place.
• The editor needs a screen at least 768 pixels wide. On a phone, uxdeck shows your files, comments and prototypes, not the editor. Read uxdeck on your phone.
• Developer names in the View menu change the panels’ words to CSS ones: Auto layout reads Flexbox, Hug reads fit-content.