small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

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

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

What Is the Open Web?

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

<a href="http://ift.tt/2oFK1Yk">Design + Sketch App &mdash; Medium</a> | Steve Stone 
When I was using Photoshop/Illustrator for my asset workflow I had to set up all kinds of tricks to make sure things wound up in the correct folder with the correct file name. You know the drill; The endless process of selecting the right artboards or layers to export, save dialogs, output settings, overwriting files, dragging and dropping to the correct asset folder. Ugh.
Sketch has a few tricks up it’s sleeve that makes this process ridiculously easy and consistent. You can use the layer name to specify a directory that the asset will export to? Yup! It’s hands-down one of my favorite magic tricks of Sketch!
Let’s say that you’ve made this super sweet icon.
<img alt="" src="http://ift.tt/2pg8Cqx">You’re right — that *is* a super sweet icon!
You’ve set it up to export an SVG (good job!).
<img alt="" src="http://ift.tt/2pZEBcC">Yay!
You can use the layer name to specify not only the filename (myIcon), but the output directory!
<img alt="" src="http://ift.tt/2pgj4hH">These layer names look a little funky — almost like paths…
Sketch is ridiculously smart about this too!
<ul>
<li>It will automatically overwrite your files by default.</li>
<li>If the directory doesn’t exist it will create it for you.</li>
<li>If layer name has several / then it will create all of the necessary directories that it needs.</li>
<li>It even recognizes ../ as a parent directory and will traverse up! You can even do crazy complex traversing: ../../myFolderTwoFoldersBack.</li>
</ul>
Check out this configuration:
<img alt="" src="http://ift.tt/2pZmQtE">Look where all of these assets will go on a single export.
<h3>How to Export</h3>
When it comes to exporting, select the assets you want to export and then use the File &gt; Export (⇧+⌘+E) to export only the selected assets.
<img alt="" src="http://ift.tt/2pg3By4">Yea — I want that icon in all of those places!
Hit Export. Select the path that you’d like to output to:
<img alt="" src="http://ift.tt/2pZuNzh">“Demo” — I’ll totally remember what that folder name is in 6 months…
In my case everything will be exported relative to the “Demo” directory!
<h3>Bonus trick</h3>
You can use this same trick inside the export panel! The following will export an SVG in all of those folders (like before), plus create a pngs folder and put all of those folders/files in there.
<img alt="" src="http://ift.tt/2pgd5JU">Multiple outputs with different folders.
Sketch is ridiculously cool. You can save a ton of time and frustration by setting up your structure within Sketch, then let your computer do all of the sorting for you. After-all, isn’t that what computers are for?
Let me know if you have any other cool exporting tricks with Sketch!
<img src="http://ift.tt/2pZoT14" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2pghcFF">Sketch Export Magic</a> was originally published in <a href="http://ift.tt/1OWmBEs">Design + Sketch</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Sketch Export Magic

Sketch Export Magic

Top Stories