Sorry, your browser is not supported
To have the best experience using Skillshare, we recommend that you use one of these supported browsers.

Advance Your UI/UX Skills with Sketch Symbols and Dynamic Styleguides

Rye B., Product Design @ Skillshare

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
10 Videos (1h 11m)
    • Trailer

      3:12
    • What is a design system?

      3:20
    • Creating an Interface Inventory

      3:35
    • Intro to Sketch Symbols

      11:23
    • Customizing your template

      8:19
    • Using symbols in your workflow

      6:35
    • Building custom components with symbols

      19:22
    • Sketch resize settings

      6:49
    • Sharing your styleguide

      7:16
    • Recap

      1:16

About This Class

In this class you will build a flexible, scalable, component based styleguide in Sketch.  You will learn to harness the power of nested symbols to create responsive elements that can be used throughout your app or website.  With this system, you will save time by having easy access to a design library as well as being able to update all instances of an element in a project with the click of a button.  No more searching for every instance of a certain font or color to make changes!

This class will teach you how to quickly create a UI library as well as responsive, easy to use components made from nested symbols.  Designers new to Sketch will learn how to get started with some of the easy to se tools while more experienced students can gain insight into advanced UI/UX tips and tricks!  We will learn how sketch symbols, nested symbols, style overrides, and resize settings work to make building complex components a breeze.  At the end of the class you will have a structured pattern library to use on existing or future Sketch projects - you can even share with a team to make collaboration a breeze!

This class is great for designers working on teams who want to increase consistency across products as well as solo designers and freelancers looking to speed up their workflow.  Creating consistent experiences has become a top priority for UI/UX designers.  With a design system like the one created in this course, you will be able to deliver familiar interfaces and predictable functionality across various screen sizes and devices.

Class Resources:  

To download the Sketch and Keynote templates referenced in the class, click on the 'Your Project' tab below and look in the right hand column titled 'Attached Files'.

12 of 12 students recommendSee All

Great way to get organized in Design Systems, and give a lot of consistency through Web and Mobile apps
Good overview of Sketch's most powerful tools (Symbols, Nesting, Resizing, Responsive) & introduction to Design Systems. Thank You Rye!
Raigo Lilleberg

Freelance Designer (UI/UX & Brand) @ kreit.co

171

Students

1

Project

Rye B.

Product Design @ Skillshare

I'm Rye, an architect turned UI/UX designer, currently working as a Product Designer at Skillshare. Before joining the Skillshare team, I was the Lead Product and Visual Designer at Dinner Lab, I have experience with startups, e-commerce, ceramics, freelance design, and all things food.

See full profile