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.

Published on <a href="https://blog.prototypr.io/5-best-sketch-plugins-for-ux-ui-designers-in-2018-f03d7b38f7b0?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> linda <img alt="" src="https://cdn-images-1.medium.com/max/980/1*ZD9Ftuc5s9T6Q7oGiGcsXA.jpeg">
<a href="https://www.mockplus.com/blog/post/prototyping-with-sketch/?r=linda">In the previous article</a>, we have introduced the basic tutorials and resources of Sketch. Besides the basic feature of vector design, plugins are unique Cheats that make Sketch powerful. I summarized the five best Sketch plugins for you. Now have fun with Sketch!
<h3>1. Marketch</h3>
After finishing mockups, we often need to tell the front-end developers, the concrete size of pictures, the text size and spacing, Marketch will make you full of surprises.
Marketch is a Sketch 3 plug-in for automatically generating HTML page that can measure and get CSS styles on it, enabling super practical features such as dynamic annotation, unit conversion, and dynamic slicing.
It can help designers not only to reduce the burden, but also to check the layout parameters of all the elements, even the CSS code. In addition, this plugin can generate HTML locally and you don’t have to worry about security and privacy issues.
<img alt="" src="https://cdn-images-1.medium.com/max/902/0*eTa9seRV9o8Md2Ya.png">
Download: <a href="https://github.com/tudou527/marketch">https://github.com/tudou527/marketch</a>
<h3>Tutorial:</h3>
Step 1: Run marketch -&gt; Export as Zip File
<img alt="" src="https://cdn-images-1.medium.com/max/902/0*ZSfQTcYoQZ2DlfQU.png">
Step 2: Name and export it.
<img alt="" src="https://cdn-images-1.medium.com/max/903/0*VqXXp5mLHRnxM_Zw.png">
Step 3: Unzip the zip and run the Html file to check the effect in the browser
Demo: <a href="http://tudou527.github.io/marketch/">http://tudou527.github.io/marketch/</a>
<h3>2. Mockplus</h3>
It is well known that Sketch is a vector design software. If we want to continue to make interaction design and team collaboration, it is recommended to install the Mockplus plugin in Sketch. Once you completed design in Sketch, you can export it as an MP file and make Sketch prototyping in Mockplus, which allows designers collaborating and adding annotate with team members.
<img alt="" src="https://cdn-images-1.medium.com/max/802/0*i3rJrioARuWsEzwG.png">
Download: <a href="https://www.mockplus.com/download/?r=linda">https://www.mockplus.com/download</a>
<h3>Tutorial:</h3>
Step 1: Download free Sketch plugin. Decompress the zip file and double-click .sketchplugin file in it.
<img alt="" src="https://cdn-images-1.medium.com/max/802/0*6DTd3_vd0YRc-LPj.jpg">
Step 2: When finished your design, select “Plugins” — “Mockplus” — “Export project files”.
<img alt="" src="https://cdn-images-1.medium.com/max/856/0*en9yJoOSUTyiTTil.png">
Step 3: Adjust the settings of your project on the following interface to select the Artboards you need. Besides, you can choose the type of project and the size of the exported image. After adjusting these settings, click “Export” to export content from Sketch.
<img alt="" src="https://cdn-images-1.medium.com/max/802/0*5t6s5VLwGqQHXJap.png">
<h3>3. Content Generator Sketch Plugin</h3>
When we design some pages we may need to fill the data to improve the fidelity. The most common is to fill a variety of different avatars which are best to be different with each other. Don’t worry, this plugin will be able to quickly achieve this effect. You just need to select all the needed elements, it will randomly select and fill the right Avatar.
<img alt="" src="https://cdn-images-1.medium.com/max/534/0*Jt8MlZY605A7raE0.gif">
Besides the image, the plugin can also randomly generate user name, mailbox and phone number. That could greatly improve efficiency to make the contact list.
<img alt="" src="https://cdn-images-1.medium.com/max/409/0*O6IUMAbKzNd5fV8x.gif">
Download: <a href="https://github.com/timuric/Content-generator-sketch-plugin">https://github.com/timuric/Content-generator-sketc&#8230;</a>
It is worth mentioning that this kind of data fills can also be implemented by the repeater in Mockplus.
<img alt="" src="https://cdn-images-1.medium.com/max/560/0*uGCVUYpwPp47oyRC.gif">
If there are some image components, it will automatically fill the image components in the grids with these pictures. So you don’t have to find other materials. These pictures have many types, such as placeholder image, avatar, character portraits, design, business, etc. If there are some texts, you can set “auto-fill type” of it, such as “date”. Then, the text will become a random date in all grids.
<img alt="" src="https://cdn-images-1.medium.com/max/900/0*rbtjxrQ2ngcAB22C.png">
<h3>4. Rename it</h3>
During the design, we often need to modify the graphics name in batches. The names are preferable to reflect the layer properties and parameters, you can quickly and easily find the desired layer. Rename it will be your great assistant.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*6N-6io-RqFQbAo_G.gif">
Download: <a href="https://github.com/rodi01/RenameIt">https://github.com/rodi01/RenameIt</a>
<h3>Tutorial:</h3>
Step 1: Select the elements need to be named in batches
Step 2: Select Plugins&gt; Rename it, naming the rules in the Pop-up window. The data % W% H are variables, and they will be automatically filled according to the image size. What we only need to do is only set the rules and click OK.
Video:
1) Extend the layer name: Enter “+” and the text you want to add. (e.g: + button)
2) Name the layer order: Enter “% N” to name the layer order with number suffix. “% N” is the number with the reverse order. (e.g item% N)
3) Retain and move the original layer name: Enter a new layer name, use the “*” instead the original layer name. (e.g big * button)
4) Add the length and width of the layer: Enter “% W” and “% H” to add the length and width of the layer. (e.g rectangle% w or rectangle% w x% h)
<h3>5. IconFlower</h3>
This plugin is very suitable for making the popular multi-icon background, you do not have to mechanically drag the icon one by one to the different parts of the canvas, but only need to put all the materials on a canvas, select all and click IconFlower, it can automatically arrange all your icon.
<img alt="" src="https://cdn-images-1.medium.com/max/600/0*WVkX6Tcr8tfFdu2K.gif">
Download: <a href="https://github.com/avadhbsd/IconFlower">https://github.com/avadhbsd/IconFlower</a>
<h3>Tutorial:</h3>
Step 1: Install the IconFlower plugin in Sketch.
Step 2: Create an Artboard, and place loads of icons/objects/layers on the artboard. You can use Iconjar to drag the layers, the more the better.
Step 3: Select all icons/objects/layers you want to arrange.
Step 4: Run the plugin.
<h3>Conclusion:</h3>
The above are the 5 best Sketch plugins I recommend for everyone. Armed with these powerful Sketch plugins, I believe you can perform better on design. Of course, if you have a better recommendation, please leave a comment in the comments.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=f03d7b38f7b0" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/5-best-sketch-plugins-for-ux-ui-designers-in-2018-f03d7b38f7b0">5 Best Sketch Plugins for UX/UI Designers in 2018</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

5 Best Sketch Plugins for UX/UI Designers in 2018

5 Best Sketch Plugins for UX/UI Designers in 2018

Top Stories