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.
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.
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
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 ?
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!
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!
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?
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!
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'
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
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.
![Intro to Storybook for React with Figma - [React Storybook Tutorial]](http://i.ytimg.com/vi/p2sZKAPOQXs/mqdefault.jpg)
![Intro to Storybook for React with Figma - [React Storybook Tutorial]](/img/tr.png)
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.
The tutorial we’ve all been waiting for. Thank you!!!!
Great for a fullstack dev oriented backend like me who cannot center a div !
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.
Awesome. Please make more videos like this. Your way of explaining things is quite brilliant.
This is an amazing content for someone like me!! hope he comes back and makes contents again!
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
Glad I could help!
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!
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 ?
Stumbled upon you in my recommendations! Awesome video, i love your workflow :)
Thanks!
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!
Great for fullstack explaining, It is a pity that the ending is cut, but it can guess from the source code.
Nice will watch it tomorrow, thanks
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!
I actually haven't made any since this, but I'm going to restart this year with some similar content, thanks for watching.
@@oscargws man... it's 2023 come back!
@@oscargws Echoing the comment, would love to see more videos!
so hard Oscar, it was so hard to show storybook settings, Oscar why now i have to spend another hour looking for storybook settings.
Do you use vim inside vac? I liked you movement flow in the editor what do you use?
I suck at design when using React.... If u are one then this is a must watch .
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?
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!
Nice tutorial! What do you think of tools that auto-generate React components from Figma designs, like Clapy?
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'
So you have to run `yarn` in the repo to install all the packages first, then you can use the repo!
@@oscargws ty!
What happened at the end, back out!
Thanks
thanks for the tutorial! really helpful
great tutorial, really helpful
Good tutorial!
Why adding padding 16px and not margin 16px? I am only beginning css and wondering if it wont fuck up flex.
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
would you mind sharing some of the code for this walkthrough? really enjoyed it, thanks!
Just added the code to the description then
what happens at 28:09 ?
vim bindings? 👀
Yep!
great vid! helped a bunch! thanks! ps. anyone knows this theme for vscode? looks awesome!
Hey mate, the theme is Monokai Pro, you can find it here! monokai.pro/
@@oscargws Thanks a bunch 🙌 Hopefully there's more videos down the pipe soon, this one was great man
Which font are you using?
Inter!
Storybook is free ?
Yep
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.