New Design Templates for Adobe XD Plugins to Help You Instantly Generate Icons

Daniela Caicedo
Jan 9 · 3 min read

“This week Daniela Caicedo, an Experience Designer on the Extensibility team, returns, with a new addition to her UI Kits and UX Guidelines sticker sheet; a template that helps you generate icons for your XD plugin.”

— Erin Finnegan, Community Engineer, Creative Cloud

This article is for XD plugin developers and/or designers who are ready to start distributing an Adobe XD plugin in the Plugin Manager. If this applies to you, in order to be approved by the Integrations Review team, you’re going to need to create an icon in several different sizes and submit at least one screenshot.

At the time of this writing, the icon size requirements for your plugin package (your .XDX file) and your plugin listing (the information you submit to the Adobe I/O Console) are different.

Plugin package icons (.XDX file):

XD Plugin Manager listing icons:

  • Will be used for display in your Plugin Manager listing
  • PNG and JPG formats are supported (max file size for each icon is 1MB)
  • Three sizes are required: 48 x 48 px, 96 x 96 px, and 192 x 192 px

In order to simplify this process, we’ve created a template to help you generate icons from within Adobe XD. By updating one icon you can quickly generate all the icon sizes you need. Read on for details!

Using the icon template

  1. First, download our updated Sticker Sheet. (We presume you have Adobe XD installed and can open an .xd file.) Next, zoom in on the “Plugin Design Guidelines — Share” artboard:

2. To get started with the icon template simply select the “Plugin Icon Master Component” in the XD file by double clicking on it. In the layers panel you’ll see the “Icon example”, feel free to delete this.

3. Paste your icon into the “Plugin Icon Master Component” and center align it with the “Master Component Background”.

For our example, we’ll be placing in this paperclip icon:

paperclip icon example

4. Select your icon and turn off “Responsive resize”. The icon should resize to all the different icon sizes.

5. Select the five sizes and export. Select “Design” in the export window.

And that’s it! You should now have all the icon sizes you need to submit your plugin to the Plugin Manager. If you still have questions or need a little more help, be sure to ask us in our XD plugin developer forums.

By the way, if you need to generate icons for even more use cases, also check out the XD plugin “App Icon Generator” from prolific plugin developer Paolo Biagini.

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.

Daniela Caicedo

Written by

Experience Designer 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