Adobe XD review

Listen to this post
Voiced by Amazon Polly

We are beginning another season of web design and development competitions. In fact, I will be helping with the Illinois state web contest on April 12. Of course, this gets me thinking of the overall process of web design and tools which can help. Given that we have a central Illinois Web Professionals meeting on April 9, I thought this might be a good time to review the Adobe XD tool (which is a part of the Creative Cloud). I previously reviewed the fundamentals of using this tool some time ago. A lot has changed since 2016.

Using plugins

Perhaps the biggest enhancement is that there now exist many plugins (and you can create your own). Within the XD tool menu, one selects Plugins > Discover Plugins… You will see a screen like the following:

Adobe XD screen capture deppicting some of the many plugins available.
Some of the available plugins for Adobe XD

Personally, I find some like “Web Export” and “This person does not exist” to be highly useful. Let’s take a look a the latter plugin a bit. I can create a low fidelity wireframe with a text box and a circle placeholder for an image easily in XD. In this case, I simply draw the appropriate shapes.

A circle and rectangle drawn in Adobe XD
Simple shapes

I could repeat this shape as needed. I can also use the plugin to include a photo of a “random” person. I first need to select the shape(s) and then choose Plugins > This Person Does Not Exist. After a moment, the plugin populates the shape with a photo of a random person (as shown below).

Plugin has populated the circle shape with the photo of a random individual.
Plugin has populated the shape with a random photo

Writing your own plugin

Adobe also provides a set of tutorials so you can write your own plugins for XD. You do need a little JavaScript knowledge (and an account on the Adobe I/O Developer Console. You create two files (a manifest.json which describes the plugin, and a main.js which contains the actual code). These need to be placed within the Developer area in the XD application. You need to have a separate folder for each plugin you create. Following the tutorial, here is the location of the appropriate files on my Mac.

Location where files need to be stored for your own plugin
Plugin location

The contents of each file are shown below. First, let’s examine the manifest.json file.

Screen capture of manifest.json file contents
manifest.json contents

The ID you provide is what is generated in the I/O Console when you indicate you want to create a new plugin for XD. The rest of the code is rather self-explanatory.

The main.js file contains the actual code (in this case to create a red rectangle at a specific location in the XD art board. That code is shown below.

main.js JavaScipt code
Contents of main.js file

XD contains a scenegraph module which you need to reference with a require statement. You can then specify the details (in this case, simple code to draw a red rectangle at a specific location on the artboard. The quick start tutorial provides much additional information about each of these lines of code (and I will explain more at our meeting).

To invoke the plugin, you simply select it from the menu. You may need to reload the plugins in the Development section. I named my plugin Create Rectangle (I know, how creative). There is also a console you can examine in the event there is an error in the code.

XD plugins menu also showing the Development menu. You may need to reload the plugins to see your changes.
XD plugins menu

I will show this plugin in action during the presentation on April 9.

XD Web Export

You can also export the results of your XD document as a web page. I provide a simple example. I encourage you to view the source code after you follow the link. You will see a lot of machine generated code (and most of the objects are drawn as SVG objects. You can also export your work as a PDF file or make a video. I will demonstrate these options during the meeting as well.

Final thoughts

There have been a number of improvements to Adobe XD over the past few years. The ability to write your own plugins (to solve your business specific repetitive tasks) and to use plugins developed by others is a real plus. I am curious as to your experiences using this tool. I look forward to your comments.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Social media & sharing icons powered by UltimatelySocial