Clade
Design

Google Sheets in Adobe XD

Design, illustration
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.
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 one of the first plugins available to users on the main stage!
Get the plugin
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.
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.
wireframes
After the Dev Days event we refined our designs through collaboration with Adobe. We used the two months before MAX 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.
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 due to our technical hurdles.
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 above to check out Adobe's own Howard Pinsky giving a demo on how to use our plugin.

Some of our other work

MURU

A medical app for civilian and military EMTs, customized to their protocol sets.
App Design

BodyArt

We worked with a startup to design and build their first suite of SaSS products for digital consent at piercing and tattoo shops across North America.
SaSS Products

Super Peach Boy

Creative South's first mobile game!
Video game

Bento Blox

We partnered with Nice Things to create our first mobile game, now available on the App Store!
Game Design