Think you know Sketch? — Let’s bust some myths!

Learn more
Skip Navigation

Browsing the web app

Last updated on 28 Jul 2023
5 min read

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. Click on a page name to navigate to it.

  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 Chat bubbles. Used to pin comments anywhere on the Canvas or an Artboard within a page.

  8. Three dots 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 components

Components web view

Watch lesson

Under the about About tab in the sidebar, you’ll find links to specific views for your document’s components (Pages, Symbols, Text Styles, Layer 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.

Moving documents between Workspaces

Only Admins can move documents between Workspaces. They’ll also need to be an Admin or an Editor in the Workspace they are moving documents to.

To move a document to another Workspace, head to the web app. Hover over the document’s thumbnail you want to move to another Workspace and click on Three dots. Click Move to Project…. In the window that appears, hover over the Other Workspaces tab and pick the Workspace and project where you want to move your document to. We’ll ask you whether you still want to keep sharing the document with everyone that was previously invited or not.

While you’ll still see expired Workspaces in the Other Workspaces tab, you won’t be able to move documents to those Workspaces until you activate them.

Note: You can’t move documents in My Drafts to another Workspace.