Getting started with Design Systems in Sketch App
In this tutorial, you’ll learn how to use design systems for your projects on an example of Base UI Framework.
Overview
Design system is a collection of repeatable components and a set of standards that allows you to manage design at scale.
In this guide, I’ll go through the existing design system called Base UI Framework which I created and now proud that it used by many design teams and freelancers around the world.
Base UI Framework is one of the advanced design systems that can save you tons of time and make you a much more efficient designer.
1. Requirements
Base UI is simple enough for beginners, but basic Sketch App interface understanding would be needed. Besides: Sketch App 47+ and installed Trueno Typeface (included in package).
Recommended Plugins and Tools
These are not required, but believe me — they will quickly become your favorite.
Sketch Runner This is must-have for every Sketch user. Basically a Spotlight for Sketch that makes inserting symbols dead simple. I can’t image my workflow without that tool.
Craft by InVision Craft is a suite of plugins to let you design with real data in mind. Work with real data (even JSON): text, heading, images. Lorem ipsum is for amateurs.
Launchpad by Anima This tool allows you to publish responsive websites directly from Sketch without any coding needed. I’m pretty familiar with code but still use it on some small projects.
Principle Makes it super easy to animate user interfaces and prepare guided animations for developer. I’m seriously in love with that tool.
Abstract One of the best version control and design collaboration tools available. Helps you overcome the burden of out-of-date and conflicting files.
2. File Structure
Base UI main file has three pages: Symbols, Components and Quick Start Templates.
Symbols — This page contains all adjusting options: colors, typography, logo and of course all symbols system. The first page you’ll see and need to use.
Components — Every predesigned component is placed here. More than 180 screens in total. Just copy-paste any you want.
Quick Start Templates — Grab any of these to jumpstart your project or test MVP. I’ve created 10 templates for different cases with sample images and dummy content.
Ready to customize system and make it match your design styles? Our first stop would be the Symbols page.
3. Colors
With Base UI and any other system that you create, you’ll need to have a predefined color palette. The best option here is to make them global — link one fill/style in every element you use. This will allow you to have all colors stored as a variable in Symbols page.
3.1. Change colors
This color palette is the single source of truth in entire design system, every element color is linked to it. That’s why they called global.
To change any color, just choose a layer within the Symbol and specify its color. Changes will apply to all the symbols containing this color.
Note: Text colors isn’t linked to that palette and need to be styled separately. Check “Typography” section below.
3.2. Add new color
To add more colors go to the Symbols page and simply copy/paste any color artboard, change title and assign a new color for “Fill” shape.
Note: You can use flat colors, gradients or even image fill as global color.
A bit of inspiration: here are some typography and color experiments with Base UI Framework.
4. Typography
Base UI by default is using a Trueno Typeface for all text and headings. You’re not limited to that, you can use any number of typeface combination you want. Circular? Beirut? You’re the boss.
I recommend to check these resources for type inspiration and guides:
- Typewolf — Typography inspiration and gallery
- Better Web Typography — Web typography email course
- Fonts In Use — An independent archive of typography
Default typography system is built into shared styles with a simple structure:
Tag / Color / Alignment + Style. It would be a good idea to maintain the same schema if you’ll decide to add other text styles.
Note: You can put together all components and after that start experimenting with different typeface combinations. This will allow you to quickly test different ideas and find one that fits the best while see the whole page design. Here is some inspiration on how to do it.
4.1. Customize the Font
- Select all type layers that you want to change. Hold Command key and drag them using mouse.
- Choose a new typeface in the Inspector panel on the right side. If you’ll pick a font that doesn’t have a bold variation, then it will get rid of the “Bold” font weight for every text styles selected and you’ll have to reselect all “Bold” styles. Change color if you need to.
- Sync your changes, and you’re done!
You also need to do the same operation for any color changes you want.
5. Special components
5.1. Section styling
Choose background color and use built-in top and bottom separators. Keep it consistent!
5.2. Mockups system
There are two styles, devices and orientations currently. Use iPhone or iPad in white/black to present your app screens professionally.
5.3. Quick content generation
Base UI is optimised to work with Craft by Invision. You can add dummy text content and images on the fly and much more. Use solid content and stop wasting time with lorem ipsum.
6. Quickstart templates
There are 10 quick start templates to kick-off your project. It’s a fast and effective way to validate your business idea before you double down on it.
7. FAQ
How often do you release updates?
We try to update the Base UI immediately after the release of new features in Sketch. All customer are automatically notified through email.
Will updates also be free?
Sure, you’ll get every update for free.
Discounts for students?
We offer a 50% discount on all our products for all students and teachers. Just provide some proof.
Any refunds?
Yes, you have 7 days to get refunded if something went wrong. But this applies only to purchases through Gumroad.
How can I get a support?
Be sure to ping me on Twitter, or email hi@mayerr.com
Thanks for reading this tutorial,
Robert
