About

Gallery is a collaborative tool for sharing design work, getting feedback, and tracking revisions – quickly and efficiently. Optimized for Material Design, Gallery provides easy access to the resources needed to implement designs using Material Components.
For more information, please visit material.io/tools/gallery


Getting started

Gallery is available to all users with a Google account including companies who are current G Suite customers. There is no need to sign up for additional accounts or licenses.

Collaborate and share designs

Get a video tour of Gallery and learn how to upload, share, and present designs. Then dive into Inspect Mode.

Read More

Get a video tour of Gallery and learn how to upload, share, and present designs. Then dive into Inspect Mode.

To get set up

Step 1: Download the Material Plugin for Sketch Step 2: Download the Gallery Mobile App, available for Android and iOS Step 3: Sign in using...

Read More

Step 1: Download the Material Plugin for Sketch
Step 2: Download the Gallery Mobile App, available for Android and iOS
Step 3: Sign in using your Google account at Gallery.io and use the sample project get familiar with all the features in Gallery


Projects in Gallery

In Gallery, design work is organized into projects. Projects bring together your work and the people you work with. To view projects, use the tabs at the top of the page, which are organized in order of recent projects, projects you own, and projects in your company (for G Suite users).

Within a project, you can create collections to organize your design work. A collection is an ordered set of files. Collections can capture flows, explorations, presentations, and more. Every media file must be part of a collection.. Supported media formats include: BMP, GIF, JPEG, JPG, PNG, TIFF, WEBP, and MP4.

The following examples represent ways to organize work into projects and collections:

Example 1: Organize work by platforms

Project = The name of your app or feature Collections = Platforms (mobile, tablet, etc.)

Read More

Project = The name of your app or feature

Collections = Platforms (mobile, tablet, etc.)

Example 2: Organize work by design phases

Project = The name of your app or feature Collections = Various design phases in your project (sketches, wireframes, visual design, etc.)

Read More

Project = The name of your app or feature

Collections = Various design phases in your project (sketches, wireframes, visual design, etc.)

Example 3: Organize work by features

Project = The name of your release or milestone Collections = Features (onboarding, search, profile, etc.)

Read More

Project = The name of your release or milestone

Collections = Features (onboarding, search, profile, etc.)


Upload work to Gallery

For Sketch users, uploading work to Gallery is quick and easy using the Material Plugin.

  1. Download the Material Sketch Plugin and click on the file to install.
  2. On the Sketch menu under “Material Plugins,” select “Upload to Gallery.”
  3. You will be directed to a browser to sign in using your Google account.
  4. After logging in, you can return to Sketch to resume your upload.

The plugin allows you to upload all or selected artboards. You can upload in the order of artboard position so there is no need to add numbers at the beginning of artboard names to put in alphabetical order.

Once a project and collection is selected, you will have the option of creating a new iteration or updating an existing iteration, which is a revision of a collection.


Sharing and reviewing designs

Once designs are uploaded to Gallery, they can be shared with your team members (i.e. engineers and stakeholders) easily by passing the URL. Your team members can collaborate with you by leaving comments and/or using the Inspect Mode to get detailed specifications on the designs.

Comments and annotations

All users with view access can add comments and annotations by opening the Comment panel via the “Comment” button in the top menu bar. Comments...

Read More

All users with view access can add comments and annotations by opening the Comment panel via the “Comment” button in the top menu bar. Comments can be questions, suggestions, explanations, or anything else that helps communication between team members.

To notify others and invite them to the conversation, include “+” and a teammate’s email address in a comment.

To mark the part of an image you’d like to annotate, tap the Annotation button at the bottom right of the comment box. Then click and drag a bounding box over the area you want to annotate. To see which part of an image an annotation refers to, hover over the annotation on the comment list.

Inspecting design spec

Designs (i.e. Artboards) that are uploaded using the latest Material Sketch Plugin can be inspected via the Inspect Panel, which can be opened via the...

Read More

Designs (i.e. Artboards) that are uploaded using the latest Material Sketch Plugin can be inspected via the Inspect Panel, which can be opened via the “Inspect” button in the top menu bar. Once entered into the Inspect Mode, you can click on any component or layer to get measurements and redlines directly on the artboards. When a component is selected, hovering over different layers will show you the distances between them.

On the Inspect panel, additional properties of the selection are display. These include:

  • Position
  • Width and Height
  • Color information (Tip: you can click on the palatte to switch from HEX to rGBA)
  • Typography information
  • Gradient
  • Border
  • Shapes

If your artboards uses any components created by the Material Theme Editor,, Gallery will recognize them. When they are selected, the following Material resources are available in the Inspect panel

  • Link to design specification
  • Link to developer documentation
  • Link to the corresponding theme information including the color scheme, all typography

More tips on using Gallery

Project permissions

As a designer, you can easily change who can view and edit your projects. To access permissions options, open a project and tap the share...

Read More

As a designer, you can easily change who can view and edit your projects. To access permissions options, open a project and tap the share icon at the top right of the screen.

If you are using a company account (i.e. G Suite account), everyone in your organization can view projects you create. To change a project’s permissions so only invited people can view or edit it, uncheck the “Anyone at…” option in the sharing options.

To invite someone to your project, enter their name or email address in the to “Add editors” field and set the level of access you want them to have. Viewers can only view a project, while Editors can edit and delete items in projects.

Browsing iterations

Iteration is a revision of a collection. It is numbered and includes a description so that your team can track what has changed throughout the...

Read More

Iteration is a revision of a collection. It is numbered and includes a description so that your team can track what has changed throughout the life cycle of a project. You can review all iterations of a collection via the "iteration history" panel.

When a collection has multiple iterations, your Gallery collection link will point to the latest iteration. You can attach this link to any bug report or documents so that collaborators can find your latest designs.

Changing appearance settings

As the owner or editor of a project, you can customize how files are viewed. To access the appearance settings, go to the file viewer...

Read More

As the owner or editor of a project, you can customize how files are viewed. To access the appearance settings, go to the file viewer and tap the Appearance Setting in the top menu bar. Once the settings are configured, they will be set as the default for all future viewers.

You can configure the following settings:

Device frame

Place the current image into a device frame, and scales it accordingly.

Zoom

Zoom in or out of a file, whether it’s framed or not.

Background color

Choose a color that contrasts with your design, for the best viewing experience.

Keyboard shortcuts

Gallery supports a set of keyboard shortcuts to help you navigate faster within the app. Move to next image: > or J Move to previous...

Read More

Gallery supports a set of keyboard shortcuts to help you navigate faster within the app.

Navigation and menus

Move to next image: > or J

Move to previous image: < or K

Open/close appearance panel: A

Open/close comment panel: C

Open/close inspect panel: T

Enter/exit presentation mode: F or P

Appearance

Change zoom: Z or Ctrl+Z

Rotate: R

Change frame: [ or ]

Change background color: B

Comments

Start a new comment: Shift+M

Save comment: Cmd+Enter

You can view the list of shortcuts within the app by clicking Shift+/


Send feedback to the Gallery team

Report issue or tell us what you think of Gallery by submitting feedback.

  1. Go to Gallery.
  2. Select Send feedback in top right corner of the UI
  3. You can tell us things like:
  • What you like or dislike about the app
  • Things that are confusing or don't work

If you check the box to include screenshots and logs, it helps us understand your feedback.