Do It Yourself XD Plugin(s) for Beginners: Part 1

Steve Kwak
Jul 24, 2019 · 6 min read
Image for post
Image for post

Have you been working with Adobe XD and seen some of the awesome plugins? Do you have an idea for a plugin, but you only know one or two lines of JavaScript? If so, you’ve come to the right place! I’m going to walk you through how to build your first Adobe XD plugin.

Let’s be honest, it’s intimidating to hear someone say, “Let’s build a plugin!” Building a plugin is, in fact, programming software. But even people with little programming background can easily build an XD plugin and learn to code at the same time. Here are a few more reasons to get started:

  • Adobe XD plugins are written in the most popular web programming language, JavaScript.
  • You can also use HTML and CSS to create the plugin’s UI.
  • Adobe XD has become a popular tool in the UX and screen design space.
  • Adobe XD plugins can be very powerful; Make your plugin do all the manual, repetitive work!
  • Adobe XD has a built-in plugin manager you can upload your plugin to, (just in case you want to share your plugin with others).

To be clear, part one is not an advanced guide to writing plugins. This article is geared towards people with a limited coding background (or no coding background). If you are already a developer, please read Kerri Shott’s article, Spinning Up Your First Adobe XD Plugin.

0. Prerequisites

Image for post
Image for post

Or download XD for free if you haven’t already.

I will walk you through how to write your first plugin step-by-step. If you want the code that’s already finished and written for you, you can download the starter project on Adobe Developer Console by creating a new project.

Let’s get started.

1. Open the “develop” folder and create your plugin folder

Image for post
Image for post
Where (and how) to find XD’s “develop” folder.

2. Open your folder in your favorite text editor

Image for post
Image for post
Opening a folder in VSCode.

XD requires two files at minimum:

my-first-plugin
├── main.js
└── manifest.json
Image for post
Image for post
How to make new files in VSCode.

main.js is a JavaScript file where the plugin code lives, and manifest.json is a JSON file where we write some facts to describe our plugin like its name, id, and a few other details we'll come back to later. Note that these two files must be named exactly this way.

4. “Describe” your plugin in manifest.json

Simply copy the code above and paste it into your manifest.json file.

The commandId ( myFunction) must match the name of the function exported from your main.js file. I will cover this in the next step.

Let’s start coding in the main.js file.

5. Write your main code

Let’s try to read out loud what these six lines of code do. The first line is telling XD we are going to use the Rectangle object and user's selection (whatever the user has selected in the document) as well as the Color module by requiring them from the scenegraph API:

Then, we’re creating a new rectangle:

Next, we are giving the width and height to the newly created rectangle and coloring it red:

After that, we insert the new rectangle into user’s selection:

We are telling XD to insert our new, 100x50, red rectangle into the document, as a Child of whatever the user happens to have selected at the time (the selection is the Parent).

Now, we have to wrap your logic in a function like this:

The next step is to export this function. Remember the manifest.json file? This is where it becomes important.

6. “Export” your main function

Again, the name of the function you are exporting, myFunction, should match the commandId in your manifest.json file. Now your manifest.json file will know that our JavaScript code exists in main.js when we run the plugin.

Image for post
Image for post
Your function name needs to match your commandID or the plugin won’t run!

7. Save changes and reload the plugins

Image for post
Image for post
How to reload the plugins after you make changes.

8. Run your plugin!

Image for post
Image for post
Finally, run your plugin!

You’ve coded your first Adobe XD plugin! The completed code sample of this can be found on our XD Plugin Samples repository.

Next, try changing the color of the rectangle, making it bigger, or changing the name of your command in the menu. Don’t forget to save your files and reload the plugins after each change.

Troubleshooting

If you’d like to try to troubleshoot on your own, you can download the starter project on Adobe Console by creating a new project. (The starter project is very similar to the code above.) You’ll need to name your project in order to see the starter project download link.

Inspiration

Image for post
Image for post

UnDraw is a plugin that lets you import design assets into XD.

Image for post
Image for post

Angle is a plugin that makes it easy to mock-up screen designs.

Granted, these are some of the more complicated plugins available in the Plugin Manager. I will write multiple follow-up articles in this series to get you there slowly.

While you wait for the next installment, here are some next steps for you: Check out our 40+ sample plugins Read the API documentation Join our XD plugin development community

Also, if you have any specific topics you want me to cover in the following articles in this series, please let me know via the comments or talk to me on the forum!

For more stories like this, subscribe to our Creative Cloud Developer Newsletter.

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