# Sketch Bootcamp

Canonical URL: <https://www.nobledesktop.com/classes/sketch-bootcamp>

## Overview

This course takes you through Sketch from the ground up, covering everything from the basics to advanced features for UI and UX design. You'll learn how to design web layouts for mobile, tablet, and desktop using text, graphics, and styles, and work with artboards and layout guides to design on popular grid systems like Bootstrap, making responsive design a much smoother process. Because Sketch is vector-based, your graphics scale cleanly across different screen sizes and export as high-resolution Retina graphics for the web or apps, and the export process itself is refreshingly straightforward.

One of the things that makes Sketch so powerful is its symbol system, and you'll get a thorough look at how it works. Symbols let you reuse design elements like buttons across your project while still allowing each instance to be customized individually. Being able to update a symbol globally means your entire design system stays consistent and manageable, and you'll learn how to share symbols and styles across files and computers to keep everything in sync. This is especially valuable when you're working with a team and need everyone using the same up-to-date components. You'll also learn how to turn your designs into clickable prototypes and get started with Sketch plugins that add useful features and help you work more efficiently.

## What you'll learn

- Create UI (user interface) and UX (user experience) designs for websites and apps
- Build layouts using text, images, layout grids, artboards, pages, and more
- Design finished layouts that are optimized for mobile, tablet, and desktop screens
- Harness the power of symbols to create reusable design elements
- Optimize graphics for web and app design (create hi‑res 2x graphics, SVG, JPEG, and PNG)
- Turn your designs into clickable prototypes that can be shared with others
- Master Sketch’s symbols by learning how to override their content and styling to create powerful design systems
- Update symbols and styles across multiple Sketch files (or computers) using shared Libraries
- Use Sketch’s vector drawing tools to create icons & more
- Learn useful plugins that can add amazing new features to Sketch

## Curriculum

### Section 1

#### Creating New Files & Designing on a Grid System

- Creating a new file
- Inserting Artboards
- Setting up a layout grid
- Creating colored backgrounds for text
- Importing text

#### Inserting & Masking Photos

- Importing photos
- Cropping a photo (masking)
- Customizing the Amount of Rounding for Each Corner

#### Inserting Vector Graphics, Fills, Shadows, & More

- Importing & modifying vector graphics
- Making grouped objects easily selectable
- Layer opacity vs. fill opacity
- Aligning & distributing layers
- Copying & pasting appearance
- Adding a drop shadow

### Section 2

#### Color Variables & Layer Styles (Reusable Appearance)

- Creating & Using Color Variables (Color Swatches)
- Creating a layer style
- Making a style to darken full-width background photos
- Renaming, Grouping, & Deleting Styles
 , 

#### Text Styles (Reusable Appearance)

- Creating text styles
- Editing text styles
- Renaming styles & organizing into folders

#### Symbols (Reusable Components)

- Creating & editing symbols
- Customizing content inside a symbol
- Controlling the layout & resizing of symbols
- Renaming symbols
- Moving symbols between pages

#### Exporting Assets: SVG & PNG

- Exporting artboards
- Exporting for web as SVG & PNG
- Exporting into folders

#### Exporting Assets: 1x & 2x JPEG

- Exporting as JPEG
- Properly setting JPEG quality

### Section 3

#### Symbols: Overrides & Custom Data

- Controlling Symbol Overrides
- Overriding Images Within a Symbol
- Custom Data Sources
- Linked Data (with a .json file)

#### Symbols: Nested Layer Styles & Nested Symbols

- Using Layer Styles in Symbols
- Nesting Symbols

#### Smart Layout

- Using the Tidy button
- Adjusting Symbol Spacing
- Reordering Content
 , \*\*Using Smart Layout for Symbols & Groups 

#### Shared Libraries (Symbols, Styles, & Color Variables)

- Creating & Using Shared Libraries
- Color Variables

### Section 4

#### Vector Drawing & Graphics Tips & Tricks

- Drawing Custom Vector Shapes
- Borders: End & Join Options
- Multiple Borders
- Multiple Ways to Rotate
- Copying & Pasting Layer Style
- Rounding Specific Vector Corners

#### Creating a Clickable Prototype

- Creating a Prototype
- Linking between artboards
- Creating Overlays
- Fixed Position Elements

#### Sharing Prototypes & Workspace Documents

- Sharing a Prototype with Others
- Workspace Documents

## FAQ

### Do I need to bring anything to the class?

In-person classes: No, we provide Macs with Sketch installed.

Live online classes: You will need your own Mac and a copy of Sketch (which may require a recent version of macOS so please check the system requirements). If you don’t have the software, you can usually do a free trial or purchase your own license. If you need assistance, contact us at [hello@nobledesktop.com](mailto:hello@nobledesktop.com)

## Pricing

**Tuition:** $650