Close More (Vert) Close

Hey! I have been using Sketch for ZingChart to do a little design & prototyping to improve UX & UI. So far, I have really enjoyed using it.

I have acquired so many of my own useful tips & tricks, I thought we should pass on the advice to our readers. Let's jump right in.

Important Keyboard Shortcuts 🔥

  1. Shift key + Mouse Drag (While Creating Shapes) = Proportional Shapes

  2. Space bar + Mouse Drag = Panning

  3. Option key + Mouse Drag = Duplicate

  4. Command + D = Duplicate

  5. Shift + Arrow Key (While Shape A Is Selected) = 10px Shift In Arrow Direction

  6. Option + Command + C = Copy

  7. Option + Command + V = Paste

  8. Command + 2 (While A Shape Is Selected) = Zoom To Center Of Shape

  9. Command + 1 = Zoom Out To Entire Artboard Or Frame

  10. Command + Arrow Key (While A Shape Is Selected) = 10px Size Up Shape In Arrow Direction

  11. Command + G (While Multiple Shapes Are Selected) = Group Shapes

  12. Sketch Shapes Keyboard Shortcuts:

  • R = Rectangle
  • O = Oval
  • L = Line
  • U = Rounded Rectangle
  • T = Text
  • A = Artboard

"Hidden Features" 🙈

  1. Border radius can be changed to hold different values across individual edges, as opposed to just one value across the entire shape. Just use this type of notation (5/5/10/10) in the border-radius value box.
sketch app
  1. Inner Shadows can be used in place of the border attribute if you don't want a uniform border across your entire shape.

  2. To unlock "save as", hold the option key while on the file menu.

  3. You can revert to autosaves and previous save versions. Follow these steps to revert to a previous version:

  • File -> Revert To -> Browse All Versions
  1. Autosave can be turned off. Autosave is on by default & saves upon close or command. Follow these steps to find the autosave option:
  • Sketch -> Preferences -> General (first result here)
  1. Half pixels exist and can make for some blurry images if scaled up.
    To remove half pixels select a shape then follow these steps:
  • Shape -> View -> Canvas -> Show Pixels THEN

  • Shape -> Layer -> Round To Nearest Pixel

  1. Select a shape hold then hold the option key. This will show the distance between the selected shape and any other shape you then hover over.

  2. Hit the tab key to easily toggle through layers of a grouped object.

  3. To add a custom font (like Google Fonts) just download and install the font to your computer. It will then be available to access under your Sketch fonts.

  4. To copy the CSS code of created shapes:

  • Right-click a shape -> Copy CSS Attributes
  1. To copy the SVG code of created shapes:
  • Right-click a shape -> Copy SVG Code

Sketch Design Workflow Tips 💯

1. Create A Style & Component Guide Early

Define your color style guide & create components. You will be using these in UI/UX designs for your site continually. This should be one of the first steps you take in Sketch.

These components will most likely be your navs, footers, divs, buttons, icons, cards, etc. After all of these components have been created, you can then save them as symbols in Sketch. Symbols become part of your Sketch library and can be used in later projects.

2. Use Shared Styles

Shared styles are essentially an extension of your components & symbols, just executed a little differently. Just as you can save components as symbols, you can save all of your font styles are shared styles for quick & easy use later on.

Create all of your header, paragraph, and link styles and save them as shared styles. Shared styles also become part of your Sketch library & will be available for use in future projects.

  • Tip: If you have to make font changes across your entire project, shared styles are useful. If you edit a shared style, it implements the change across every location you used this shared style. This will allow you to edit an entire project in seconds.

Here's a basic version of a component & shared styles guide:

sketch app

3. Group Items & Name Them Accordingly

Most of your design will be comprised of multiple shapes combined together to create objects. All shapes that are used as an object should be grouped together.

This keeps an organized project file that is easy to navigate. This also allows you to select the entire object together if you need to move around your design.

4. The Order Of Shapes In A Sketch Project Is Important

The order of your groups (or objects) changes how they show up on your page. Let's say you have white text & a black rectangle on your page. If your rectangle is ordered first, the text will not show up.

However, if you reverse that order, it will magically show up! I had a lot of trouble with this concept when I first started using Sketch, so hopefully this helps you out.

If you are familiar with CSS, this works kind of like z-index. The highest items on your page have a greater z-index. This z-index decreases as you move down the page.

5. Combine Shapes Using Boolean Operations

Boolean operations in Sketch allow you to combine shapes in different ways. This feature allows you to essentially create most shapes you could imagine.

With Sketch you can take the union, subtraction, intersection, & difference of shapes. These operations should be located at the top right of your default Sketch screen.

sketch app

6. Align Shapes Via The Operations Tab Bar

The operations tab bar is very useful when it comes to aligning objects together. This allows you to be precise in your alignments. There are 6 options of alignment. Horizontal, vertical, left, right, bottom, & top.

Just select the shapes you want to align together and click the operation you want to execute. You can also distribute shapes vertically & horizontally. Very straightforward & useful. They should be located on the top right of your default Sketch screen.

sketch app

7. Sizing Options

Re-sizing objects & groups can be done in 4 ways. Stretch, pin to corner, float, & resize.

  • Stretch: Stretches the size of your entire object. Will distort the size of your object

  • Pin to corner: Sizes up your object while keeping your layer in the same proportion & position.

  • Float: Sizes up your object & keeps later in the same proportion. However, it moves your layer positioning based on size.

  • Re-size: Sizes up your object, but keeps items original distance apart.

8. Customize Your Toolbar

Customizing the Sketch toolbar is necessary for agility. You can add, subtract, and move around the items on your toolbar. Personalize it, make it yours. Your workflow will thank you for that. Here are the options you can choose from:

sketch app

9. Download UI kits

A lot of the work you will eventually need to achieve in Sketch has already been done for you in large part. UI kits have everything from user onboarding screens to IOS feature kits. I would suggest you download some of these things to facilitate creation to improve your workflow speed. Here are some really good resources for that:

  1. Invision Tethr UI Kit

  2. Webdesigner Depot

  3. Sketch Repo

  4. Sketch Tv

10. Use Plug-Ins

Plug-ins are one of the coolest features available in Sketch. Most of them are just extensions or things you could have built out for yourself, but why would you do that when you can just download and start using within minutes? Plug-ins save you ridiculous amount of creative time. Here's a list of some really useful ones:

  1. Content Generator For Sketch

  2. Auto-Layout For Sketch

  3. Material Design Palette Sketch Plug-In

  4. CSSketch

  5. Social Media Artboards

  6. Craft by Invision LABS

Best Sketch Educational Resources 📚

  1. Invision Blog

  2. Invision Sketch Video Tutorial Series

  3. Sketch App Rocks

  4. Envato Tuts Sketch App Youtube Playlist

  5. Learn Sketch Tutorials

Sketch Freebies 🆓

  1. Sketch Repo

  2. Sketch TV

  3. Learn Sketch Freebies

email development

comments powered by Disqus