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.

Navigating the canvas

General commands

Selecting widgets

Moving and resizing widgets

Text editing

In general:

• ⌘ + key for mac or
• Control + key for Windows or Linux.

Navigating the canvas

General commands

Selecting widgets

Moving and resizing widgets

Text editing

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.

By default, Fluid UI tries to show your pages and widgets at 100% size. This reduces the amount of movement needed to edit your mockup and provides a better overall experience.

For screens that don’t fit in your browser window, Fluid UI provides two options to manage how you design your pages - Smart Zoom and Fixed Zoom. Each of them are useful in different contexts.

The options to change your camera settings are in the view settings which you’ll find in the page menu.

Smart camera

• The page you’re working on will be fitted as big as your browser allows.
• When zooming out from a widget you will be brought back to the page context.
• The page menu will always be visible in page context.
• When you focus on a page in Smart mode, it will center the page and scale it to ensure it fits properly on your screen. This means you can see all of your selected page on the screen with one click as big as it can be drawn. A second click on a widget will finish scaling to that widget.

You can change the zoom on a page level by selecting view setting and adjusting it to your liking.

Tip: This mode is best when dealing with landscape pages on small monitors and when you frequently want to be able to view all the parts of a page in one go.

Fixed camera

In fixed camera mode, clicking a page will automatically zoom you in fully to the widget scale without any intermediate zoom steps.

The page will center on the area you clicked, meaning you can quickly zoom in and out of big pages and target different parts of the screen you are working on.

Since you have already zoomed in to the widget zoom level, no additional zooming will be needed to work on widgets in that part of the screen.

Tip: This mode is best when you’re doing a lot of fine detailing work and want to skip quickly between project and widget zoom levels with less overall screen movement or when dealing with long screens full of content.

Setting the zoom scale

You can decide what scale to zoom in to when a widget is selected. The default is 100%. This can be set to any number especially for projects that require a finer level detail.

Setting the zoom scale gives you fine grain control over how far you want to zoom in to individual widgets.

Large widgets can sometimes be difficult to view completely on a small monitor. Set the zoom scale to 50% or 75% to be able to view those widgets.

Mouse zoom

If you are using mouse wheel zoom and zooming is happening too often, try turning down the sensitivity for scroll actions in your computer’s settings or turning off mouse scrolling in the view settings.

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.
• Click the zoom out button (visible only at page or widget context).
• 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-center 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 centered 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 zoom into 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.