Converting Figma designs into React Components with Styled Components and Storybook

In this video I outline the basic process behind converting Figma designs into React components. This was my first tutorial / livestream, so apologies for any issues (like the overexposed webcam for the second half!).
Here's the related code:
github.com/oscargws/tutorial-...
0:00 Intro
0:20 What we're building
1:00 What's set up
2:00 Getting started
2:45 Storybook
3:20 Figma
4:00 Building the component
27:45 Extra improvements

[@justinr9699]

The tutorial we’ve all been waiting for. Thank you!!!!

[@HappyAnimals3D]

Awesome. Please make more videos like this. Your way of explaining things is quite brilliant.

[@AnthonyCandaele]

nice to see your workflow from figma design to implementing in React. I think I'll have a look a Storyboard. I'm looking forward to that tutorial on implementing a theme with Styled Components.

[@desmoulins6095]

Great for a fullstack dev oriented backend like me who cannot center a div !

[@wolfleader111]

Stumbled upon you in my recommendations! Awesome video, i love your workflow :)

[@oscargws]

Thanks!

[@_Yolandi]

Nice will watch it tomorrow, thanks

[@jacob.lee380]

This is an amazing content for someone like me!! hope he comes back and makes contents again!

[@danieljing9319]

great tutorial, really helpful

[@roshanzamil2782]

man just too good at frontend + he just showed us what kinda thoughts we'll go through when we code 😂 I'm digging you in socials!

[@JarrodKane]

Hey mate, really appreciate the video. Currently working on my first web dev job and having to convert a heap of figma designs into components, I figured to use storybook since it's basically just creating the components right now. Found your video and will throw you a follow here and on twitch

[@oscargws]

Glad I could help!

[@aknur1625]

thanks for the tutorial! really helpful

[@ajjo5513]

Seeing this video has made me realise how convenient figma is. For practice I try and replicate some designs (from images rather than an actual design file) and I am just now realising how difficult I’ve been making my life 😅 Quite like your workflow. The whole process is very streamlined.

[@TubeCrusader]

Good tutorial!

[@OlgardoreusDeManiana]

Great for fullstack explaining, It is a pity that the ending is cut, but it can guess from the source code.

[@MatthieuLepineFr]

Nice tutorial! What do you think of tools that auto-generate React components from Figma designs, like Clapy?

[@JohnoScott]

Would you still export manually now that tools like FireJet exist that will faithfully generate React components with names and hierarchies used in Figma components ?

[@alulaleak]

Thanks for the video. Definitely going to try storybook out.. I noticed you’re typing all of your css into your jsx file… is that a typical thing you do or for the sake of the video? Is this the only efficient way to streamline the figma to react process or would it be just as convenient putting all the styling into its own css folder?

[@oscargws]

If I'm styling say, a Button, I'll usually have a 'Button.tsx' file, and then next to it, inside the same folder a `Button.styles.ts` folder, with my styled components for that Button!

[@clutchcreator]

Amazing video Oscar. ❤️ We would love for you to build with Clutch. Not bragging, but we make the process of designing styled ReactJS components super simple and easy. 🎉 We give you the options to: - Visually compose styled ReactJS components (and switch to code editing mode whenever you want) - Connect any backend to build LIVE data-driven prototypes - Export the code outside of the platform for independent hosting (Vercel/Netlify) We also have a Figma importer coming soon that will make the process of going from Figma > ReactJS as seamless as possible. Would love your feedback!

[@occo5877]

Do you use vim inside vac? I liked you movement flow in the editor what do you use?

[@DK-mm1yp]

so hard Oscar, it was so hard to show storybook settings, Oscar why now i have to spend another hour looking for storybook settings.

[@abhisekkhuntia6348]

I suck at design when using React.... If u are one then this is a must watch .

[@shaikikbhalBasha]

Thanks

[@charlesrodriguez6276]

Do you still make great videos or do you do live streams? I really like the demonstration of the workflow and would look forward to those future videos you mentioned making!

[@oscargws]

I actually haven't made any since this, but I'm going to restart this year with some similar content, thanks for watching.

[@jacob.lee380]

@@oscargws man... it's 2023 come back!

[@thedesignnomad]

@@oscargws Echoing the comment, would love to see more videos!

[@einfacherkerl3279]

what happens at 28:09 ?

[@yaboi.hitmaizer]

great vid! helped a bunch! thanks! ps. anyone knows this theme for vscode? looks awesome!

[@oscargws]

Hey mate, the theme is Monokai Pro, you can find it here! monokai.pro/

[@yaboi.hitmaizer]

@@oscargws Thanks a bunch 🙌 Hopefully there's more videos down the pipe soon, this one was great man

[@RaZziaN1]

Why adding padding 16px and not margin 16px? I am only beginning css and wondering if it wont fuck up flex.

[@oscargws]

There's a bit to this, but a good rule of thumb for deciding between padding and margin is to use margin when you're trying to separate the block from things outside it and to use padding to move the contents away from the edges of the block

[@waterm3lonlover937]

I don't understand the 'import styled from styled-components'... it isn't in your git files. I am assuming it imports your 'styled.d.ts' file ???? I have an error in storybook that says 'styled' is not defined or Module not found: Can't resolve 'styled-copmponents'

[@oscargws]

So you have to run `yarn` in the repo to install all the packages first, then you can use the repo!

[@waterm3lonlover937]

@@oscargws ty!

[@rafi7644]

would you mind sharing some of the code for this walkthrough? really enjoyed it, thanks!

[@oscargws]

Just added the code to the description then

[@devmanek]

Which font are you using?

[@oscargws]

Inter!

[@RussianPinay]

What happened at the end, back out!

[@seyeonkim6646]

vim bindings? 👀

[@oscargws]

Yep!

[@martinui4892]

Storybook is free ?

[@oscargws]

Yep

[@GGGStalker]

That's a bad example. Wouldn't use it in production, too verbose. To style explicit dependency, shouldn't use explicit sizes and paddings aren't suppose to be applied on elements out of the element it self.