Introduction

[00:00:00]
>> Thank you all for being here today. It really means a lot that people took time out of their lives to come see my talk, which is really exciting. So I'm Emma Bostian. I'm a software engineer at LogMeIn. I am from Upstate New York originally born and raised there.

[00:00:14]
After I graduated from Santa College in Albany, I moved down to Austin, Texas for three years when I worked at IBM on a design team for the quantum computing site, which was super fun, and that was kind of like my first intro to design systems. But at LogMeIn I actually I work on building design systems as well.

[00:00:32]
And so this is something I'm really excited to be sharing with you today. I do a lot of miscellanous things in my spare time, like podcasting, blogging, all the things that everyone is getting into right now. So I am really looking forward to this. It's a little bit of an experiment, because we're gonna be building a system together, but everyone's is gonna look a little bit different by the end of this, which is gonna be really neat to see and I hope that you all will share it in the chat maybe after this workshop is done.

[00:00:57]
So we're gonna start out learning about design systems like what they are, why they're important and how to build them. Then I'm gonna teach you some design foundations and I think as engineers this is really hard to learn design. I'm not an expert, I am an engineer by nature.

[00:01:09]
But I think going over some color theory and typography will be super fun. Once we get that foundational knowledge we're gonna switch into Figma which is designed tool. We're actually gonna design components together. We're gonna turn them into coded components. We're gonna animate those components and then we'll document them and publish that on natla phi.

[00:01:28]
And then we'll just wrap up by talking about some fun people and tools in the industry that you can reference for more information. I do talk quickly. So if I'm too fast, just raise your hand and I will try to slow down. And if you have any questions, I'm gonna try to pause and thereafter, some of those sections and take questions.

[00:01:46]
But if anything is unclear, just stop me and we'll address it. So today we're gonna talk high-level design systems. This is a new field and it hasn't really been standardized in the industry yet. So this is my take on how I would build a design system but it's not gonna go into the nitty gritty.

[00:02:05]
So, we're not gonna talk about how to actually deploy like a build process because a lot of companies have different standards, different procedures and it wouldn't make a ton of sense for me to discuss those intricacies. But we will talk about how to actually build components and design components and all of that.

[00:02:24]
Just a couple of housekeeping things, so I have a repository on GitHub, I just made this public. Let me bring that up here. You can go find it at emmabostian/fem-design-systems. It is public now. My reading is very complete and there are links to the documentation. So I put together this website which matches my slides because I'm super extra in how to do that.

[00:02:52]
And these are also my speaker notes. So this is what I'm gonna be looking at and reading through, and if you ever get lost feel free to just jump in. I also have branches I've created on GitHub at the end of each of these big sections that you can jump to.

[00:03:05]
But we will be referencing this from time to time just to grab some larger code snippets. So I would just recommend keeping this open. Okay. So, Let's talk about design systems. So the internet was not originally intended to host large scale social and enterprise applications. It was really created as a way to share data across the world.

[00:03:32]
And a lot of the terminology that we've used and we've coined throughout time as it's written printed books. So if we think about pagination, bookmarking, web pages, these all have references to printed media. But we don't develop web pages as like full web pages anymore. And when we think about building our sites in terms of pages, we kind of subconsciously throw reusability out the window.

[00:03:56]
So, instead of thinking in terms of pages, we should start thinking in terms of components. We're seeing a lot of popular JavaScript frameworks in libraries are a do-this, even native web components. So we really need to shift our mindset to think of things modularly. So a design system is really going to allow us to create this modular experience.