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.

<p><a href="https://uxdesign.cc/top-5-sketch-plugins-2017-for-ux-ui-f687fe2b62ce?source=rss----138adf9c44c---4">uxdesign.cc &ndash; User Experience Design &mdash; Medium</a> | William Deng </p>
<p>I’m a great fan of Sketch despite having used Adobe software since 2002. Initially, it was the diversity and the power of the plugins that lured me to use Sketch in my day to day tasks.</p>
<p>Being a productivity ninja that I am, I’m always on the look out for ways to boost my output and reduce inefficiencies. Over the years, I’ve experimented with at least 50 different plugins and in this short article I’ll be demonstrating the top 5 that I regularly use.</p>
<h3>5. Chromatic-sketch</h3>
<ul>
<li>What’s its main functionality and what do you use it for?<br />This plugin uses <a href="https://en.wikipedia.org/wiki/Lab_color_space">Lab Color Space</a> to create perceptually uniform gradients and color scales. I use it for quickly fixing gradients so that they look more “smooth” and it saves time optimising the colors.</li>
<li>Example of how I use it to create smoother gradients:</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/810/1*o-nMcx7dnytSmTuxpjn6wA.png"><img alt="" src="https://cdn-images-1.medium.com/max/810/1*Pg4XNUBlnHbXbP9qwpKJzw.png">Before (left) vs After (right)</p>
<p>Download: Chromatic-Sketch: <a href="https://github.com/petterheterjag/chromatic-sketch">https://github.com/petterheterjag/chromatic-sketch</a></p>
<h3>4. Sketch Measure</h3>
<ul>
<li>What’s its main functionality and what do you use it for?<br />Sketch Measure creates specs for developers. Depending on the situation and the preference of the developer, I use this plugin to manually generate specs documents or to export an interactive .html file where developers can interact with the design to view its specs.</li>
<li>Example of how I use it to create spec docs:</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/545/1*6poh9Rk7PsVIIaAZ0CPUoQ.png">Manually marking up a design to display its specs<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*YStXWitFu5MVWQcDo9vZiA.gif">Using the interactive file to inspect the design specs</p>
<p>Download Sketch Measure: <a href="https://github.com/utom/sketch-measure">https://github.com/utom/sketch-measure</a></p>
<h3>3. Find &amp; Replace</h3>
<ul>
<li>What’s its main functionality and what do you use it for?<br />Find &amp; Replace does what it says on the tin, it finds words in your whole Sketch file and replaces it with another word. You can also limit the replacing to just the layer or just the art-board. I use this plugin to quickly replace example content in my designs.</li>
<li>Example of how I use it to quickly “de-sanitise” work:</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*lmOfSk9Z16f333la9oNpiw.gif"></p>
<p>Download Find &amp; Replace: <a href="https://github.com/thierryc/Sketch-Find-And-Replace">https://github.com/thierryc/Sketch-Find-And-Replace</a></p>
<h3>2. Icon font</h3>
<ul>
<li>What’s its main functionality and what do you use it for?<br />Icon font gives you a visual way to search, select and insert icon fonts. The standard bundle comes with FontAwesome, Material Design Icons, Ion Icons, Simple Line Icons (<a href="http://twitter.com/bohn002">@bohn002</a>), Ant Design Icons. I use it to quickly add icons.</li>
<li>Example of how I use it to quickly drop icons:</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*FkImQ_9TITtbmphNr3IGAQ.gif"></p>
<p>Download Icon Font: <a href="https://github.com/keremciu/sketch-iconfont">https://github.com/keremciu/sketch-iconfont</a></p>
<h3>1. Of course it has to be Invision Craft</h3>
<ul>
<li>What’s its main functionality and what do you use it for?<br />Invision Craft is a handy tool that combines the best of several older plugins. I mainly use it to duplicate content, insert content and add photos when I need to</li>
<li>Example of how I use it to import content in bulk:</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/867/1*J3pyjy_jCxmjFbZNKq9MDg.gif"></p>
<p>And then to duplicate content:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/867/1*A-nrE7E2VGi2v4ON7BOt6g.gif"></p>
<p>And then to add photos from Getty/iStock:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/867/1*AhRfyNatWzh0Mk-HwiEtbw.gif"></p>
<p>Download Craft: <a href="https://www.invisionapp.com/craft">https://www.invisionapp.com/craft</a></p>
<h3>A word on plugins</h3>
<p>Every day there are new plugins. They bring us more flexibility and more ways to design great products. However, be wary not to go too crazy with them. In my opinion, to be truly efficient, you should value long term productivity over gimmicks that have a steep learning curve and is rarely used. Be wary of the trade off between experimenting with a new plugin to finish the task at hand vs “doing it the normal way” because you are investing your time for a potential time saving in the future.</p>
<p>So even though I’m an advocate of plugins, I would always advise other designers to think about whether the plugin fits into your workflow, does it work with your “tools” ecosystem and to optimise for flexibility rather than to get too attached to plugins.</p>
<h3>Thanks for reading!</h3>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2F50d69a%3Fas_embed%3Dtrue&amp;url=https%3A%2F%2Fupscri.be%2F50d69a%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252F50d69a%252F%253Fenpose&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/05d5fd32eda31cbd1b83287606744532/href">https://medium.com/media/05d5fd32eda31cbd1b83287606744532/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=f687fe2b62ce" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://uxdesign.cc/top-5-sketch-plugins-2017-for-ux-ui-f687fe2b62ce">Top 5 Sketch Plugins (2017) for UX + UI</a> was originally published in <a href="https://uxdesign.cc">uxdesign.cc</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Top 5 Sketch Plugins (2017) for UX + UI

Top 5 Sketch Plugins (2017) for UX + UI

Top Stories