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="http://ift.tt/2uach9x">Design + Sketch App &mdash; Medium</a> | Greg R <img alt="" src="http://ift.tt/2tBlcDC">
You and Sketch can become best friends. Here is a list of my-personal-favourite Sketch features and tips that can make you smile every time you see a small diamond bouncing in the Dock.
Here they are — I made a 37-minute long tutorial covering all the topics:
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2F73rxh6tiWbU%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D73rxh6tiWbU&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2F73rxh6tiWbU%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="854" height="480" frameborder="0"><a href="http://ift.tt/2uaRNxs">http://ift.tt/2uaRNxs</a></iframe>
You can read the recap below.
<h3>Symbols and Overrides</h3>
Symbols are small pieces of your design that you can re-use in the project. Each copy is called an instance and each instance is being modified when you make changes in main Symbol. If you’ve ever used InDesign and recall Master Pages, you are close to the idea. You can make a Symbol out of any layer or group by simply selecting Create Symbol Button.
<img alt="" src="http://ift.tt/2tBmsXH">
Symbols are great, mostly because of OVERRIDES — changes, that can be made to each instance individually, without any harm to main Symbol. What can you override? All the Text Layers and Images that sit inside a Symbol. You can also swap one Symbol to the other and overrides will prevail if you use the same layer names across Symbols.
<img alt="" src="http://ift.tt/2uaotXy">
That’s not all! You can also use what’s called Nested Symbols — meaning, you’ll be able to swap any graphic, icon or whatever else that you will firs make a Symbol INSIDE other Symbol. How does Sketch figure out what to swap? All the Symbols that can swap has to be the same size — width and height. That’s it!
<img alt="" src="http://ift.tt/2tBy8d1">
BONUS TIP: If you lock a layer inside a Symbol it will not appear in overrides.
<h3>Turn your Design into Working Prototype</h3>
When you want your design to start moving — you have to go outside Sketch. You can use easy Rapid Prototyping Tools, such as <a href="https://marvelapp.com/">Marvel</a>. They basically give you an option to change static screens into animated transitioning screens, draw hotspots that are clickable and determine the interactions as well as some animation properties. They will also let you fix the position of eg. Top and Bottom Bar while scrolling.
Another choice is apps such as <a href="http://ift.tt/1GuheZO">Principle</a>, <a href="https://www.flinto.com/">Flinto</a> or <a href="https://atomic.io/">Atomic</a>. They give you a timeline with keyframes, states and other concepts that will let you visually create micro-interactions and more sophisticated animations. But that is not all! You also have the most advanced tools, giving you undisputable freedom in animating such as <a href="https://framer.com/">Framer</a>. They reguire coding skills (eg. CoffeScript in Framer) — no doubt worth taking a while to learn.
But let’s start with Principle 🚀. It can easily import you open Sketch document. After import, you should have all your layers and group in place. Than you can target any item to turn it into a trigger of animation. You can also easily create scrolled components and pages from groups or layers. You get some transitions and cute animations out of the box.
<img alt="" src="http://ift.tt/2tBAEQa">
<h3>Designing Responsive Layouts</h3>
While working in Sketch, you can determine each layer’s or group’s constraints — meaning, you can decide whether this layer should carry fixed size while resizing, or scale with the layout and even select a corner to pin that layer to. That way you can easily change screen dimensions and only minor fixes will let you seamlessly transition to different screen sizes.
<img alt="" src="http://ift.tt/2uafDcz">
<h3>Blazing Fast Design</h3>
Each input can contain mathematical quotations, for example if your width is 276, you can easily divide or multiply it by simply typing 276 * 4 in the input field. This idea lets you make some more advanced calculations, such as multiplying the circle size by 3,14 in to create an awesome stroke-snail-situation.
<img alt="" src="http://ift.tt/2tBgoyc">
<h3>Rapid Prototyping with Marvel</h3>
With <a href="http://ift.tt/1EUOT1v">Marvel Plugin</a>, you can easily export your design to Marvel, which lets you create clickable prototypes in a breeze. The best thing about it is that you can update the design from Sketch, and easily share your project eg. via SMS — containing the link that will emulate installing your prototype on the phone or tablet.
<img alt="" src="http://ift.tt/2tB6iNK">
<h3>Multiplying Content with Craft Plugin</h3>
Want to generate a series of rows, mockup messages, lists etc.? Fear no more, <a href="http://ift.tt/1pZWfMs">Craft Plugin</a> comes to the rescue. It lets you multiply any gropu or layer with couple of clicks. Well, that rocks!
<img alt="" src="http://ift.tt/2tBACYy">
<h3>Design Resources</h3>
Tired of generating dummy text, lorem ipsums, avatars etc.? 🤔 InVision Craft plugin is one of the must-have add-ons to your workflow. It lets you easily fill the shapes with photos, dummy text on whatever subject, names and much more!
<img alt="" src="http://ift.tt/2uaRP8y">
BONUS TIP: One of the great features of Craft is that you can actually use REAL DATA to display dynamically in your design. You can provide a link to a web service to receive app-customized data. 👌
<img alt="" src="http://ift.tt/2tBmLBB">
<h3>Auto Layout Plugin for RWD</h3>
Another game-changing Plugin comes from Anima. It lets you create Stacks — groups of layers that works like magic while resizing. Thanks to this blessing you can create fluid layouts with adjustable margins and padding of elements. This thing will turn cliets demanding a “little more padding” of those 10.000 list elements, and than “oh, it was so much better before” from voodo victims into beloved customers ❤️
<img alt="" src="http://ift.tt/2uarNlP">
<h3>Make a Website out of Sketch</h3>
No need to read it again. You can turn your simple projects into responsive websites, even containing form elements! This is another cool feature from Anima’s Plugin called <a href="http://ift.tt/2qvU9oN">Launchpad</a>. Sure, this is not for some CMS-driven 9999 pages wide dynamic portals, but simple landing pages are absolutely doable and works well.
That’s it. Hope you’ve learned something useful 😉
<img src="http://ift.tt/2uanJBM" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2tB9V6t">Sketch App Awesomeness 👌</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 App Awesomeness

Sketch App Awesomeness

Top Stories