TIPS & TRICKS

Small things that affect productivity in a big way

Export at Specific Pixel Dimensions

Because 1x and 2x don't always cut it.

When exporting we get nice size options do double, triple, or even half the size of the object or artboard that we are trying to export. Sometimes however, we need an object to be a specific height or width that doesn't match the way we designed it. Have no fear. Simply type the number of pixels that you would like the width or height scaled to, followed by "w" for width or "h" for height.

Sketch will automatically figure out the other dimension and export a beautiful result every time.

 

 

 

Scale Effects Using Scale

Not by dragging. Sounds silly right?

So you've got something small and you'd like for it to be larger? Giggity. If the object has effects such as a border or rounded corners, they will actually not be scaled with the object if you just drag it larger.

Now instead of having the same thing but larger, we have a very different looking object. Not good. So this time let's instead use the Scale button on the toolbar.

When you scale an object this way, you may use either desired pixel dimensions or a percentage to multiply by. The best part is written at the top of the dialogue box; "... Style attributes such as border thickness, shadow size etc will be scaled appropriately." The result will therefore be a larger version of the original.

Success! Simply a larger version with properly scaled effects, including the radius of the rounded corners.

 

 

 

Make Grid

Line them up, knock them down.

When you have a bunch of objects that are not nicely arranged, select them all and choose Arrange > Make Grid... from the Menu Bar at the top of the screen.

The Grid Tool dialogue box will appear allowing you to decide how to organize the selected objects in terms of vertical rows and horizontal columns. The margin then allows you to determine spacing between them. Lastly you may choose to make oddly shaped objects "Boxed" in order to create even spacing when objects are not very squarish.

The result is a perfectly positioned set of objects.

You may also use the Make Grid tool to replicate a single object into a grid. For example, the above grid could have been creating by starting with a single black square, then using Make Grid with exactly the same options.

 

 

 

HSB and RGB Color Picking

Different strokes for different folks.

When using the color picker, you may toggle between displaying and editing RGB (Red, Green, and Blue) values and HSB (Hue, Saturation, and Brightness) values.

Click on the letters that represent RGB or HSB to make them switch.

 

 

 

Drag and Drop Artboard Export

Email comps to clients practically instantly.

The exporting features of Sketch 3 are beyond amazing. With that comes a nifty shortcut. When selecting an artboard on the layers palette, you will be able to add an export type using the Inspector on the right hand side.

Once you've set your export options, you'll see a small thumbnail version of the image that will be exported.

Simply drag this thumbnail wherever you would like the file to go. You can drag it to the Finder,  Mail application, Messages, or wherever else you'd like it to go.

Definitely the fastest way to shoot a comp off to a client to keep them in the loop.

 

 

 

Duplicate Previous Transform

Option Drag followed by Command - D.

Copying and pasting can be a big time saver, but not if you need the same object many times at an equal distance. In this situation there is a much bigger shortcut.

When you drag an object while holding the Option Key, not only does it duplicate the object, but Sketch also remembers how you duplicated the object relative to the original object.

Now if you press Command - D, you can repeat your previous duplication over and over again to create evenly spaced duplicates very rapidly

The Complete Course is Here!
Now Available on Udemy

Finally a complete course to learn Sketch 3 from A to Z, applied to UI/UX and web design.

Redeem your coupon for 50% off below.

GET 50% OFF THE COURSE

© Copyright 2013 LearnSketch.com

Website and content created and designed by Joseph Angelo Todaro

 

Designed with Adobe Muse and Sketch 3

All content on LearnSketch.com is subject to the License Agreement

Redistribution of content on this site is strictly prohibited