Sketch Tips for Beginners
WRITTEN BY
TIFFANY HANCOCK POSTED ON 20 Nov 2018
CATEGORIES

Create an efficient workflow with these Sketch tips and tricks

With the wealth of Sketch plugins, tips and tricks that can be found online, if you’re a web designer who’s new to Sketch it can be hard to tell which ones will actually be of use and which will fall by the wayside.

Having used Sketch for a while now on a number of web design projects I’ve found that there are a few I regularly use that make my job a little easier. The seasoned Sketch user will probably be familiar with what I’ve listed below, but if you’re relatively new to Sketch you might find these handy and might find yourself integrating them in to your workflow.

Symbols for buttons

Using symbols in Sketch, some clever folks have come up with methods of using nested symbols to create buttons that are highly customisable all from within a single symbol. For a button, simply place the symbol within your design, and in the overrides panel to the right you can change the text colour and style (or replace the text with an icon), background colour, state (disabled, hover and so on), and whether you’d like the button to have square corners or rounded corners.

To download the Sketch template that will get you started, click here

And to read a bit more about how it works, click here:

Sketch for Beginners - Override Panel
Clicking on the button symbol brings up the overrides panel on the right

Sketch for Beginners - Button examples
Examples of the same button symbol with different override settings

You could even use this button template as a base to create a version for fields. Create different states for default, disabled or error fields, and create text styles for default or placeholder text to go within the form. Align the text to the left and you’ve got yourself a field symbol. You could then add to it by creating a series of icons to sit to the right within the field, such as a calendar icon for a date picker, a clock icon for a time picker and a dropdown icon.

Make sure all these symbols have the same artboard size, then place one within your main field symbol on the right-hand side. Now when you placed your field symbol within your design you’ll be able to change the icon, text and state all from within the overrides panel.

Sketch for Beginners - Overrides Panel
Clicking on the field symbol brings up the overrides panel on the right

Sketch for Beginners - Field Examples
Examples of the same field symbol with different override settings

Setting up buttons and fields as nested symbols in this way will save you a lot of time if the client decides they’d like to change the colour of the buttons from blue to green, or change them all from square corners to rounded corners. Simply make the change within the symbol once and it will be reflected throughout your designs.

Designing forms also becomes quicker as I can easily change a field from a text field to a dropdown or a date picker simply by making a change in the overrides panel.

When starting a new project one of the first things I will do is go in and set up which colours and which fonts I’d like to use for the buttons and fields, and change their heights if necessary.

Text styles

It’s also a good idea when starting on a new project to set up your text styles from the get go so your headings, paragraphs and so on remain consistent. I start with a template document consisting of a H1, H2, H3 and so on, change the fonts, sizing and colours as need be, then update each text style. That way if I’m working on a design and want to insert a H2 I just need to add a text element, then select H2 from the text styles dropdown. No need to go hunting down what font size or font weight that heading is supposed to be. 
Sketch for Beginners - Typography
Set up a list of text styles you will need in your project

Sketch for Beginners - Text Styles
Make a text style for each

To get further in depth with setting up text styles, check out this article:

Text Style Mastery with Sketch 52

Auto-layout by Anima

The Auto-layout plugin by Anima is a handy tool that I’ve found useful for when I’m resizing artboards. Clicking on an element, you can pin it to any of the edges of your artboard. I mostly find myself using this to pin the footer of a site to the bottom of the artboard, so when I’m working on a page and need to make it longer or shorter, I can drag the bottom edge of the artboard up and down and the footer will follow.

To do so, simply create a group containing all your footer elements, go to the Auto-layout tab of the Anima section in the right hand panel (shown below) and click the bottom circle next to where it says ‘Pin’.


Sketch for Beginners - Pin to Bottom


Invision and the Craft plugin

If you plan to share your designs with others in a way that they can view them in the browser, and allow developers to check things like font sizes, colours and more, Invision is an excellent option. Using the craft plugin by Invision, you can sync your designs directly from Sketch. Simply create a project in Invision first, select which artboards you’d like to add then click sync from Sketch.

Using Invision, people that you share your project with will be able to view your designs within their browser. Using Inspect mode, developers will be able to click on elements within your design and see the CSS, so they’ll be able to check font sizes, weight, colours and much more, making hand off much easier.

Sketch for Beginners - Inspect Mode
Use inspect mode to view the sizes of elements and the distances between them, as well as the typeface being used, the text size, colour and more.

Interactive Prototyping

Another key benefit of using Invision and the Craft plugin within Sketch is interactive prototyping. Within Sketch you can determine that clicking a certain button will take the user to a certain artboard, which will be carried over to Invision when you sync. Someone viewing the Invision project will see hotspots throughout your designs that they can click to navigate the prototype, taking them on a journey. The value of prototyping can be huge on a project and Invision along with the craft plugin offer a relatively easy way to go about it.

Sketch for Beginners - Prototyping
Linking from one artboard to another in Sketch

Check out the Craft plugin site to see more about how it works:

Invisionapp.com/craft

Animations

The clever people over at Anima have also created a plugin called Timeline that allows users to create animations and interaction designs directly in Sketch, then export them as gifs, videos or code. While I’ve only scratched the surface with what this plugin can do, so far I’ve been able to create simple animations showing the features of a product, as well as create animations to show interactions such as clicking on a hamburger menu.

The plugin requires a subscription if you’d like to export your animations, however the free version would still be handy if your aim is simply to show a developer how you’d like an animation or interaction to look.

Find out more about Timeline by Anima

animaapp.com
Animation created in Sketch
An example of an animation created in Sketch using the Timeline plugin

For those starting out designing websites and apps in Sketch, these tips, tricks and plugins will start you on the course to developing an efficient workflow that you’ll be able to add to and refine over time.

Find more Sketch plugins:
sketchapp.com/extensions/plugins/

Tiffany Hancock-Senior Graphic Designer-Speedwell Tiffany Hancock, Senior Graphic Designer, Speedwell

CATEGORIES
Creative

Ready to advance your digital capabilities?

CONTACT US

X

By continuing to use our site, you indicate your acceptance
of our Privacy Policy and Website Access Rules.

Confirm