Convert a Figma design to ReactJS components using Storybook

Convert a Figma design to ReactJS components using Storybook, available at $34.99, has an average rating of 3.55, with 33 lectures, based on 63 reviews, and has 740 subscribers.

You will learn about 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. This course is ideal for individuals who are Junior ReactJS developers eager to learn everything about converting design systems into fully functional ReactJS apps. or Designers with a basic understanding of ReactJS that want to implement their own design system. or Exclusively for challenge-oriented learners. You learn intricate details best through practice and repetition. It is particularly useful for Junior ReactJS developers eager to learn everything about converting design systems into fully functional ReactJS apps. or Designers with a basic understanding of ReactJS that want to implement their own design system. or Exclusively for challenge-oriented learners. You learn intricate details best through practice and repetition.

Enroll now: Convert a Figma design to ReactJS components using Storybook

Summary

Title: Convert a Figma design to ReactJS components using Storybook

Price: $34.99

Average Rating: 3.55

Number of Lectures: 33

Number of Published Lectures: 33

Number of Curriculum Items: 34

Number of Published Curriculum Objects: 34

Original Price: €19.99

Quality Status: approved

Status: Live

What You Will 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.

Who Should Attend

Junior ReactJS developers eager to learn everything about converting design systems into fully functional ReactJS apps.
Designers with a basic understanding of ReactJS that want to implement their own design system.
Exclusively for challenge-oriented learners. You learn intricate details best through practice and repetition.

Target Audiences

Junior ReactJS developers eager to learn everything about converting design systems into fully functional ReactJS apps.
Designers with a basic understanding of ReactJS that want to implement their own design system.
Exclusively for challenge-oriented learners. You learn intricate details best through practice and repetition.

In this course, you will learn exactly how complexand 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.

The learning by doing approach in this course puts you in place of an actual software engineer. Starting at relatively simple assignments you will work your way up to more complex and useful components. In doing so, you will automatically become more comfortable in overcoming obstacles as you would also have working in the field.

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

Course Curriculum

Chapter 1: Introduction

Lecture 1: Overview of the design system

Lecture 2: Overview of the starters template

Lecture 3: Useful VSCode Extensions

Lecture 4: Introduction to TailwindCSS

Lecture 5: Introduction to TypeScript

Chapter 2: Create the ColorBox component

Lecture 1: Assignment: ColorBox

Lecture 2: Solution: ColorBox

Chapter 3: Create the Typography component

Lecture 1: Assignment: Typography

Lecture 2: Solution: Typography

Chapter 4: Create the ButtonGroup component

Lecture 1: Assignment: Creating the ButtonGroup component

Lecture 2: Solution for the ButtonGroup component

Lecture 3: Solution with generic interface

Chapter 5: Create the Pagination component

Lecture 1: Assignment: Creating the pagination component using react-headless-pagination

Lecture 2: Solution for mobile pagination

Lecture 3: Solution for desktop pagination

Chapter 6: Create the Badge component

Lecture 1: Assignment: Creating the Badge component

Lecture 2: Solution for the Badge component

Chapter 7: Create the Button component

Lecture 1: Assignment: Creating the Button component

Lecture 2: Solution for the Button component

Chapter 8: Create the Select component

Lecture 1: Assignment: Select

Lecture 2: Solution: Select

Chapter 9: Create the TextInput Component

Lecture 1: Assignment: TextInput

Lecture 2: Solution: TextInput

Chapter 10: Create the Navigation components

Lecture 1: Assignment: Navigation

Lecture 2: Solution: Navigation

Chapter 11: Create the RentalCard component

Lecture 1: Assignment: RentalCard

Lecture 2: Solution: RentalCard

Chapter 12: Sample project

Lecture 1: Introduction

Lecture 2: Build component library and use in MyTravelApp

Lecture 3: Tailwind Configuration in MyTravelApp

Lecture 4: Resolving Invalid Hook Call using yarn link react/react-dom

Lecture 5: Final solution: tappui & mytravelapp

Lecture 6: Deploy MyTravelApp To Netlify

Instructors

Thijs Smudde
Front-end software engineer

Rating Distribution

1 stars: 4 votes
2 stars: 10 votes
3 stars: 14 votes
4 stars: 8 votes
5 stars: 27 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

Menu