A presentation at EmberConf 2023 in in Portland, OR, USA by Melanie Sumner
Building a design system in Ember.js by Melanie Sumner and Jory Tindall
Melanie Sumner Senior Design System Engineer Ember Framework Core Team W3C ARIA WG @melsumner
Jory Tindall Senior Product Designer Design technologist Saxophonist artist @jorytindall
So we both work on the Helios Design System at HashiCorp.
https://helios.hashicorp.design/
So first, lets talk about what you can expect this talk to include.
It also helps you keep in mind when the end is going to be, since I know y’all are paying attention to that since we’re the last talk today.
First, we’ll talk about design system themselves, and give a brief-ish introduction.
We’re all used to UI addons, shared components, even branding guidelines. A design system is none of those things in isolation, but inclusive of all of them and more.
Next, we’ll talk about a few… …and just a few, because we don’t have all day…. …just a few challenges we faced when starting our design system team
Hint: our challenges have been less about design and code, and more about people.
Next, we’ll talk about how we decided to approach these challenges and some other things we decided to do that we think are pretty cool and set us apart as a design system team.
Finally, we’ll cover the lessons we learned, And how they can help anyone else working on a design system or on a cross-functional team
Ok before we jump in, we love our cats so here are some photos of our cats.
okay! Design Systems. let’s talk about that.
We all probably know what a design system is from a technical perspective, but from a value perspective a design system helps product teams deliver UI at scale.
Here’s an abstract representation of all of the moving parts of a design system capturing the concept of “System of Systems” in which each focus area, process, or set of deliverables is treated as its own system within the larger whole of a Design system.
“The Pagination component took something very complicated and in a matter of minutes, it just worked.”
“It’s well thought out, and handles 95% of our use cases. It’s incredibly composable within the limits of what a component should be doing.”
“(Adopting the design system) fixed major accessibility issues we had.”
You do not require permission to create accessible code.
Creating a design system in Ember.js by Melanie Sumner and Jory Tindall
