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.

Nils & Vince sweating the details of Confetti 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.

Adobe XD plugins are written in JavaScript so it’s easy to jump right in. With the rise of frameworks like React, Vue, and Angular, JavaScript has become the gold standard for web developers, which is why it makes sense to write Adobe XD plugins in JavaScript instead of other web-based programming languages. This also makes integrating said frameworks as easy as installing NPM packages.

Frankly, building plugins without any “direct feedback” can be a bit tough. There’s no browser, no dev tools and no “live reload.” Luckily Adobe found a solution for this problem by building a custom console inside of XD which can be toggled via the Developer menu. You’ll be able to log functions you added to the JavaScript file of the plugin and get feedback. It’s great for debugging.

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.

Objects like shapes, text, and artboards in XD can be imported via the Scenegraph, and used like regular JavaScript classes. For example, spawning a new rectangle in XD, can be done by typing 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.

Now that you know the boundaries of your object’s parent, you can start randomizing the X and Y values. This can be achieved by using the JavaScript method Math.random().

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.

Follow the Adobe Tech Blog for more developer stories and resources, and check out Adobe I/O on Twitter for the latest news and developer products.