Updating Confetti for Adobe XD to a non blocking user experience
Vince Schwidder
Written by
Published
Topics
- Design
- Dev
Originally published at Adobe Blog https://medium.com/adobetech/updating-confetti-for-adobe-xd-to-a-non-blocking-user-experience-2fe871e9be51
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.
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.
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.
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.
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.
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.
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
Thanks to Erin Finnegan and Ash Ryan Arnwine.
