Design + Sketch App — Medium | Greg R

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:

You can read the recap below.

Symbols and Overrides

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.

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.

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!

BONUS TIP: If you lock a layer inside a Symbol it will not appear in overrides.

Turn your Design into Working Prototype

When you want your design to start moving — you have to go outside Sketch. You can use easy Rapid Prototyping Tools, such as Marvel. 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 Principle, Flinto or Atomic. 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 Framer. 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.

Designing Responsive Layouts

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.

Blazing Fast Design

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.

Rapid Prototyping with Marvel

With Marvel Plugin, 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.

Multiplying Content with Craft Plugin

Want to generate a series of rows, mockup messages, lists etc.? Fear no more, Craft Plugin comes to the rescue. It lets you multiply any gropu or layer with couple of clicks. Well, that rocks!

Design Resources

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!

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. 👌

Auto Layout Plugin for RWD

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 ❤️

Make a Website out of Sketch

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 Launchpad. 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 😉

Sketch App Awesomeness 👌 was originally published in Design + Sketch on Medium, where people are continuing the conversation by highlighting and responding to this story.