Segments: 00:00 - Intro 00:48 - What is Storybook? 03:45 - Figma with Storybook 06:02 - Basic Setup of Storybook with React App 25:14 - Setting Up Figma File for Storybook 33:13 - Referencing Designs from Figma in Storybook 38:45 - Design and Dev Team Communication Tips 42:50 - Live Q&A 56:16 - Storybook Addons and Actions 📚*FREE Guides and Resources:* 🚢 Shipwright UI Kit - A fully editable design system built in Figma bit.ly/shipwright-ui-kit ⬇️ Icon Pack - Get a jump start on your own collection bit.ly/download-iconpack 🏄♂️ Check out upcoming events headway.io/events
We're having a live stream next month about how our design and dev teams work together beyond storybook. Hope you can join us! More info on the channel soon.
@@Co-Monad if you want to join us on zoom for that, you can register here too! - headway.io/events/product-design-and-development-process-ask-the-experts Sometimes we let folks hop onto the panel to ask questions and share experiences as well. So that would be the best way to do that with us.
Yeah, we love it! Not only can we design in our browser, but clients and customers can get invited to prototypes right in their web browser too. No need to install anything. It makes the review and feedback process a lot more efficient for all. We have a series all about getting started in Figma if you're curious to dig into it. ua-cam.com/play/PL6ubUCP07zW5PFSZOTv6JZTRr84CWY-OD.html We also have a video about getting started with design systems and documentation. ua-cam.com/video/rzJL7zwcPTw/v-deo.html
FYI: this video covers the storybook 5.2.x api (you can see the version in his terminal when he starts it). storybook is now on 6.x and the interface covered here is out-of-date for the most part. This can be a useful overview still, but be aware the code sample here may not work as of 10/16/2020
Thanks for sharing this update with others! As with many tutorials online, with tech especially, these kind tutorials are bound to get outdated. Appreciate your feedback on this. 🙌🏻
Thank you! Glad you found this video helpful. Thanks for subscribing too! 🙌 We have live streams every month for designers and developers, so be sure to check them out. And let us know if there are any topics you would love to learn more about.
I've watched thousands of videos and I don't think I've ever heard someone just say ah after ah every other word. I only lasted until 9min before I was driven to jump from a building.
@8:20 command to integrate storybook with react @9:20 command to start storybook @11:11 import stories function to connect with api correctly within your newly created #####.stories.js file @13:40 create "fake data" to pass into the component @33:35 yarn add -D storybook-addons-design; then register in addons.js; then reference url to the Todo.js file to complete the link from figma to storybook
So helpful! I have been using figma for years and have been missing a clear tutorial like this. I also read that you can use design tokens (?) for auth.
Good to hear! We actually will have some content coming out soon in regards to design tokens with Figma. And be sure to join us in December for our live stream to ask your own questions on collaboration between design and development teams. You can join us here on UA-cam on December 15th or hop into zoom by registering here: www.headway.io/events/product-design-and-development-process-ask-the-experts
Happy to help Shiyu! We hope you can join us for our upcoming live event where our team will talk about their setups for coding faster and more effectively with our teams! - ua-cam.com/video/FQ-QxikXfzQ/v-deo.html
The only links and resources for this presentation are listed in the video description. Nico's project may not be publicly available anymore since he hosted it on his own account.
Great Webinar, can one integrate Storybook with zeroheight tool? And can you refer some material I can go through where I can learn how to integrate zeroheight tool with figma?
Here is documentation on integrating zeroheight with Storybook - help.zeroheight.com/3xlwst8/p/507ba7-storybook And then zeroheight with Figma here: help.figma.com/hc/en-us/articles/360039829314-Zeroheight-and-Figma
3 роки тому
There's a way i can change/see the units? pt or rem instead of px....
Both Xcode and Android Studio have tools available for previewing components and views within the editor (Storyboards and Jetpack Compose), and Figma works well to demonstrate your design system to others outside of the development environment.
Hi, I had an issue while adding the addon-designs... It's showed a lot of peer dependencies and installation was successful but I couldn't find addon-designs in the @storybook folder in node modules. And when I run storybook I am getting this error "cannot find module @storybook/addon-designs" Can anyone suggest a solution??
Segments:
00:00 - Intro
00:48 - What is Storybook?
03:45 - Figma with Storybook
06:02 - Basic Setup of Storybook with React App
25:14 - Setting Up Figma File for Storybook
33:13 - Referencing Designs from Figma in Storybook
38:45 - Design and Dev Team Communication Tips
42:50 - Live Q&A
56:16 - Storybook Addons and Actions
📚*FREE Guides and Resources:*
🚢 Shipwright UI Kit - A fully editable design system built in Figma
bit.ly/shipwright-ui-kit
⬇️ Icon Pack - Get a jump start on your own collection
bit.ly/download-iconpack
🏄♂️ Check out upcoming events
headway.io/events
Great intro, I’ve used storybook at large companies for a few years. Happy to share my experience and workflows.
We're having a live stream next month about how our design and dev teams work together beyond storybook. Hope you can join us! More info on the channel soon.
@@headwayio count me in. 👍
@@Co-Monad if you want to join us on zoom for that, you can register here too! - headway.io/events/product-design-and-development-process-ask-the-experts
Sometimes we let folks hop onto the panel to ask questions and share experiences as well. So that would be the best way to do that with us.
I use Figma.. just started using Figma and it's an amazing tool
I can literally just make my designs in my browser
Yeah, we love it! Not only can we design in our browser, but clients and customers can get invited to prototypes right in their web browser too. No need to install anything. It makes the review and feedback process a lot more efficient for all.
We have a series all about getting started in Figma if you're curious to dig into it.
ua-cam.com/play/PL6ubUCP07zW5PFSZOTv6JZTRr84CWY-OD.html
We also have a video about getting started with design systems and documentation.
ua-cam.com/video/rzJL7zwcPTw/v-deo.html
FYI: this video covers the storybook 5.2.x api (you can see the version in his terminal when he starts it). storybook is now on 6.x and the interface covered here is out-of-date for the most part. This can be a useful overview still, but be aware the code sample here may not work as of 10/16/2020
Thanks for sharing this update with others! As with many tutorials online, with tech especially, these kind tutorials are bound to get outdated.
Appreciate your feedback on this. 🙌🏻
Amazing Tutorial. Just figured out how easy things storybook can make while managing a lot of components.
Thank you! Glad you found this video helpful. Thanks for subscribing too! 🙌
We have live streams every month for designers and developers, so be sure to check them out. And let us know if there are any topics you would love to learn more about.
Ahhhh Pain Ahhhh full
Gets better at 25:24
Thanks :)
I've watched thousands of videos and I don't think I've ever heard someone just say ah after ah every other word. I only lasted until 9min before I was driven to jump from a building.
Can't believe I am here for the intro only , giving demo tomorrow for storybook
A Terrific Tutorial, Thank you so much lads!
Thank you! Glad you found it helpful!
Thank for showing this in detail
Good to hear! Thanks for watching.
@8:20 command to integrate storybook with react
@9:20 command to start storybook
@11:11 import stories function to connect with api correctly within your newly created #####.stories.js file
@13:40 create "fake data" to pass into the component
@33:35 yarn add -D storybook-addons-design; then register in addons.js; then reference url to the Todo.js file to complete the link from figma to storybook
Uh... ah... uhh.. Just breathe and focus on your thoughts, forge the audience.
great presentation and demo
You guys are awesome!! Thank you!!
You’re more awesome for leaving a comment! 🤗
So helpful! I have been using figma for years and have been missing a clear tutorial like this. I also read that you can use design tokens (?) for auth.
Good to hear! We actually will have some content coming out soon in regards to design tokens with Figma. And be sure to join us in December for our live stream to ask your own questions on collaboration between design and development teams.
You can join us here on UA-cam on December 15th or hop into zoom by registering here: www.headway.io/events/product-design-and-development-process-ask-the-experts
Storybook helps to keep my UI organized and ensure I don't have to write same codes for different components at different point
It's such a great tool! Glad you're finding value in it.
Thank you :)
Can you go the other way around? Lets say there is already a storybook setup, can you import it into figma?
Looks like someone made a great tutorial on that here: story.to.design/blog/from-storybook-to-figma
Thank you so much for the tutorial!
Happy to help Shiyu! We hope you can join us for our upcoming live event where our team will talk about their setups for coding faster and more effectively with our teams! - ua-cam.com/video/FQ-QxikXfzQ/v-deo.html
good one...where can I find this example repo?
The only links and resources for this presentation are listed in the video description. Nico's project may not be publicly available anymore since he hosted it on his own account.
Great Webinar, can one integrate Storybook with zeroheight tool? And can you refer some material I can go through where I can learn how to integrate zeroheight tool with figma?
Here is documentation on integrating zeroheight with Storybook - help.zeroheight.com/3xlwst8/p/507ba7-storybook
And then zeroheight with Figma here: help.figma.com/hc/en-us/articles/360039829314-Zeroheight-and-Figma
There's a way i can change/see the units? pt or rem instead of px....
ahh ahh ahh ahh ahh ahh .... great tut besides that! XD
Thanks for the great work ! Is there a similar tool for developing language such as Swift (IOS) and Kotlin (Android) ?
Both Xcode and Android Studio have tools available for previewing components and views within the editor (Storyboards and Jetpack Compose), and Figma works well to demonstrate your design system to others outside of the development environment.
Great Tutorial!
Glad you enjoyed it. We can thank Nico and Billy for putting this together for us!
Thanks
Hi,
I had an issue while adding the addon-designs... It's showed a lot of peer dependencies and installation was successful but I couldn't find addon-designs in the @storybook folder in node modules.
And when I run storybook I am getting this error "cannot find module @storybook/addon-designs"
Can anyone suggest a solution??
I can connect with Nico and Billy and see if they have any thoughts on this for you. Stay tuned! - Jacob @ Headway
Don’t understand, why can’t the developers just check the Figma design directly as a comparison rather than baking the URL in?
Where can I get the ToDo List source code?
Here's the finished todo-list app we built, for those who wanted to compare/wrap up their own: glitch.com/~reactjs-todolist
Great! Thanks for sharing
@@juliosanchez2441 happy to help! - Added that to the video description as well for other people to grab too.
great except aah! aah! aah!
Glad you found it helpful! We appreciate that feedback.
00:19 first "Ah"
Ahhhhh... ummmmm... my gosh
Timeline
Aaaaaa a aaaaaa a a aaaaaa a aaaaaa.
Bye.