Advanced Techniques - Learn Sketch

Border Options

One of the most under-utilized features of Sketch is the border options, which is hidden in a small gear icon next to border styles. But you can do really cool things with it, like replicating the Apple Watch rings.

Apple Watch Rings

To create a progress ring like Apple Watch, draw a circle of 256px with no fill, border position set to center, and 30 of thickness.

Set the border Gap to the ring size (diameter x Pi). Which means if your circle has a width and height of 256, then enter 256 x Pi into the Gap, then switch to the Dash and start to increase it with the arrow up to arrive to the number you need.

Finally to replicate the Apple Watch’s activity ring, set the Ends to curved, and flip your circle to a Vertical or Horizontal Flip. Or Rotate it with the arrow up to arrive to the exact place you need.

Custom Shapes: Radius and Points

You can create a Polygon and Star with any number of points. For the Star, you can customize the Radius as well.

Rotate Copies

I found myself using this trick a few times for creating the clock designs in the Apple Watch GUI. Using a simple shape, you can create as many copies as you want in a circular design. The size and rotation can then be customized by dragging the center point.

Option Click in Layers List

You can expand all the layers and subgroups by Option clicking the expand icon on the left of a Layer or Group.

Drag Out to Create Asset

In your Layers List, you can drag a Layer, Group or Artboard to your Desktop to instantly get a PNG 1x asset for it. If you wish to change the format of the asset, you can do so by customizing in Make Exportable.

Round to Nearest Pixel Edge

Whenever possible, it’s important to avoid decimals in the X, Y, Width, Height numbers in the Inspector. Those decimals could be the reason why your assets are not as sharp as they should be. Use Round to Nearest Pixel Edge to fit your shapes in the Pixels Grid.

Note: Round to Nearest Pixel Edge may destroy the integrity of your icon, so be ready to make adjustments afterwards, or manually fix the shape instead. Make sure to have Pixel Fitting enabled in your Preferences.

Multiple Duplicate

When you start duplicating using Option + Drag, the next time you press Command + D, it’ll duplicate at exactly the same distance over and over.

To Front, To Back

When you press Alt and have the Forward / Backward options in your Toolbar, it’ll change to To Front / To Back. This allows you to quickly make layers jump to the back or front of the document.

Alpha Masking

Your Mask needs to have a gradient with alpha properties first. Any color will do. Then, do Use as Mask and Sketch will automatically switch to Alpha Masking.

Keep an eye on what you’re masking because you may be scratching your head as to why some elements are hidden. Group layers to isolate Masks.

Text Gradient

You must first convert your text to outlines before being able to apply a Gradient, just like any shape. This is particularly useful for creating a logotype.

Rounded Corners Editing

You can be specific about which Point of your shape that you want rounded. Additionally, you can write numbers like this to target the corners (e.g., 100;0;100;100).

Copy CSS Attributes

This feature is useful for getting the color codes, border-radius, and gradient properties. Since Sketch works with the same styling properties as CSS (Fills, Borders and Shadows), any shape with these options can be transformed into CSS code.

Convert to Outlines

The Border is a property available to any shape. When you resize them, they keep the same thickness and position (center, inside, outside). With Convert to Outlines, you can convert those outlines into vectors that can be scalable. The resulting vector will be composed of multiple shapes combined.

Layout Grids

Sketch has a fantastic Grid feature. You can create virtually any grid you want such as the 960 Grid. Since grids are most efficient with big canvases, they work best with Web design. Start by creating a new Desktop Artboard. Then go to Layout Settings and customize your grid. With the grid, you can easily set 1, 2, 3 or 4-column layouts.

Text on Path

You can create interesting effects with Text on Path. It's great for playful logotypes and perspectives. By simply creating a Path or any shape and by setting the subsequent text Layer to Type / Text on Path, the text will magically follow the shape of the path. It’s a bit tricky to use, so make sure to drag around your text layer to find the sweet spot.

Emoji & Symbols

Emojis are increasingly popular thanks to iOS and messaging apps. It is not uncommon to use them in demos and presentation screens. “Emojis & Symbols” (Ctrl Cmd Space) not only allows you to insert emojis but also all the other useful symbols. Note that this feature works across all Mac apps.

Open Recent files

If you long press the Sketch app icon on your Mac's dock, you get a list of the recent files you've opened.

Flatten to Bitmap

The more Layers, Symbols, Blurred backgrounds you have, the slower Sketch may get. Transforming them to Bitmap can help performance greatly. With Bitmaps, you have the flexibility to use as a Fill background.

Make Grid

When I discovered this method, it really affected the way I worked. Make Grid makes it easy to duplicate anything, for any amount of copies in a grid style. You can set the spacing between the elements or have them enclosed in boxes before duplicating. This is specifically useful for handling List (Table View) and Grid (Collection View) interfaces, or simply rearrange layers in an orderly fashion. Make Grid also works on Artboards.

Expand and Collapse

As you work with hundreds of layers and nested groups, you’ll want to be able to find your layers quickly. Alt Click Expand Arrow to expand and collapse all Artboards and groups.

Set Layer as Default Style

When you create a Layer, it has by default a gray color with a gray border, maybe for a project it will be more handy to have already set up an specific color when you create a new layer. Fortunately Sketch gives you that option. Create a new layer and give it the Color of the Fill or the Border as you will like, then select that Layer and go to Layer>Style>Set as Default Style, once you will do that, you will see that the next new layer you will create will have those new properties.

Bezier Curves

When you select a vector point, you can easily change to any mode of the Bezier Curves just hitting 1, 2, 3 or 4 number key. It will swap between straight, mirrored, disconnected, and asymmetric.

BACK TO

Styleguide and Handoff

Download source files

Download the videos and assets to refer and learn offline without interuption.

Design template

Source code for all sections

Video files, ePub and subtitles

Videos

ePub

Assets

Subtitles

Learn Sketch

Introduction to Sketch Basic Tools