The Process of Creating a Design System
We all know the importance and the benefits of having a Design System in our products, but do you know how to implement yours from scratch? This process is challenging. Let's see how I structure this process in a few simple steps any developer can do:
1. Understand your constrains: One of the benefits of a design system is that help you avoid thinking on the limitations and constrains you need to comply. Understanding this limitations will help you not shooting your foot in the near future.
2. Extract: Identify common components and group them together. This can be done in different ways: by functionality or by design. I recommend doing this by functionality, since it's easier to have your functional code on the same place than the design code. You have the opportunity in this process to interact more with the designer and make sure you translate his/her intent into the code. You can also start extracting common design tokens, like color, spacing, fontSizes, FontFamilies...
3. API Design: Once you have your components and contraints identified, you can start thinking on how is the best way to consume your components. Keep in mind that while you need to be strict on your product constrains, it's important to let some sort of escape hatch inside our predefined boundaries.
4. Playground: With your API in place then you can start implementing them in an isolated environment. There are plenty of options that we will discuss.
5. Implement: And this is the fun part. Here's where you will start testing your new & shiny Design System in the real world. I recommend to do this phase incrementally, by route or feature as opposed to by component. Both options are great but seems to me that the first option is safer :)
Now Rinse and Repeat!. after all the process I will also share some tips and tricks about tooling and project structure.
We all know the importance and the benefits of having a Design System in our products, but do you know how to implement yours from scratch? This process is challenging. Let's see how I structure this process in a few simple steps any developer can do.
I just need the projector and a mic. I'm a designer that has being working on development for almost 8 years helping designers & developers work closer. Combine this two worlds is my passion and what I really enjoy doing.
- no special meals required
- is Latinos an under represented community??
- I have done a lightning talk about design systems: https://www.youtube.com/watch?v=zQZGEF-wuT4
- It's a frontend general topic. this cam be applied to most frameworks.
react, design, design system, components, react native
I’m a senior coach in ReactJSGraphQLAcademy. not past experience as a conference speaker but confortable speaking to an small/mid-size audience.
Designer, Developer & Coach from Panama living in Barcelona. I love to build products and help designers and developers learn from each other. I've being teaching React, React Native, Redux, & GraphQL in many cities in Europe.
| event | submit date | conf date | accepted? | reason? |
|---|---|---|---|---|
| React Advanced London 2019 | 12/jul/2019 | |||
| Chicago JS Camp 2019 | 12/jul/2019 | |||
| FullStack Fest Barcelona 2019 | 12/jul/2019 | |||
| React Day Berlin 2019 | 12/jul/2019 |