Introducing a neater option to design your G Suite Add-on


Posted by Kylie Poppen, Senior Interplay Designer, G Suite and Akshay Potnis, Interplay Designer, G Suite

You’ve simply scoped out an superior new option to clear up to your buyer’s subsequent problem, however wait, what in regards to the design? Constructing an integration between your software program platform and one other comes with a laundry listing of issues to consider: your imaginative and prescient, your customers, their expertise, your companions, APIs, developer docs, and so forth. Caught between two totally different platforms, many constraints, and restricted time, you are in all probability questioning: how may we construct essentially the most intuitive and highly effective person expertise?

Think about making a presentation, with Google Slides you could have all types of templates to get you began, and you may construct a fantastic deck simply. However, to construct a seamless integration between two software program platforms, these pre-built templates don’t exist and also you principally have to begin from scratch. In the very best case situation, you’d create your individual parts and layer them on high of one another with the aim of constructing the UI appear nearly proper. However this takes time. Hours longer than you need it to. With out design tips, you are caught guessing what’s or shouldn’t be attainable, seeking to different apps and emulating what they’ve already carried out. Which leads us to the truth that some add-ons have a suboptimal expertise, as a result of time is restricted, and also you’re left to construct just for what you are able to do, quite than what’s truly attainable.

To simplify all of this, we’re introducing the G Suite Add-ons UI Design Equipment, now dwell on Figma. With it you may browse all the parts of G Suite Add-ons’ card-based interface, study greatest practices, and easily drag-and-drop to create your individual distinctive designs. Save the time spent recreating what an add-on will appear like, so that you could spend that point eager about how your add-on will work .

Whereas the UI Design Equipment has solely been dwell for a bit over a month, we’ve already been listening to suggestions from our companions about it’s affect.

“Zapier connects greater than 2,000 apps, permitting companies to automate repetitive, time-consuming duties. When constructing these integrations, we need to guarantee a seamless expertise for our clients,” stated Ryan Powell, Product Supervisor at Zapier. “Nevertheless, a associate’s UI will be troublesome to navigate when ranging from scratch. G Suite’s UI Design Equipment permits us to construct, take a look at and optimize integrations as a result of we all know from the beginning what’s and isn’t attainable within GSuite’s UI.”

Right here’s how you can use the UI Design Equipment:

Step 1

Discover and duplicate design equipment

Seek for G suite on Figma neighborhood or use this hyperlink

Open G Suite Add Ons UI Design Equipment

Simply click on the duplicate button.

Step 2

Select a template to start

Go to UI templates web page
Choose a template from the listing of templates

Step three

Copy the template and detach from symbols to begin modifying

Useful Hints: Options that will help you iterate shortly

Construct with auto format, you don’t want to fret in regards to the particulars.

Copy paste maintains format padding & construction.

Maintained padding & construction whereas modifying.
Inbuilt mounted footer and peek playing cards.

Visualize your design towards G-Suite surfaces simply.

Documentation constructed proper into the template.

Go to the part web page (e.g part)

Discover format + documentation / api hyperlinks on respective pages

Subsequent Steps to Think about:

With G Suite Add-ons, customers and admins can seamlessly get their work carried out, throughout their favourite office functions, without having to go away G Suite. With this UI Design Equipment, you can also focus your time on constructing a fantastic person expertise within G Suite, whereas simplifying and accelerating the design course of. Comply with these steps to get began at the moment:

Obtain the UI Design Equipment

Get began with G Suite Add-ons

Hopefully this can encourage you to construct extra add-ons utilizing the Playing cards Framework! To study extra about constructing for G Suite, take a look at the developer web page, and please register for Subsequent OnAir, which kicks off July 14th.