Skip Navigation

Browsing in the web app

When you view a document in the web app, you’ll see it exactly as it appears in the Mac app, including any design elements or notes that are outside of Artboards. From here, you can leave comments, inspect individual Artboards, and explore your document’s Components in more detail.

You can navigate a document using the nav bar, Pages List and sidebar. When you’re viewing a specific page, you can scroll in any direction, zoom in and out, and double-click on an Artboard to view it in isolation, leave comments or inspect it.

An image showing the main areas of the Canvas view in the web app

Navigating a document in the web app (September 2022).

  1. Nav Bar. Contains the Workspace switcher and breadcrumbs to help you navigate the current document.

  2. Pages List. Shows all the pages in a document, clicking on any of them will navigate between them.

  3. Canvas. Renders all Artboards and any other Layers within the specific page of the document.

  4. Search bar. Offers a quick way to find specific Artboards and Components within a document.

  5. Zoom / view. Changes the current zoom level of whatever you’re viewing.

  6. Edit in. Opens the document you’re viewing in the Mac App, ready for editing.

  7. New comment icon Add Annotation 24x24. Used to pin annotations to any point on the Canvas or Artboard within a page.

  8. Dots Cloud Displays the Document menu with options to Share, Rename, Move and Duplicate the document.

  9. Sidebar. Contains tabs to view information About the document, any existing Comment activity, and its Version history.

Make sure you remove anything from your Canvas that you don‘t want other people to see — like notes or sensitive information. Anyone viewing your document will be able to see everything on your Canvas — in both the Mac and web apps.

When you’re viewing a document’s full Canvas, you can double-click any Artboard to view it in detail, add comments, or inspect it for handoff. You will see Layers that aren’t on an Artboard but you won’t be able to select them.

To view an individual Artboard double-click on it. (June 2022)

Viewing document information, comments and the Inspector

In the sidebar, you’ll find information about the document you’re currently viewing on the Canvas. It has three tabs:

  1. About. Contains links to view a document‘s Pages, Symbols, Color Variables, Layer and Text Styles, and Prototypes. You can also choose to share or follow documents, as well as export any assets.
  2. Comments. Displays a list of Comments related to the document, along with notification options.
  3. Version. Shows the version history of the document.

When you’re viewing a specific Artboard, you’ll see an Inspect tab instead of the About tab. Clicking on it will open the web Inspector ready for developer handoff.

Note: The Comment tab only displays comments that relate directly to the current view on the Canvas. For example, if you‘re viewing an individual Artboard, you‘ll only see the comments that relate to that specific Artboard.

You can show or hide the sidebar using the sidebar icon Sidebar.

Searching your document

The search bar offers a quick way to find a specific Artboard or Component in your document. You can search a document in two ways:

  1. When you’re viewing the full document Canvas, enter a search term to find Artboards and Components that match it.
  2. When you’re browsing Components views, enter a search term to find matches within the specific Component type you’re currently viewing.

Searching for a Symbol in the Components web view (July 2022)

Viewing prototypes

You’ll find the link to view all of the prototypes in the document under the About tab in the left sidebar. Click on it to see a grid view of the various prototype Start Points. From there, you can click on a Start Point’s thumbnail to play the prototype. Hovering over the prototype’s thumbnail and clicking the Dots Cloud gives you a couple of options for showing or hiding hints as you play your prototype.

Viewing Components

Under the about About tab in the sidebar, you’ll find links to specific views for your document’s Components (Pages, Symbols, Text Styles, Layers Styles, Color Variables). These Component web views are handy for browsing your design system‘s Libraries or exploring local Components in a design.

Each Component gets a big preview that you can hover over to zoom and see more details. Double-click on Symbols to inspect them and add comments. Click once to inspect Color Variables, Layer Styles and Text Styles with the Inspector.

Browsing Components in the Canvas view (July 2022)

The Symbols view

When you’re viewing a document’s Symbols, the left sidebar shows a list of any groups they belong to. While we‘ll show all your Symbols by default, you can click on any group to filter it on the preview grid.

If you want to see a Symbol in detail, click on its thumbnail in the preview grid. From here, you can inspect it in detail, like any other Artboard in your document. You‘ll also be able to leave comments and see all the versions of that Symbol by switching between the Comment and Version tabs in the right sidebar. To go back to the preview grid, click on the back arrow button at the beginning of the breadcrumb nav bar.

Navigating and inspecting a Symbol in the Canvas view (July 2022)

The Styles and Color Variables views

Navigating Layer Styles, Text Styles or Color Variables works in the same way for all three Components. You can navigate groups in the left sidebar or click on a specific Component’s preview to inspect.

Viewing, inspecting and copying a color variable in the Canvas view (July 2022)

We recommend using Safari 15.2 or later for best performance.

Last updated on 20 Sep 2022

Was this article useful?

Thanks for your feedback.
An error occurred, please try again later.