Design your next app with the Atlassian Vendor Sketch Plugin

Reading Time: 4 minutes

I’m sure most designers would laugh if I approached them in a black trenchcoat & sleek sunglasses, leaned in thoughtfully, and said “What if I told you I could make you work 3 times faster?”.

Morpheus, from The Matrix, looking like he’s just done some hella good design.

It sounds absurd, right? I’m sure many of us have been aggressively customising keyboard shortcuts and browsing listicles of Sketch tips just to eke out a couple of milliseconds of extra time here and there. But hear me out for a moment, and let me show you how deep this rabbit-hole goes.

A red lozenge component side by side with a blue one.

We made it easier to design with Atlassian

We’re really proud to introduce the Atlassian Vendor Sketch Plugin.

A short outline video demonstrating each of the features of the Vendor Sketch Plugin.

A month or so ago, we rounded up a handful of designers and asked them to build common Atlassian designs with and without our design tools. We learned that for every hour spent tab-switching between atlassian.design and copy-pasting from sticker sheets, a designer with the Sketch Plugin by their side only takes 21 minutes!

What used to take 60 minutes without our tools, now takes 21 minutes.

Here’s how they did it.

Vendor GUI Pack

We launched the Vendor GUI Pack last November — and today it’s becoming a lot easier to get started and stay up to date.

An image captioned “50+ pixel-perfect Atlaskit components”, surrounded by examples of components from the Vendor GUI Pack.

The Vendor Sketch Plugin automatically supplies and updates the Vendor GUI Pack for you, which now stays up to date with our internal components. That means less hassle and less inconsistencies with Atlaskit going forward!

Templates

Templates are the start of any design project at Atlassian — they provide an empty background to frame your designs within a real product context. I genuinely can’t walk three metres in the office without seeing a print-out of these on a wall somewhere, because they’re so effective at visualising new features & concepts.

A screenshot from Sketch showing the top left hand corner of the web starter template.

As a bonus, if you work with the Atlassian Marketplace, they’re perfect for building screenshots that really show off your product’s features.

Data suppliers

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Just kidding! But sample data does make your designs look stale and flat. Thankfully for you, we invented a fake company called Beyond Gravity that have the entire Atlassian suite installed, and we have a bunch of their data in Sketch!

A screenshot from Sketch with the Data menu open to “Atlassian Vendor Sketch Plugin > Confluence > Space Key (Personal)”. Other data options, such as “Jira” or “Confleunce > Page Title” are visible.

What’s more, we used a neural network to generate a diverse set of employees — that means you can use them, license-, royalty- and obligation-free in all your designs!

A grid of faces generated with our neural network.

Symbol palette

Have you ever thought to yourself: “I need a light standard button with an icon on the right and a loading state, with an N70 transparent background”? Neither, but apparently sifting through our 50+ Sketch libraries can be a hassle, so we invented the Symbol Palette.

A short video of the user opening the Symbol Palette, searching for a primary button, and inserting it into their document.

It’s a scrollable, searchable, visual list that gives you the info you need to discover the perfect component for the job.

Text & color styles

Switching between a design reference website is a thing of the past. With the Vendor Sketch Plugin, all of our text styles & colors are automatically in Sketch for you to use. We even have our own section in the color picker just for the ADG palette.

A screenshot of Sketch’s color palette, open to the ADG Color menu.

Whatever you want!

The Vendor Sketch Plugin is written entirely using modern JavaScript using the Sketch Plugin API. We’ve got async/await, destructuring, arrow functions, React Hooks, Webpack, Babel & Emotion. Since a lot of Ecosystem developers use these technologies every day, it’s easy to customise the plugin to your team’s needs — think adding sample data from your own product, or adding your own libraries to the Symbol Palette.

It’s completely open source, and you can find it on GitHub.

How do I use it?

We launched the Vendor Sketch Plugin at Atlas Camp 2019. In that talk, we go into a lot more detail about specific use cases and include some video demos that you might find handy.

The full video of the talk given at Atlas Camp 2019.

We also have more formal documentation on our roadmap for some point in the future. Watch this space.

Where can I find it?

Click here to download it — once it’s installed, we’ll periodically push out updates. All other information is on Github.