Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Convert a Figma design to ReactJS components using Storybook

Name: Convert a Figma design to ReactJS components using Storybook
Rating: 3.9 (73 reviews)

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

Created byThijs Smudde

Last updated 11/2021

English

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

12 sections • 33 lectures • 3h 10m total length

Overview of the design system11:28
Starting materials
Figma: https://www.figma.com/file/0t0pK5luEdxTorOcg92K49/My-Travel-App?node-id=5%3A8509
Starter template component library: https://github.com/fullhdpixel/tailwind-storybook-starter
Starter template sample project: https://github.com/fullhdpixel/mytravelapp-starter
Figma tips
To check margin/padding between elements select an element and hold down the Option key on Mac or Alt key on Windows. Then hover over a different element to see the distance to that element.
In the right hand sidebar you can directly copy properties from the inspect panel.
Overview of the starters template4:15
Starter template component library: https://github.com/fullhdpixel/tailwind-storybook-starter
In the new version there is a Figma object which you can use in your stories to automatically link a Figma page to your stories.
Useful VSCode Extensions2:22
PostCSS language support (csstools.postcss) = https://marketplace.visualstudio.com/items?itemName=csstools.postcss
TailwindCSS Intellisense (bradlc.vscode-tailwindcss) = https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
TailwindCSS Docs (austenc.tailwind-docs) = https://marketplace.visualstudio.com/items?itemName=austenc.tailwind-docs
Prettier Code Formatter (esbenp.prettier-vscode) = https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Headwind (heybourn.headwind) = https://marketplace.visualstudio.com/items?itemName=heybourn.headwind
TailwindCSS Explorer (petermekhaeil.vscode-tailwindcss-explorer) = https://marketplace.visualstudio.com/items?itemName=PeterMekhaeil.vscode-tailwindcss-explorer
Introduction to TailwindCSS3:31
Tailwind resources
Official docs: https://tailwindcss.com/docs
Cheat sheet: https://nerdcave.com/tailwind-cheat-sheet
Introduction to TypeScript6:33
Additional TypeScript resources for the features used in this course
Basic types: https://www.typescriptlang.org/docs/handbook/basic-types.html
Custom types: https://www.typescriptlang.org/docs/handbook/advanced-types.html
Interfaces: https://www.typescriptlang.org/docs/handbook/interfaces.html
Generics: https://www.typescriptlang.org/docs/handbook/2/generics.html
Record: https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type

Assignment: ColorBox2:23
This is your first assignment in which you will create a component called ColorBox and a story for this component.
Hints
Update the tailwind.config.js with all of the colors from the design system.
Make use of the Colors array in /src/data.
Add the Design url from the Figma object in /src/data.
Check if your solution is correct: https://storybook-course.netlify.app/ or the final tappui.zip
Solution: ColorBox4:44

Assignment: Typography3:35
Assignment 2: Create the Typography component and 3 stories for this component.
Stories
Create a story for all the headings (h1-h6).
Create a story for all the texts (xs-lg).
Create a dynamic story which can controlled through storybook (variant, customColor, customWeight, className, darkMode).
Hints
Update the tailwind.config.js with all of the fontSizes from the design system.
Add new Types for variant and sizes.
Create the Typography component in /src/ and export it from /src/index.tsx.
In your story import the TypographyProps interface and pass it to StoryBook.
Add the Design url from the Figma object in /src/data.
Check if your solution is correct: https://storybook-course.netlify.app/ or the final tappui.zip
Solution: Typography7:18

Assignment: Creating the pagination component using react-headless-pagination1:57
Assignment 4: Create the Pagination component.
Hints
Work on the mobile pagination first.
For the desktop pagination you can make use of react-headless-pagination (preinstalled in the project).
Add the Design url from the Figma object in /src/data.
Check if your solution is correct: https://storybook-course.netlify.app/ or the final tappui.zip
Solution for mobile pagination11:47
Solution for desktop pagination7:26

Assignment: Creating the Badge component0:59
Assignment 5: Create the Badge component.
Hints
Create Types for all the variations in the design system.
Use the Record to create a mapping between the variations and the TailwindCSS utility classes.
Add the Design url from the Figma object in /src/data.
Check if your solution is correct: https://storybook-course.netlify.app/ or the final tappui.zip
Solution for the Badge component7:10

Assignment: Creating the Button component2:18
Assignment 6: Create the Button component.
Hints
Create Types for all the variations in the design system.
Use the Record to create a mapping between the variations and the TailwindCSS utility classes.
Add the Design url from the Figma object in /src/data.
Check if your solution is correct: https://storybook-course.netlify.app/ or the final tappui.zip
Solution for the Button component9:48

Assignment: Navigation4:46
Assignment 9: Create the navigation, which includes the following components:
MobileNavbar: renders logo, text (centered) and hamburger icon.
SideNav: renders logo, text, navItemsTop, navItemsBottom, avatar.
NavItem: renders single nav item and subNavItems (should have isActive prop to apply styling).
SubNavItem: renders single sub nav item (should have isActive prop to apply styling).
Stories
Create a story for the SideNav only
Create a story for the MobileNavbar which includes the SideNav. You should be able to open and close the SideNav using the hamburger Icon.
Hints
Create stateless components for MobileNavbar, NavItem and SubNavItem.
Manage the open/close state in the story.
Use the navItemsTop and navItemsBottom from /src/data.
Use the Popover from HeadlessUI.
Use TailwindCSS group feature.
Add the Design url from the Figma object in /src/data.
Check if your solution is correct: https://storybook-course.netlify.app/ or the final tappui.zip
Solution: Navigation19:46

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.

Description

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.

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

Who this course is for:

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.

Convert a Figma design to ReactJS components using Storybook

What you'll learn

Explore related topics

Course content

Introduction5 lectures • 28min

Create the ColorBox component2 lectures • 7min

Create the Typography component2 lectures • 11min

Create the ButtonGroup component3 lectures • 18min

Create the Pagination component3 lectures • 21min

Create the Badge component2 lectures • 8min

Create the Button component2 lectures • 12min

Create the Select component2 lectures • 12min

Create the TextInput Component2 lectures • 9min

Create the Navigation components2 lectures • 25min

Requirements

Description

Who this course is for: