Kickstart your design system with Sketch

Kickstart your design system with Sketch Gdynia, June 6

Hey! Hello!

About Me & The Workshop

Javier Cuello I’m a designer from Argentina. I’ve worked on projects for companies such as Zara, Yahoo and UEFA. I co-wrote a book, and published several articles on Smashing Magazine. @millonestarde Follow Javier on Twitter: www.twitter.com/millonestarde

Design Systems I will help you understand the essential ingredients of a design system in Sketch, and know how to create and maintain it.

Files bit.ly/sketch-productcamp

A Short Intro to Design Systems

“How Graphic Design Legend Massimo Vignelli Cracked the NYC Subway System” https://www.ceros.com/originals/massimo-vignelli-nyc-subway/

Trieste Airport Branding & Wayfinding System https://www.behance.net/gallery/48443607/Trieste-Airport-Signage-Wayfinding

Trieste Airport Branding & Wayfinding System https://www.behance.net/gallery/48443607/Trieste-Airport-Signage-Wayfinding

Building a Visual Language https://airbnb.design/building-a-visual-language/

Parts of a System

Principles Define the foundation and ‘philosophy’. This will determine how the systems looks and behaves. Material Design Principles https://material.io/design/introduction/#

Style Guide Defines the visual appearance: colours, typography, iconography. Lonely Planet Colour Palette http://rizzo.lonelyplanet.com/styleguide/design-elements/colours

Elements, Components and Patterns How the system will work as individual parts, but also all together. Shopify Polaris https://polaris.shopify.com/

Guidelines Shorten the gap between design and implementation. Define good and bad practices. GOV.UK Design System https://design-system.service.gov.uk/

A name! It’s actually one of the most important parts. Just kidding. Not. Carbon Design System https://design-system.service.gov.uk/

“your sketch library is not a design system” http://bradfrost.com/blog/post/your-sketch-library-is-not-a-design-system/

Anatomy of a Component

Design System DIY: UI Kit on Sketch

Naming and Labelling

BUTTON LABEL

BUTTON LABEL Button / Red / Rounded Hum, don’t! 😕

BUTTON LABEL Button / Red / Rounded Hum, don’t! 😕

BUTTON LABEL Controls / Buttons / Primary / Enabled Much better! 🤩 …and makes Javi happy.

Controls / Buttons / Primary / Enabled Function Type Hierarchy State

BEM Block Element Modifier 🤓 BEM http://getbem.com/naming/

Practice: Re-arranging a mess

Re-arranging a mess We’ll take a look to a rather disastrous file and try to put everything a bit more tidy. I will also show you a couple of plugins you can use.

Practice: Customise the Style Guide

Customise the Style Guide Define your main colours, typography and icons based on the Style Guide provided on the sample files. Icons provided are the ones from https://feathericons.com/ We’ll continue at 14:40

Practice: Creating a component

Creating a component Actually you don’t have to do anything, but I’ll show the process I followed to create a component for the sample files. We’ll make a break at 15:00

Practice: Using real data

Using real data We’ll use data sources to add to our list item, and will complement this with Sketch spacing options. We’ll continue at 15:20

Practice: Navigation bar and home screen

Navigation bar and home screen Let’s (I mean, you) create a navigation bar for the project, and build the Home screen that’s currently missing —you can use lists, images, grids, etc. We’ll continue at 15:45

Practice: Card

Card Apply everything you know so far building a card and its possible variations. Explore and experiment. Create different responsive layouts, states (loading, error, empty.) We’ll continue at 16:00

Keeping the System Tidy

Stickers Plugin https://github.com/romannurik/Sketch-Stickers

Design Systems for everyone

Sketch Cloud Sketch Cloud https://www.sketchapp.com/docs/sketch-cloud/

Abstract Sketch Cloud https://www.sketchapp.com/docs/sketch-cloud/

Lingo Lingo App https://www.lingoapp.com/

Zeplin (Components) Sketch Cloud https://www.sketchapp.com/docs/sketch-cloud/

Zero Height Zero Height https://zeroheight.com/

Maintaining a System

A few beliefs 👉 It has to fit your workflow. 👉 Build trust on it. 👉 Clear roles and responsibilities. 👉 A system is never done.

designsystems.com “5 tips from an Airbnb designer on maintaining a design system” https://www.designsystems.com/stories/airbnb-designer-shares-pro-tips-for-maintaining-a-design-system/

Questions?

Before you leave…

Thanks! Dziękuję Ci! ¡Gracias! @millonestarde