React Design System – Concepts with Hands-on Practices

Hello and welcome to this course on React Design Systems.

If you are exploring this course, the chances are high that you are looking to learn how enterprise frontend projects are managed and delivered.

Developing a solid design system is a key step in developing complex front-end applications.

Let’s take a look at a simple button example Just to highlight the importance of design systems in solving design complexities and then you can decide for yourself whether this course is right for you or not.

Buttons may seem simple at first, but when you consider the multitude of factors involved, their complexity becomes evident.

Let’s estimate the number of button combinations in this example:

· Let’s say we have 3 Button Types: Primary, Secondary, and Icon Buttons (3)

· And 5 Button States: Default, Hover, Focus, Clicked, and Disabled (5)

· And also 2 Button Sizes: Small and Large (2)

· And 2 Theme Variations, light and dark: Two themes (2)

The total combination of buttons will be 60 button combinations for only 2 themes. And yet we are only talking about the button element.

Think about a large application with endless elements. How do experts handle that? Design Systems!

Here we come to the goal of this course. I will teach how to define and develop a solid design system that handles the scalability and complexity of an enterprise front-end project.

First, we will cover the theory and core concepts of the design system. Topics like Pitfalls of Design Systems, Different Team Structures, Key Principles of Design Systems and the steps for developing an effective design system will be covered so that you learn all the fundamentals you need to start developing a design system.

Next, I walk you through some of the basics of Design. This will be more of an Art class! You will learn about colors and their terminology, typography and font essentials, type scales and different design domains. After this, you will not only gain a solid understanding of design fundamentals but also learn the language of designers and UI/UX developers to have better communication and collaboration with them.

Then, we will touch Figma. The most popular design tool among developers. I will show you how to bring your design system from paper and theory into visual components by building reusable color styles, basic UI components such as buttons and more complex components like modals.

Finally, we get to ReactJS. You will learn how to convert your Figma components into React components while keeping reusability and maintainability in mind by following concepts like encapsulated styles. I will show you some of the best practices in developing styled components in React along with some strategies to level up your skills in structuring and building your design foundations the React way.

Without any further explanation let’s dive into the course and start developing a React design system like experts.