Best Adobe XD plugins
I recently did a review of Adobe XD, what I like about Adobe XD and what I think can be further improved. In this article I share some of the best Adobe XD plugins I´ve found. Hope you find the plugins useful too!
How to install plugins in Adobe XD
1. Open Adobe XD.
2. Go to Addons, then Plugins:
3. Search for the plugin you want, then click Install:
How to manage existing and discover new Adobe XD plugins
You´ll find the plugins you have installed under the Adobe XD hamburger menu icon, and then under “Plugins” near the bottom of the menu options. Then you can click either “Discover plugins…” to find & install new plugins, or “Manage plugins…” to manage your previously installed plugins.
With that said, here are some of the plugins that I find useful.
Artboard plus
Artboard plus is a very useful Adobe XD plugin that lets you keep all your artboards nicely structured. You can rearrange artboards in a grid, sort them by name or create an artboard around a given selection.
When installed, you may find the Artboard plus plugin options under the Adobe XD menu → Plugins → Artboard plus:
An example for rearranging all artboards (no selection):
Rename it
A great Adobe XD plugin to batch layer and artboard names. This is a must have plugin in my opinion.
Once you have installed the plugin, select the layers you want, then go to the Adobe XD Menu → Plugins → Rename It → Rename selected layers. There is also a search and replace option which can be useful.
In the Rename selected layers dialog you have several options — you can either edit all the layers to have the same name, or insert some kind of variable metadata (e.g. width, height, sequence):
UI Faces
Generate avatars for your UI design without leaving Adobe XD.
Create a set of shapes that you want to fill with avatars. In this example I´ve used circles but this also works with e.g. squares:
Go to the Adobe XD menu → Plugins → UI faces:
Apply the filters you want and then click Apply Faces:
The shapes will now be filled! Very cool.
Lorem ipsum
If you don´t yet know what content you want to use in your product, you can use the Lorem ipsum generator plugin:
Note: To use this plugin you must accept to send certain analytics data to the author of this plugin. Here’s what the author of the plugin (Pablo Klaschka) mentioned that the plugin analytics is used for:
‘One thing about the analytics aspect: I’m not collecting any data regarding the user (there aren’t any user IDs or anything like that) or the document (not “even” which length the placeholder text gets). It’s only about when the plugin got used (I know that at a specific point in time, someone in the world has used the plugin, it isn’t any more specific than that) and which options were used (e.g., if you’ve used a Latin or English placeholder text). Additionally, I’ve developed a completely custom system to not make use of any third-party tool that could potentially — again — save more data about users. Therefore, one should be able to use it even with NDAs and such things (I can, of course, understand any concerns, though, since I’m cautious with such things myself). I’m currently working on making the analytics aspects open-source to make this as transparent as possible.’
To use the plugin, create or select a text area that you have defined within Adobe XD. Make sure the area is big enough to fit all the content you want (the plugin will fill the entire text area with lorem ipsum).
Go to the Adobe XD menu → Plugins → Lorem ipsum… → Quick Lorem Ipsum:
The text area will now be filled with Lorem ipsum text:
If you have a larger text area, and you use the same menu option (Quick Lorem Ipsum), the whole text area will be filled with Lorem ipsum text:
VizzyCharts
VizzyCharts is a free data visualization plugin for Adobe CC. Use it to generate charts with real data in Adobe CC. All the generated shapes can be edited directly within Adobe CC. VizzyCharts currently supports line charts, donut charts and ring charts.
You can find more information about VizzyCharts here:
How to use VizzyCharts
Go to the Hamburger menu icon → Plugins → VizzyCharts → How to use VizzyCharts…
After reading the instructions you can click the link at the end of the dialog to download a sample CSV file:
Click Download in the next screen and keep note of where you store your downloads:
Now, you can go back to VizzyCharts.
Let´s try to create a Column chart. Go to the Hamburger icon menu → Plugins → Vizzycharts → Column Chart (or use the shortcut Ctrl+Alt+C for Windows):
In the dialog, find the CSV file you downloaded before to import some sample data (click File,then locate your CSV file). Tweak colors etc if you want. Then click Create:
Now you should have your first chart using VizzyCharts! All the chart elements are editable so you can resize etc as needed, even after you have created the chart.
Sample text for Adobe XD Repeat grid
Not a plugin per se, but still very useful. Download either pre-generated content (or define your own content structure). Then download a .txt which you can drag and drop directly into a component where you use the Adobe XD repeat grid:
Airtable
If you use Airtable as a kind of database already, you can pull content from Airtable using this plugin. This can be very useful to separate content from the visual representation.
Here´s a good guide from Airtable on how to configure the Adobe XD plugin.
Adobe XD plugins — Honorable mentions
Still haven´t found the Adobe XD plugins you look for? Here are a few honorable mentions for plugins that may be useful depending on your use case:
Confetti for Adobe XD
Create cool confetti patterns in Adobe XD.
Color ranger
Change the look and feel of your app in a matter of seconds.
Icondrop
Insert stock photos, icons and illustrations into your mockups in a very seamless way.
Conclusions
The amount of Adobe XD plugins is growing steadily, and I feel Adobe XD is a very useful design tool (especially for Windows users)! In this article I´ve tried to cover as many useful Adobe XD plugins as I can. I hope you found some useful Adobe XD plugins! If you have any questions or comments, leave a comment below. Thanks for reading!
