Updating Confetti for Adobe XD to a Non-Blocking User Experience

Vince Schwidder
Sep 16 · 5 min read
The new 🎉 Confetti plugin experience, now in a panel!

This week Vince Schwidder, co-founder and designer at Yummygum, returns to the Adobe Tech Blog with an update on Confetti for Adobe XD. Check out his previous post to see how Confetti got started last year.
— Drew Endick, Platform Partnerships Manager, Adobe Creative Cloud

Earlier this year the Adobe team informed us of yet another update that was in the works for third party developers of Adobe XD plugins: opening up their UI Panels for plugins. This may sound trivial, but it is actually amazing. By updating a couple batches of code we transformed the 🎉 Confetti plugin from a modal plugin to a panel plugin.

The Top Four Reasons We Updated to a Panel

If you think about it, panels are a key element of almost any software interface on your computer. Just try it, open up any (web) app and chances are high that it is using a panel on the side to offer you a structured way to use the software.

Windows Explorer, Photoshop, Glyphs and Keynote all use panels in their interface.

Here are our top four reasons why panel plugins are amazing.

1. Easier trial and error (and more playing!)

The plugin panel is particularly amazing for creatives as it allows for much faster exploration. The panel is a fixed component in your interface so you can generate confetti super fast, remove it, and re-generate it until you’re satisfied. This saves clicks and time.

Rinse and repeat to get the layout you want

2. Less obtrusive in your workflow

As panels are part of the interface by default, they do not require opening up a modal dialog — or a popup as internet users in the 90s would say — that obstructs your design and interrupts your workflow. You can keep going and see your design in context while playing with the confetti settings.

3. Consistent with Adobe XD’s UI

As we mentioned, panels use common interface patterns so it’s easier to learn and use, even for new users of Adobe XD. Many core features of Adobe XD are in a panel, and now Confetti is too. You’ll feel right at home while playing with your layers, assets or other plugins in the panel.

4. Quicker to build

A vertical panel is usually very linear and easy to follow in terms of user flow through the content. Thus, this allows you, the developer, to build faster, since you don’t need to think as much about the interface and where to put all the elements.

Transitioning From a Modal to a Panel

When Adobe shared their plans for panels plugin UI we immediately brainstormed how we could use panels for Confetti. The UI of Confetti was tailored to a modal so we had to think about how it would all fit in a vertical panel rather than a wide-orientated modal.

Confetti with a modal

With the help of the Adobe XD interface itself and some inspirational plugins that the team at Adobe provided, we knocked the new interface out of the park rather quickly! We removed the preview and the input fields, and our plugin felt more clean and organized than ever.

Confetti in a panel

Changing our plugin to a panel version meant we had to make some technical changes as well. For example, the UI had to be responsive, so it would look the way it should independently from the panel’s width. And we had to think about the newly introduced “lifecycle methods” like show(), update(), and hide(), which would change the appearance of the plugin based on changes to the main canvas and/or user input.

Building the Update

The logic behind the plugin itself didn’t really change too much. Your selected layers are still copied X * Y times, with randomly calculated values and positioning based on your applied settings, just like the previous versions of Confetti. However, the metadata did change slightly with the switch to panels.

If you’re thinking about migrating your plugin to a panel, here’s how to do it: In the manifest file you now need to specifically define your plugin type. In this case, a panel. You do so by setting the type property inside the uiEntryPoints object to panel.

{
"uiEntryPoints": [
{
"type": "panel",
"label": "Fire your function",
"panelId": "yourPanel"
}
]
}

The value of the panelID property may be any string; this will be the name of your main function in the code.

Just like before, you’ll provide a module.exports object. However, for panels, you’ll export an object of lifecycle methods for each panel in your plugin.

module.exports = {
panels: {
yourPanel: {
show,
hide
}
}
}

Another change that has to be made is the use of lifecycle methods. Lifecycle methods are functions that will be called when the “state” of a plugin changes. Show fires when the plugin needs to be shown, hide fires when the plugin is closed, update when the panel needs to be updated, etc. The show lifecycle methods is required for all panel plugins, while the hide and update methods are optional.

To learn more about the way you can create panels, read this quick start guide by Adobe: https://adobexdplatform.com/plugin-docs/tutorials/quick-start-panel/.

Resources

As with the previous versions of Confetti, the developer console in XD helped us quite a bit. Translating the functionalities to a new UI can be challenging, so having logs made things easier to test. If you haven’t seen the developer console before, open XD and click on the Plugins menu > Development > Developer Console.

Here are some other useful resources for plugin developers:

Download the panel version of Confetti for Adobe XD

We double-dare you to try out the new panel version of Confetti while creating confetti in your designs, and we’d love to hear — and see — if you think it’s an improvement too. Share some of your designs to our twitter account (@yummygum) and drop your feedback there too.

Download Confetti for Adobe XD

Adobe Tech Blog

News, updates, and thoughts related to Adobe, developers, and technology.

Thanks to Erin Finnegan and Ash Ryan Arnwine

Vince Schwidder

Written by

Co-Founder & Designer at @Yummygum

Adobe Tech Blog

News, updates, and thoughts related to Adobe, developers, and technology.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade