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

Steve Kwak
Dec 11, 2019 · 5 min read

I hope the first article of this series, Do It Yourself XD Plugin(s) for Beginners: Part 1, helped you create your first plugin and convinced you that building a plugin for XD is, in fact, very easy.

For part two, we are going to build a utility plugin that creates a button around some text.

This series is designed for plugin developers who have a little experience with coding and who are familiar with Adobe XD and XD plugins. If you are ready to build a more complicated plugin, read Kerri Shott’s article, Spinning Up Your First Adobe XD Plugin.

Let’s take a look at the use case above: in order to create a button, the user must draw a rectangle, move it to center it around a text object, and bring the text to front. Let’s build a plugin together to automate this tedious, manual workflow.

0. Prerequisites

The only prerequisite for this article is to read the part one of this series. Part two assumes you have already completed part one and have all the necessary preparations in place. Before you start part two, let’s make sure to delete the old logic from part one. You should have a bare minimum set up like the following:

A main.js file with the following contents:

const { Rectangle, selection, Color } = require("scenegraph");function myFunction(){}module.exports = {
commands: {
myFunction
}
};

A manifest.json with the following contents:

{   
"name": "My first XD plugin",
"id": "00000000",
"version":"1.0.0",
"Description":"my first plugin for Adobe XD",
"host":{
"app":"XD",
"minVersion":"21.0"
},
"uiEntryPoints":[
{
"type":"menu",
"commandId":"myFunction"
}
]
}

Once these files are saved and ready, start writing your code inside of myFunction:

function myFunction(){
// your code is written here
}

1. Get the “textBounds”

Since the plugin needs to place the button right around the text, you need to get the x and y coordinates of the selected text node (that is to say, your button text).

The boundsInParent property of a text node gives you the width, height, x coordinate, and y coordinate of the selected text node. You can check this by logging it in the console:

const textNode = selection.items[0];
const textBounds = textNode.boundsInParent;
console.log(textBounds);
Here, the Developer Console is logging the contents of “textBounds”.

Now you have access to the selected text node’s coordinates. You can use these to place the button frame right on top of the selected text node.

2. Create a Rectangle and set the padding

Now, let’s create a rectangle button and set the width and height of the rectangle big enough to have some padding inside the button. For this example, the padding value is 30 pixels.

const padding = 30;

Because padding should be applied to all sides of the rectangle, we need to multiply padding by two. Next, we’ll add the multiplied value to the width and height of the selected text node and assign these values to the newly created rectangle’s width and height.

const shape = new Rectangle();
shape.width = textBounds.width + 2*padding;
shape.height = textBounds.height + 2*padding;

Finally, we’ll color the stroke of the rectangle blue.

shape.stroke = new Color("blue");

3. Place the Rectangle in the Artboard

Remember this from Part 1? You can use the addChild method of the selection.insertionParentto add a shape into the artboard:

selection.insertionParent.addChild(shape);

This will place a new rectangle in the top-left corner of the artboard. The top left corner of the artboard is always at coordinates (0, 0). (For more on coordinates, read this page.)

4. Place the rectangle around the text node

For our final step, place the inserted rectangle around the text node by using the placeInParentCoordinates method. This method’s first parameter is the x and y local coordinates of the shape itself and the second parameter is the destination x and y coordinates within the parent, which is an artboard.

You can set the (local) x and y coordinates as the top left corner of the rectangle, {x: 0, y: 0}. The destination parent’s coordinates can be calculated by using the boundsInParent data we gained access to in Step 1.

In order to calculate the exact destination coordinates, we have to subtract the padding amount from textBounds.x and textBounds.y accordingly.

And that’s it! Together, we’ve created a plugin that makes a perfectly padded rectangle around whatever text node we select in XD.

Things you can try from here:

  • Try creating a button over longer text, and see what happens.
  • Try changing the padding value as well.
  • Challenge: Instead of silently failing, let the user know if they haven’t selected a text node when they run the plugin.

I hope you enjoyed building this utility plugin!

A few next steps if you’re ready to move on to building your own plugin:

Also, if you have any specific topics you want us to cover in future articles in this series, please let us know via the comments or in the developer forums!


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

Adobe Tech Blog

News, updates, and thoughts related to Adobe, developers, and technology.

Thanks to Erin Finnegan and Kerri Shotts

Steve Kwak

Written by

Partner Success Engineer at Adobe

Adobe Tech Blog

News, updates, and thoughts related to Adobe, developers, and technology.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade