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

Vince Schwidder
Sep 16, 2019 · 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

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!)

Rinse and repeat to get the layout you want

2. Less obtrusive in your workflow

3. Consistent with Adobe XD’s UI

4. Quicker to build

Transitioning From a Modal to a Panel

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

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

Here are some other useful resources for plugin developers:

Download the panel version of Confetti for Adobe XD

Download Confetti for Adobe XD

Adobe Tech Blog

News, updates, and thoughts related to Adobe, developers…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store