What We Do

Company

Resources

Events

Blog

Free Consultation

ahoy@headway.io

(920) 309 - 5605

Creating Scalable Design Systems

April 28, 2020

April 28, 2020

6:00 pm

Presented By

Get updates on future events!

Spread the Word!

Bring co-workers, friends, and anyone else you think would benefit from the community.

Creating Scalable Design Systems

creating scalable design systems promo imagelive stream

What is a design system?

A design system is a set of standards for design and code along with components that unify both practices.

Think of it as the same instructions and Lego kit for everyone.

What are the benefits of design systems?

Design systems can save a lot of time and effort for both the design team and the development team. Through design system best practices, they can empower your team to go further and faster than ever before.

What you will learn in the video

In this design system presentation, Billy will give an introduction to creating design systems. Learn the design system best practices and tools he's picked up along the way for successful design system planning. He also answers questions from the audience after the presentation that are specific to problems that many designers face when starting to create their first design system.

You can get a closer look at the presentation file.

Presentation segments

Creation of Design Systems - 1:14

Intro - 1:38

Overview - 2:20

What are Design Systems? - 2:34

Creating Your System - 3:43

Identifying the Need - 4:01

Design System Checklist - 6:18

Design System Team Models - 7:00

Setting Up Your System - 14:28

Atomic Design - 15:15

Multi-Tired UI Kits - 18:30

Linked Libraries - 20:40

Numerically Indexing Files - 21:27

Naming Conventions - 23:55

Moving Beyond Static 26:35

The Tool Box - 29:56

Q&A - 31:39

Tools

Design System Checklist

Shipwright UI Kit

Storybook

Zeroheight

Notion


Resources

Design Systems Handbook

BEM Naming

BEM Cheat Sheet

Design Tokens in Figma


Articles & Books: Design System Best Practices

Team Models for Scaling a Design System

Multi-Tiered UI Kits for Design Systems

Atomic Design Book

Part two of the Scalable Design Systems series

Watch the next presentation in the series: Managing Scalable Design Systems

Free resources

🚢 Shipwright UI Kit - A fully editable design system built in Figma

⬇️ Icon Pack - Get a jump start on your own collection by downloading this pack

🎥 Recordings from past events

Reserve Your Spot

What is a design system?

A design system is a set of standards for design and code along with components that unify both practices.

Think of it as the same instructions and Lego kit for everyone.

What are the benefits of design systems?

Design systems can save a lot of time and effort for both the design team and the development team. Through design system best practices, they can empower your team to go further and faster than ever before.

What you will learn in the video

In this design system presentation, Billy will give an introduction to creating design systems. Learn the design system best practices and tools he's picked up along the way for successful design system planning. He also answers questions from the audience after the presentation that are specific to problems that many designers face when starting to create their first design system.

You can get a closer look at the presentation file.

Presentation segments

Creation of Design Systems - 1:14

Intro - 1:38

Overview - 2:20

What are Design Systems? - 2:34

Creating Your System - 3:43

Identifying the Need - 4:01

Design System Checklist - 6:18

Design System Team Models - 7:00

Setting Up Your System - 14:28

Atomic Design - 15:15

Multi-Tired UI Kits - 18:30

Linked Libraries - 20:40

Numerically Indexing Files - 21:27

Naming Conventions - 23:55

Moving Beyond Static 26:35

The Tool Box - 29:56

Q&A - 31:39

Tools

Design System Checklist

Shipwright UI Kit

Storybook

Zeroheight

Notion


Resources

Design Systems Handbook

BEM Naming

BEM Cheat Sheet

Design Tokens in Figma


Articles & Books: Design System Best Practices

Team Models for Scaling a Design System

Multi-Tiered UI Kits for Design Systems

Atomic Design Book

Part two of the Scalable Design Systems series

Watch the next presentation in the series: Managing Scalable Design Systems

Free resources

🚢 Shipwright UI Kit - A fully editable design system built in Figma

⬇️ Icon Pack - Get a jump start on your own collection by downloading this pack

🎥 Recordings from past events

April 28, 2020

6:00 pm

live stream

Spread the Word!

Bring co-workers, friends, and anyone else you think would benefit from the community.

Subscribe for future events

Stay up to date on upcoming events like this one and get valuable resources delivered to your inbox.

Thanks for signing up!
Oops! Something went wrong while submitting the form.

More events and videos

The Manifest

Receive the latest articles, resources, events, and more!