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

“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 Developer Console) are different.

Plugin package icons (.XDX file):

• Must be listed in your plugin’s manifest.xml file
• Are displayed in XD’s Plugins Panel
• PNG and JPG formats are supported (the max file size for each icon is 1MB)
• Two sizes are required: 24 x 24 px and 48 x 48 px

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:

“Plugin Design Guidelines — Share” artboard screenshot

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.

Screenshot of “Plugin Icon Master Component” layer selected.

Screenshot of Master Component being edited

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.

New plugin icon placed into the master component and resized to the different icon sizes, after turning off responsive resize.

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

Screenshot of icons exported

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.