Convert a Figma design to ReactJS components using Storybook

Learn to build a reusable, robust, animated and fully typed ReactJS component library based on a Figma design system.

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.

What you’ll learn

  • 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..

Course Content

  • Introduction –> 5 lectures • 28min.
  • Create the ColorBox component –> 2 lectures • 7min.
  • Create the Typography component –> 2 lectures • 11min.
  • Create the ButtonGroup component –> 3 lectures • 18min.
  • Create the Pagination component –> 3 lectures • 21min.
  • Create the Badge component –> 2 lectures • 8min.
  • Create the Button component –> 2 lectures • 12min.
  • Create the Select component –> 2 lectures • 12min.
  • Create the TextInput Component –> 2 lectures • 9min.
  • Create the Navigation components –> 2 lectures • 25min.
  • Create the RentalCard component –> 2 lectures • 14min.
  • Sample project –> 6 lectures • 25min.

Auto Draft

Requirements

  • 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

Each component has a dark mode variant and can have multiple states such as hover, focused and disabled. TailwindCSS will be used to rapidly build out the UI components without having to leave our ReactJS components. An additional set of bonus components are available in the design system for you to implement such as Checkbox, Toggle, Radio and Tooltip. All components are created by keeping the quality characteristics such as reusability, robustness and extendability in mind.

TypeScript: fully typed components

All components will be fully typed to prevent consumers of the library in violating the guidelines of the design system. TypeScript’s most relevant features will be taught like basic types, custom types, interfaces, generics and Record.

Build & consume: going to production

The component library will be optimised for production. All of the components will be minimised to 360kb in total size, so when you are using the components in the sample project the page will load incredibly fast.

 

Future updates included

More content will become available in the future. I might redo some videos to improve on the quality. Learning materials can be changed in the future as well. All future updates are included.