Building a Party Plugin Inside Adobe XD with Confetti
Our guest developer post this week is Vince Schwidder, co-founder and designer at Yummygum. We invited Yummygum to our Dev Days event to help the team get started bringing Confetti to Adobe XD, the moment the plugin ecosystem launched.
— Drew Endick, Platform Partnerships Manager, Adobe Creative Cloud
If you’ve been following Yummygum for a while you know we like to contribute to the design and development community. Imagine our excitement when Adobe reached out and asked if we wanted to create something amazing together for Adobe XD.
Why Adobe XD?
Adobe XD is a tool that is awesome for a specific set of use cases like creating super quick prototypes, or extensive wireframing. For us, Adobe XD hasn’t been a daily driver yet, and one of the reasons was its limited extensibility of the platform. However, that has officially changed!
Having early access to an all new plugin ecosystem, together with the team at Adobe that provided feedback, insights, and great documentation we were able to create one of the first plugins for Adobe XD. This new ecosystem opens a lot of doors to all plugin developers, but more so to designers to improve their workflow.
Say hello to Confetti for Adobe XD
We have created plugins for other tools like Sketch in the past and naturally wanted to bring the same joy to designers that use Adobe XD. Creating a confetti pattern is something that a lot of designers these day need, and Confetti for Adobe XD is the perfect tool to make that easy. With Confetti you can spend your precious time on designing gorgeous confetti, while the plugin will generate the patterns for you, automagically. You can always tweak the pattern to your liking afterwards.
The plugin has a lot of great features like randomizing colors and offers a lot of control over your randomization factors.
Building the plugin
Building a plugin for Adobe XD was a fun challenge. After our internal kickoff we went knee deep in the excellent documentation provided by the Adobe team. From downloading a huge set of example plugins to interface components, it was all provided.
The file structure of an XD plugin is very well-documented and similar to other plugin environments: a specific
manifest.json file which contains all the metadata you want to define. Things like name, description, version, author, and icon are all set in the JSON file. Alongside the JSON file there’s a
main.js file which contains (or imports) all the logic for your plugin. If you don’t stick to this convention you will get errors and your plugin won’t work.
const rect = new Rectangle(), just like you would spawn a “regular” object.
To randomize the positioning of a newly spawned object, first you have to know two things: the right way to position it and how to randomize the values. The former can be found in the documentation: The easiest way to transform the positioning of an object is by using the
placeInParentCoordinates method from the XD plugin ecosystem. This method moves the node so the given point in its local coordinates is placed at the given point in its parent’s coordinates. The latter is a bit more complicated.
Next, you need to know the boundaries of your object’s parent. You can get those by selecting the object, and showing the properties of the parent artboard by using the
focusedArtboard property of the selection.
Finally, you can use the
placeInParentCoordinates method to randomize the positioning of your newly created rectangle.
Here is the final code:
While we were building the plugin, Adobe continued to work on new releases for Adobe XD. This meant monthly releases with new possibilities and new APIs of the platform opening up. It required some refactoring every now and then, but it’s become super stable over the last few releases.
The community of plugin developers for Adobe XD has also been amazing in terms of providing feedback, inspiration, or fixes.
Awesome, but where can I get me some Confetti?
The Confetti plugin is available now! You can find it in the Plugin Manager of the latest Adobe XD update by searching for “confetti,” or you can download a copy from the official website: Confetti for Adobe XD. Feel free to inspect the code in the plugins folder and learn from it.
We can’t wait to see your confetti (share it with us) and build more tools for Adobe XD.