Sketch Intro & Designing for Mobile
The best way to learn something is to jump in and look things up when you’re stuck. That being said, I’d like to help everyone get started with a base level of information. If you’re using Figma follow along, most of the shortcuts work the same way. We’ll start with a quick overview of Sketch and then look at designing for mobile specifically.

Demystifying the Interface

Artboards

You’ll always need an art board in your document and should be the first thing you add to your design.
Open up sketch/figma and add an artboard by pressing “a” on your keyboard. A few options appear on the side:

Observe other options in the dropdown: apple devices is also useful when designing mobile screens. We’ll worry about that later. For now, remember that digital design is always fluid and will need to work on a variety of breakpoints. Keep that in mind as you work.

The next thing i’ll do is rename my file to be something a little more useful. This is especially important as you start to have multiple screens. It’s easy to get confused and lose track of what’s what. You can name this screen “wireframe-1” by clicking the title on the left sidebar. I’ll also go ahead and name my page something more telling.

Set up a grid

The next thing I like to do is set up a grid. You can do that by going up to the top right dropdown and selecting “Layout settings” you can also “View Layout” here to see your grid.
Here you can set up a grid. A 12 column grid is the most common situation, but I tend to use a 14 column grid. Feel free to experiment with 12, 14 and 16 column grids. If you’re not sure where to start, you can use the settings below.
Figma users: this works a little differently. Select “Layout Grid” on the right, and choose “columns” rather than grid. Then you can adjust how you see fit. More details.

Typography

The next thing you could explore is adding type. Put some type on your screen by pressing the letter “t” on your keyboard or by clicking the insert dropdown in the top left corner.

Type System


The next thing you could explore is creating a type system. Put some type on your screen by pressing the letter “t” on your keyboard or by clicking the insert dropdown in the top left corner.

Once selected, move over to the right and select “Create New Text Style”
Use HTML structure to create a type naming system. The style names I frequently use are: H1-H6, body-large, body-small, fine-print, nav, CTA.
 development as well.

Make a few text styles.
Here is some more information regarding nomenclature and type systems: https://medium.com/sketch-app-sources/text-system-mastery-with-shared-styles-9931bea7d085

Colors

Most designs use a limited number of colors throughout the site. To make sure you’re always using the same color, you can save them to swatches by selecting an element using the color in your document, selecting the color tab on the right, and adding it to your document color by pressing the plus sign. Save all the colors you’re using here. Sketch also has a handy find/replace color tool under Edit / Find and Replace Color.

Images

  • If you’d like to place an image into your document, save it in a folder and drag it into your project.
  • To mask an image, create a shape (like a rectangle) and select both the image and the shape. Right click and select “Create mask”
  • You’ll now see the mask in a group on the side where everything on your artboard is listed.