Earlier in the year Google officially announced Material Gallery which is also referred to as just Gallery. Prior to the official launch many designers had the opportunity to enroll in Google’s early adopter program to test out the beta. I was one of those that jumped right in to see what Google was up to. However, since the official launch I wanted to circle back up and give a review now that’s it’s had some time to improve.
To understand Gallery you have to understand Google’s approach to design. They are building that end-to-end experience of creating a design language (Material), building the tools to help collaborate (Gallery), allow you to prototype and apply motion design (Stage), and then easily implement those designs (MDC & Flutter). Stage is a different article since any reference to it has disappeared. Gallery has its place in that end-to-end design process, but this space in general has become very crowded with dominant players such as InVision.
To get started you can simply go to https://gallery.io/. Great news, if you have a Google account then you already have access! Gallery is 100% free. The primary vector design program that Gallery supports is Sketch. You can still export from most design programs and then upload to Gallery but utilizing the Material Sketch plugin makes it a lot easier. Directly from the plugin you can create a new project or select an existing one, create a new collection or select an existing one, and you can also select settings like upload order.
Another point to call out is that Gallery can be used to track artifacts from your design process. If you have whiteboard drawings, sketches, or any other items you want to keep track of, then you can upload them as well. Gallery not only exists in the web, but it also has an Android and iOS application which allows you to upload saved photos or add them directly from your camera.
As you upload items into Gallery you will notice it has a different organizational paradigm than Zeplin. In Zeplin everything from one project lives on a single page and can be organized through sections and tags. In Gallery you have a project, a project has collections (folders), and inside collections is where all of your screens live. This can be viewed as a pro or a con depending on how you like to organize your work.
Commenting in Gallery is a simple task. You can select certain parts of a mockup that you want to highlight, or you can just make a comment without a highlight. Using the “@” symbol will allow you to tag anyone else on the project. As you upload new iterations it will automatically show the latest screens, but it still gives you the option to look back in time and see how the designs have progressed.
Switching over to the inspect tab will give developers quick access to the specs for building it out. When clicking on an element you can see the name of the items and the specs for that item. If you have a design system, then make sure that your Sketch components are named properly so that developers can quickly see the exact component they should use (this means the specs for that component don’t matter). There is also a section called All Elements that allows you to drill down into the tree structure of everything in the mockup just as you can in Sketch.
Some other notable features are that you can tag in any links at the project level such as requirements, slide decks, or anything else relevant to the project. When viewing mockups you can also select a device frame to see how it would actually look sitting inside of something such as a phone. You can also grab links to specific screens and include them in things like JIRA stories. That allows developers to access the relevant links directly from a story.
Compared to other products Gallery is lacking in features. There are no extensions that can be added for additional features. If you add many screens to a single collection there is no search functionality at that level to help you quickly find what you need. You also miss out on subtle features that Zeplin has such as being able to click on a mockup, pop it up as an overlay where you can control the transparency, and then overlay it on top of your iOS or Android simulators to see how well the end product lines up with the design.
Overall, Gallery definitely gets the job done for tracking artifacts, collaborating, iterating, and handing off work to development teams. It has a clean and easy-to-navigate layout that will have you up and running in minutes. I look forward to seeing if Google takes this further and gets into the motion design and prototyping space.