• views: 203
• date: 30 June 2023
• posted by: voska89

Master Design Systems by Crafting Foundational Design Concepts, Designing with Figma and Coding Components in ReactJS
What you'll learn
Core concepts of design systems and basics of design
The steps and considerations in developing an enterprise design system for frontend projects
Better collaborations with designers and ui/ux developers by learning design basics and terminology
Designing highly reusable and maintainable code-base in React
Building a complete design foundation in Figma
Building a solid CSS architecture
Creating extensible components with styled-components
Best practices of implementing design system foundations in ReactJS
Requirements
Basic knowledge of React
Description
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. 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.
Who this course is for
Beginner to intermediate frontend developers looking to become senior in designing their apps
UI/UX developers looking to learn how to convert Figma components into React components
Homepage

https://www.udemy.com/course/react-design-system/

   
   
   

Forex Trading

Crypto Trading. 20 USD Bonus after KYC

We need your support!
Make a donation to help us stay online
        
Bitcoin (BTC)
bc1q08g9d22cxkawsjlf8etuek2pc9n2a3hs4cdrld
	
Bitcoin Cash (BCH)
qqvwexzhvgauxq2apgc4j0ewvcak6hh6lsnzmvtkem

Ethereum (ETH)
0xb55513D2c91A6e3c497621644ec99e206CDaf239

Litecoin (LTC)
ltc1qt6g2trfv9tjs4qj68sqc4uf0ukvc9jpnsyt59u

USDT (ERC20)
0xb55513D2c91A6e3c497621644ec99e206CDaf239

USDT (TRC20)
TYdPNrz7v1P9riWBWZ317oBgJueheGjATm

0 1 2 3 4 5

| Print version |

	Information
		Users of GUESTS are not allowed to comment this publication.