Navigation

There are 3 different zoom contexts - project, page and widget

Different options become available at each context. Learn how to navigate the canvas to make your workflow even more efficient.

Project context:

The project will be zoomed out to the maximum and all the pages and links in your project will be visible. You can use this mode to move pages around your project and get an overview of your entire project.

How to zoom to project context

  • Click anywhere on the canvas.
  • Use your mouse wheel to zoom out.
  • Press the escape key on your keyboard.

Actions in project context

  • Drag pages to organise the layout of your prototype. The canvas will automatically re-centre to ensure your project is always in view.
  • Hover over links to access the link menu and update and delete links.
  • When creating a link, you will automatically zoom from widget to project level so you can drop links on any other screen in your project.

Page context:

The page will be centred and the page menu will be visible. Here, you can manage the width and height of your pages, make page notes, set the start page, orientation and more.

How to zoom into a page

  • Click on any page to zoom in and focus on that page.
  • The page that is currently in focused will have a grey border around it - this is known as the page frame.
  • Mouse wheel in over any page at project level to focus on that page.

Navigating between pages

  • Zoom out to the project level and click a new page to focus on that page.
  • Click a non active page at page level to focus on that page.
  • Click any link to follow that link to its destination page.
  • Use the arrow keys to navigate backwards and forwards between pages in preview mode.

Tip: If you focus on a non active page that is already on screen, the canvas won’t move. This helps when editing multiple pages that are lined up closely.

Actions at page context

  • Click between pages when zoomed in to change the focused page.
  • Click and drag the dark grey bar at the top of the page frame to move a focused page.
  • Click and drag the canvas when zoomed in to move it around. This may help access (otherwise inaccessible) parts of larger pages when designing on a smaller screen.

Widget context:

The widget menu will be visible and a widget or widgets will be selected. Use this level to change the look, feel, positioning and size of each widget.

  • Click on any widget to focus on that widget
  • When a widget is selected, the width and height resize handles will be visible.
  • Click on the page frame to deselect the widget and return to page context.
  • Change the zoom level in view setting to zoom in closer to small widgets or further out on larger widgets.

Timeline and Undo

Control-z (command-z on mac) will undo any action you take.

The timeline review in the bottom right corner (beside the bin) also has a full history of actions you’ve taken in the current session. You can use it to jump back to any previous state the project you’re working on.

Use version history to restore a different version of any project.

 

Keyboard Shortcuts:

In general:

  • ⌘ + key for mac or
  • Control + key for Windows or Linux.
P Switch to project preview
C Switch to comments mode
E Switch to project editing
L Open/close library
Escape Close a menu or zoom out to project context
⌘/CTR + + Zoom out
⌘/CTRL + - Zoom in
⌘/CTRL + 0 Zoom to 100%
General commands
⌘/CTRL + S Save
⌘/CTRL + Z Undo
⌘/CTRL + Y Redo (Also ⌘/CTRL + Shift + Z)
Selecting widgets
⌘/CTRL + A Select all widgets on the active page
⌘/CTRL + Mouse click Add/remove to selection
Delete/Backspace Delete selected widgets
Escape Deselect selected widgets
⌘/CTRL + C Copy
⌘/CTRL + X Cut
⌘/CTRL + V Paste
⌘/CTRL + D Duplicate
Moving and resizing widgets
← ↑ → ↓ Move widget
Shift + ← ↑ → ↓ Move widget 10x
⌘/CTRL + ← ↑ → ↓ Increase size in the selected direction
⌘/CTRL + Shift + ← ↑ → ↓ Reduce size in the selected direction
⌘/CTRL + Mouse resize Maintain aspect ratio when resizing a widget
Text editing
⌘/CTRL + I Make text italic
⌘/CTRL + B Make text bold
⌘/CTRL + U Underline text
⌘/CTRL + Enter Confirm text change
Escape Cancel text change