Build a reusable, robust and extendable component library using TypeScript, ReactJS, Storybook, TailwindCSS and Figma
Convert a Figma design system to a fully typed ReactJS component library.
Create isolated components of varying complexity with ReactJS, TailwindCSS and Storybook.
Create responsive UI elements using breakpoints and grids.
Implement a dark mode for each of the UI elements.
Understand how you can build & consume your component library.
Some ReactJS programming experience is required. The UI components vary in complexity.
You are responsible for setting up your environment correctly for ReactJS, though instructions will be provided to guide you.
In this course, you will learn exactly how complex and large scale design systems can be converted to fully functioning ReactJS components. Throughout the course, you will learn how professional tech companies implement their design systems and how you can do the same. Following best practices, a design system will be converted from Figma to isolated components using Storybook. At the end of the course, you will create a fully responsive ReactJS app with your self-built component library. You will be able to convert any design system into accessible and functional components adhering to the exact guidelines of the design system.
Content of this course: 3+ hours of video lectures, 10 assignments and 1 project assignment.
Tech stack: ReactJS, TypeScript, Storybook, TailwindCSS.
The following components are available in our design system and will be implemented during the video lessons:
Typography
Button Group
Paginate
Badge
Button
Select
TextInput
Navbar (contains sub-navigation)
MobileNavbar
RentalCard
