Agile Design Systems in Vue - Miriam Suzanne at VueConf.US

2,157 views · Published 3 May 2018 · 28:09 · Indexed 9 October 2026

Channel: Vue Mastery · 2018 · Science & Technology

Watch on YouTube

In her talk, Miriam gives the why, what, and how of using design systems inside your applications. She also introduces Herman, an automated design system generator she helped build.

Video is brought to you by Vue Mastery at https://www.vuemastery.com/vueconf/?utm_medium=vueconf&utm_source=youtube

Subscribe to our YouTube Channel: https://www.youtube.com/vuemastery

Follow us on Twitter: https://twitter.com/vuemastery

Like us on Facebook: https://facebook.com/vuemastery

Follow us on Instagram: https://instagram.com/vuemastery

0:00 Introduction
1:51 Why Design Systems?
3:38 Design Systems
4:44 Integration of Design + Code   
6:54 Code Patterns add meaning
8:05 Where do we start?
9:53 What do we need?
12:48 CSS was designed for patterns
13:37 Design Tokens (Settings)
15:15 Scss Maps
18:05 Relationships are Dynamic
21:37 Define the API
23:07 HTML Template logic is great
23:35 Components provide meaning
26:33 Automation is Essential

More from this channel