Google Sheets in Adobe XD

Software Design
The Google Sheets plugin for Adobe XD enables designers within XD to enrich their designs with real content and data from Google Sheets. This allows collaboration with other team members to create dynamic designs right from XD.
The Challenge
Clade Design was invited (along with Impekable) to the first ever Adobe Dev Days. This was a private event for a small group of designers and developers to build out the first set of plugins for Adobe XD.
https://medium.com/adobetech/xd-dev-days-kickstarting-the-xd-plugin-ecosystem-90579a61bb1d
The outcome
At the 2018 MAX conference Adobe announced that plugins would now be available for XD. The Google Sheets in Adobe XD plugin was announced as one of the first plugins available to users on the main stage! Clade also gave a demo of the plugin alongside the Adobe team to help kickoff the new plugin developer tools.
Clade worked with the Bay Area Impekable team to create one of the very first Adobe XD plugins. The Clade team was responsible for all information architecture, design, illustrations, and animations while the Impekable team handled development and web hosting. Through this successful partnership we created one of the most-used XD plugins.

Our goal was to create a way to allow designers to more easily create and manage designs based on real data - data that could be managed outside of XD by non-designer team members. Google Sheets was an easy path for this light CMS plugin.

By the end of the three-day workshop we were able to demo a working version of the plugin which was then refined before public release at MAX 2018.

Download Google Sheets for Adobe XD today.
We kicked off the weekend with an overview from the Adobe team on what capabilities currently existed for plugin developers and how they were hoping to collaborate with us on developing their tools while we built the first version of plugins.

We then worked on our beta builds over the next two days. During this time we asked for additional rapid prototypes of features that we would need in order to be successful. We also participated in Adobe's own user tests to determine what they thought developers would want to be able to build with these new open-source development tools.

At the end of the two days we had an experience map, mockups of the core features of the application, and created an illustration style that would be in line with both Google and Adobe’s branding. We were then able to create the first version of the plugin and present it to Adobe and the other teams.
experience map
A high-level overview of the plugin. We knew we would need to include a website, onboarding flow, and various descriptive error screens.
In order to get a clear overview of what we needed to build, we put together this experience map which outlines all the connected states and flows of the plugin as well as any deviations that we would have to consider.

Once major factor was that users might want to keep Google Sheets - and their data - private. We knew we would  have to come up with an alternative to simply sharing public links in order to sync data.
Wireframes
After the Dev Days event we were able to further refine our designs through collaboration with Adobe. We used the two months before the announcement at Adobe’s MAX conference to refine the plugin and run simple user tests. Because of our limitations we had to be creative in the way that users interacted with the modals. We decided to include animated GIFs for onboarding as well as illustrations to help users understand the interactions they were intended to make at each step.
On-Boarding Animations
We wanted to add animations to help explain how to use the plugin. We felt that this helped alleviate any potential confusion.
We broke out onboarding into four key steps. We started with getting your Google Sheet document set up properly in order to make sure our plugin can pull in your data the way you want.

From there the next two steps go through how to set up your Sheet based on if you’re comfortable using a public link, or if you need to keep it private and upload an exported .CSV file.

The last step involves mapping users’ Google Sheet sections to the sections of their XD file that they want to populate. We even added the ability to randomize column order in case the user didn’t want the imported data to always be in the same order as their original document.
Visual Designs
When all the screens were put together we ended up with a very cohesive plugin that helps designers and anyone else that works with content. We also created a website to accompany the app and to provide more context for any error states.
See it in action
The Adobe team was thrilled to use this plugin internally and still showcase it as one of the most useful plugins on the store today! Click on the link below to check out Adobe's own Howard Pinsky giving a demo on how to use our plugin.

Some of our other work