Viewing documents

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.

Navigating a document in the web app

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 frames and any other layers on a page.

5. Search button: Gives you a quick way to find specific frames 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. Displays additional document options, such as renaming, moving, duplicating, and more.

9. Document details: Opens the Details panel , 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 and also shows any starred versions.

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

12. Comments: Opens the Comments panel, where you can view comments or add your own, anywhere on the Canvas or frame. Comments relate directly to the current view on the Canvas. For example, if you’re viewing an individual frame, you’ll only see the comments that relate to that specific frame.

Viewing the Canvas and frames

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

You can also double-click on a frame to focus on it, or click its name beside the → on the upper left.

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

Zooming in and out

Whether you’re viewing frames 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 frame (= on non-US keyboards)
• - zooms out from a Canvas or frame
• Shift0 zooms to a selected frame’s actual size
• Shift1 fits a selected frame to your screen

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

Searching your document

Use the search bar to quickly find a specific frame 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 frames 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

Viewing components

At the bottom of the Document Details 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.

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 and Version panels on the upper right. To go back to the preview grid, click on back arrow at the beginning of the breadcrumb nav bar.

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.