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:
- 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.
Before you start, make sure to update XD in the Creative Cloud app on your desktop:
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
You can find the
develop folder in the
Show Develop Folder menu. This will open the
develop folder, where your plugin must be saved.
2. Open your folder in your favorite text editor
Text editors are handy when writing code. If you are using VSCode, simply drag and drop your plugin’s folder onto the text editor icon. (You could just use TextEdit or Notepad, but if you want to learn to code, you’ll want to try an editor like VSCode or Sublime Text.)
XD requires two files at minimum:
manifest.json is a JSON file where we write some facts to describe our plugin like its
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
XD requires you to “describe” your plugin in a JSON formatted file. It’s OK if you’ve never used (or heard of!) JSON before. This is a short file, and it’s the only time you’re required to use JSON in your plugin.
Simply copy the code above and paste it into your
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
5. Write your main code
Let’s start writing the main code for your plugin:
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
Then, we’re creating a new rectangle:
Next, we are giving the
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
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
commandId in your
manifest.json file? We will "export" our
myFunction to the
Again, the name of the function you are exporting,
myFunction, should match the
commandId in your
manifest.json file. Now your
main.js when we run the plugin.
7. Save changes and reload the plugins
Be sure to save both the
main.js file and the
manifest.json file in your text editor, then reload the plugins in XD. This leads to the final step...
8. 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.
If you went to run your plugin, and couldn’t find it in the plugin menu, or you ran it and nothing happened, let us know in the forums! Beginners are always welcome.
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.
Here are some example plugins that other people have built:
UnDraw is a plugin that lets you import design assets into XD.
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.
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.