large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<a href="https://medium.com/sketch-app-sources/i-was-also-really-slow-generating-icon-assets-for-the-dev-team-9621640a6caa?source=rss----d23119b14977---4">Design + Sketch App &mdash; Medium</a> | Oscar Oto <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*aVeLIzptmGNEUpkMxRGcEg.jpeg">
We all use the <a href="https://medium.com/design-prototype/sketch-tint-icons-using-nested-symbols-2d52867e0d29">tint hack</a> in our Sketch files. It allows us to have just one icon and then override its color in any icon instance.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*dhz24TGYESvtJUNAezVkJw.jpeg">Classic structure of an icon using the tint hack to be able to override its color
And even if it has some issues (several colors mean having several masks, and you need to keep your color palette as tint symbols) it’s a smart hack, and works quite well during the design phase.
But then the day arrives. Someone from the Dev team asks you… where can I find those icons? And exporting them is not that easy…
<blockquote>When you export icons that use the tint hack, the ‘hack’ is also exported in your SVGs, making the SVG file larger and dirtier.</blockquote>
The exported SVG will contain the ‘hack’ in its code. The more complex you make the hack in Sketch (several masks in the symbol, slices, etc), the dirtier and larger the SVG gets.
In some cases (where masks with fill set to ‘Transparent’ doesn’t work) it may even cause that your icons do have always the same solid fallback color.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*q8jiq_5o81dLY7LD2XHnjA.jpeg">Your SVG contains the ‘tint hack’. See that fill is set to White. Changing it to ‘Transparent’ will work in most cases, but not always.
We used to find ourselves adding complex slice and mask layers to make the slice avoid the mask on Export, or generating manually a “clean clone” of the icon just to export it for developers. And it takes a looooot of time. Like 2–3 minutes per icon.
So we developed a Sketch plugin to solve the problem 🙂
<h3>Icon tools</h3>
The <a href="https://github.com/oodesign/icon-tools">Icon tools plugin</a> has two commands.
<h4>Prepare icons for export</h4>
The plugin will scan your whole Sketch file looking for symbols containing a specific string in the name. By default, the string is “ExportableIcon/”, but you may change it for the one you use to identify your icon symbols in the Sketch file.
You may also choose the name of your tint layer. Layers with this name will be removed from the final exportable icons. By default, the tint layer name is “🎨 color” — if you use the Sketch Icons plugin (you should, really 🙂 ) that will be familiar to you — .
<img alt="" src="https://cdn-images-1.medium.com/max/826/1*QOnGaUCuw1XEIK6CE6Xqog.jpeg">The Prepare icons for export plugin
The plugin will process all of your icon symbols and generate a new page (called ExportIcons) with all of your icons, but just with the layers that are needed for export (without tints), and with the slices already created.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*8BpTJKDk63CkjpFJIqNIKQ.jpeg">The plugin will generate the ExportIcons page, containing all icons without the tint hack.
And that’s it! You just need to go for Export (the default Export, in Sketch), and export all your clean icons.
No more masks, no more tints, no more dirty SVG code. In a few seconds. Cool!
<h4>Clean icons (just a cool bonus)</h4>
Many icons we see (downloaded or made by our own team) contain some clutter, like layers that are not Shapes, texts, useless Groups in their structure, and so on, and we use to spend lots of time ‘cleaning’ them up.
The Clean icons plugin will scan automatically all groups/symbols in the selected page, and remove all the undesired layers for you. It will also remove useless layer groups.
You may choose if you want to remove everything but shapes, just texts, or nothing at all (in any of those, it will remove useless groups).
<img alt="" src="https://cdn-images-1.medium.com/max/828/1*0RcybhQu7TEAa8qdFKsuiA.jpeg">The Clean icons plugin
You may also choose if you want to combine all those shapes into a single shape group (which will combine them all using the Union option).
And this is it. In a matter of seconds you may have all your icons clean from clutter layers and have them ready to start working.
<ul>
<li>Pro tip: use the Clean icons before running the Sketch Icons plugin. It will save you lots and lots of time.</li>
</ul>
<h3>The plugin</h3>
You may fint the Icon tools plugin on <a href="https://github.com/oodesign/icon-tools">GitHub</a>, and soon via Sketchpacks and Runner.
<h3>Conclusions</h3>
Exporting icon assets if you use the tint hack is so time-consuming. This plugin will help you obtain clean icons from the start, and generate clean exportable assets in a breeze.
<h3>Considering a gift? 🙂</h3>
What a great plugin — <a href="https://www.paypal.me/oodesign/3">Donate 3€</a>
Wow! That really helped me! — <a href="https://www.paypal.me/oodesign/5">Donate 5€</a>
This totally saved my life! Shut up and take my money! :) — <a href="https://www.paypal.me/oodesign/10">Donate 10€</a>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=9621640a6caa" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://medium.com/sketch-app-sources/i-was-also-really-slow-generating-icon-assets-for-the-dev-team-9621640a6caa">Icon tools — A Sketch plugin for those working with icons and the tint hack</a> was originally published in <a href="https://medium.com/sketch-app-sources">Design + Sketch</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Icon tools — A Sketch plugin for those working with icons and the tint hack

Icon tools — A Sketch plugin for those working with icons and the tint hack

Top Stories