Hey everyone, I wanted to share a project that I’ve been working on the last couple of days.
While I was creating my first UXP plugins, I got a little bit annoyed by all the different icon variations I had to create for each of them So I wanted to build a tool for us developers that can simply generate all the icons in the required sizes. In the process of building it I thought that it would be nice to make it usable for other scenarios too, so I added some more settings and customizability.
Here’s a quick demonstration of Icon Board:
When your icon is a on a shape layer, the plugin can show a realistic preview of the exact icon, otherwise it will show the preview with a star, just as reference. The panel has two ways of displaying the real size of the icons before generating them:
In addition to that you can tweak more settings, such as color, background (rectangle, circle, any-sided polygon), or padding for the icon, while setting values in any unit (px,cm,in,%,…).
To make file naming easier during the export, you can also assign dynamic names to the later generated artboards, using the variables ${i} (index), ${size}, ${width}, ${height}, ${presetName} and ${layerName}.
That’s it! You can grab it for free on the marketplace, hopefully it will save some time for some of you.
Let me know if you have any questions, feedback or ideas for the plugin
Thanks! Interesting idea, the plugin can’t do that yet. I usually always have the same file names for the icons, so the manifest pretty much stays the same. If I’d generate the relevant lines with the filenames specified in the plugin, the user would still have to adjust it to the correct path, wouldn’t he? Not sure about how helpful this would be then, as the manifest editing is quite straight-forward (or like in case, it always stays the same).
Maybe you are right I will see once I will make more plugins.
or… you could point panel into target manifest.json file + also point panel into icon output folder. Once you click button it would rewrite manifest + save icons into folder You could even guess output folder if you can find something useable in manifest.
That would be optimization to the very end I actually didn’t implement any export myself, as I didn’t really want to mess with UXP+file saving (some things might still need to be added or improved) and the Artboards-To-Files script already exists. It will be opened when you click the most left icon in the button bar at the bottom, so you can then specify the destination, export settings and so on.
So I tried that for my new plugin and it works good. Anyway, my color icon requires some manual tweaks in order to become black and white so it wasn’t the easiest use case but at least I do get all boards with proper sizes and names so I can easily export. What bothers me was smart objects. Those did not have the proper size and as I said I had to modify each icon so I had to unsmart them… But overall it is good
Thanks for the feedback!
What’s the layer setup for your icon? Anything other than a single shape or smart object layer should be converted to a smart object automatically for easier processing. (e.g multiple layers, groups, etc).
The coloring should either be done via solidfill (on shape layer) or a color fill layer style (on everything else). Did that part not work?
So I wanted to build a tool for us developers that can simply generate all the icons in the required sizes. In the process of building it I thought that it would be nice to make it usable for other scenarios too, so I added some more settings and customizability.
