Sketch 100 — Everything new in 3 minutes. Learn more

Skip Navigation

Viewing documents

Last updated on 07 May 2024
4 min read

When you view a document in the web app, you’ll see it exactly as it appears in the Mac app. From here, you can leave comments, inspect individual layers, explore your document’s components in more detail, run prototypes, and easily share it with other people.

An annotated screenshot of the web app’s interface while viewing a document

An overview of the web app’s interface while viewing a document

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

  3. Zoom / view: Offers various zooming options.

  4. Canvas: Shows all Artboards and any other layers on a page.

  5. Search button: Gives you a quick way to find specific Artboards and components in a document.

  6. Edit in Sketch: Opens the document you’re viewing in the Mac App, where you can make edits.

  7. Share: Enables you to share the open document with other Workspace Members, Guests, or as a public link.

  8. Three dots Displays additional document options, such as renaming, moving, duplicating, and more.

  9. Document details: Opens the Details panel Information button, where you can view the document description, see who’s working on it, and export assets and design tokens.

  10. Versions: Opens the Versions panel Clock and also shows any starred versions.

  11. Inspect: Opens the Inspector panel Code block. With the Inspector open, select any layer on the Canvas or Artboard to show all its properties.

  12. Comments: Comments Opens the Comments panel, where you can view comments or add your own, anywhere on the Canvas or Artboard. Comments 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.

Anyone viewing your document will be able to see everything on your Canvas — in both the Mac and web apps. Only documents in My Drafts are private (unless you share those too)

Viewing the Canvas and Artboards

You can instantly navigate to different pages in a document using the Nav bar or Pages List.

Navigating around a document in Canvas view

You can also double-click on an Artboard to focus on it, or click its name beside the on the upper left.

Double-click on individual Artboard to view it in detail

If you’re viewing a page in Canvas view, simply click and drag to pan around.

To bring back the left sidebar, click the Workspace logo on the top left. Click anywhere on the Canvas to hide the sidebar again.

Zooming in and out

Whether you’re viewing Artboards or the whole Canvas, you can hold and scroll your mouse wheel to zoom in and out. Alternatively, use the zoom controls on the bottom left, or the following shortcuts:

  • + zooms in to a Canvas or Artboard (= on non-US keyboards)
  • - zooms out from a Canvas or Artboard
  • Shift0 zooms to a selected Artboard’s actual size
  • Shift1 fits a selected Artboard to your screen

Keep in mind that these shortcuts may differ depending on what keyboard you use.

Searching your document

Use the search bar Magnifying glass to quickly find a specific Artboard or component in an open 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 view, enter a search term to find matches within the specific component type you’re currently viewing

How to searching for a Symbol in the Components view

Viewing components

Components web view

Watch lesson

At the bottom of the Document Details Information button panel, you’ll find links to specific views for your document’s components (Pages, Symbols, Text Styles, Layer Styles, Color Variables). These component views are handy for browsing your design system’s Libraries or exploring local components in a design.

Each component has its own preview that you can hover over to zoom and view in more detail. Double-click on Symbols to inspect them and add comments. Click once to inspect Color Variables, Layer Styles and Text Styles.

Browsing components in Canvas view

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.

To see a Symbol in detail, click its thumbnail in the preview grid. From here, you can inspect it like any other layer in your document. You’ll also be able to add comments and see all the versions of that Symbol by switching between the Comments Comments and Version Clock panels on the upper right. To go back to the preview grid, click on back arrow Back to Instance button at the beginning of the breadcrumb nav bar.

Navigating and inspecting a Symbol in Canvas view

The Styles and Color Variables views

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

Viewing, inspecting and copying a color variable in the Canvas view