Intro to Storybook for React with Figma - [React Storybook Tutorial]

[@headwayio]

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

[@Co-Monad]

Great intro, I’ve used storybook at large companies for a few years. Happy to share my experience and workflows.

[@headwayio]

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]

@@headwayio count me in. 👍

[@headwayio]

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

[@foodaupair]

@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

[@bolajahmad]

I use Figma.. just started using Figma and it's an amazing tool I can literally just make my designs in my browser

[@headwayio]

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. kzbin.info/aero/PL6ubUCP07zW5PFSZOTv6JZTRr84CWY-OD We also have a video about getting started with design systems and documentation. kzbin.info/www/bejne/qKutfWqwrMiDitk

[@mgan59]

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

[@headwayio]

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

[@vinaynair1911]

A Terrific Tutorial, Thank you so much lads!

[@headwayio]

Thank you! Glad you found it helpful!

[@paralysekid]

Thank for showing this in detail

[@headwayio]

Good to hear! Thanks for watching.

[@devstefancho]

great presentation and demo

[@lovi1999]

Amazing Tutorial. Just figured out how easy things storybook can make while managing a lot of components.

[@headwayio]

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.

[@yyxx9309]

You guys are awesome!! Thank you!!

[@headwayio]

You’re more awesome for leaving a comment! 🤗

[@carlnc9450]

Ahhhh Pain Ahhhh full Gets better at 25:24

[@desireco]

Thanks :)

[@nobytes2]

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.

[@jdragon8184]

Can't believe I am here for the intro only , giving demo tomorrow for storybook

[@jessealton23]

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.

[@headwayio]

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 KZbin on December 15th or hop into zoom by registering here: www.headway.io/events/product-design-and-development-process-ask-the-experts

[@phansclimbinglog3204]

Thank you so much for the tutorial!

[@headwayio]

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! - kzbin.info/www/bejne/fIKQgqufoL2ZsLM

[@RogerOnTheRight]

Uh... ah... uhh.. Just breathe and focus on your thoughts, forge the audience.

[@RajabNatshah]

Thank you :)

[@bolajahmad]

Storybook helps to keep my UI organized and ensure I don't have to write same codes for different components at different point

[@headwayio]

It's such a great tool! Glad you're finding value in it.

[@daisykmr2]

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?

[@headwayio]

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

[@benlaorg5807]

Can you go the other way around? Lets say there is already a storybook setup, can you import it into figma?

[@headwayio]

Looks like someone made a great tutorial on that here: story.to.design/blog/from-storybook-to-figma

There's a way i can change/see the units? pt or rem instead of px....

[@gauthamkumarrokz]

good one...where can I find this example repo?

[@headwayio]

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.

[@m2tdev]

Thanks

[@joyaljose1653]

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

[@headwayio]

I can connect with Nico and Billy and see if they have any thoughts on this for you. Stay tuned! - Jacob @ Headway

[@catweb666]

Great Tutorial!

[@headwayio]

Glad you enjoyed it. We can thank Nico and Billy for putting this together for us!

[@juliosanchez2441]

Where can I get the ToDo List source code?

[@headwayio]

Here's the finished todo-list app we built, for those who wanted to compare/wrap up their own: glitch.com/~reactjs-todolist

[@juliosanchez2441]

Great! Thanks for sharing

[@headwayio]

@@juliosanchez2441 happy to help! - Added that to the video description as well for other people to grab too.

[@marwanlouhichi8329]

Thanks for the great work ! Is there a similar tool for developing language such as Swift (IOS) and Kotlin (Android) ?

[@headwayio]

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.

[@rostm3808]

ahh ahh ahh ahh ahh ahh .... great tut besides that! XD

[@duckmeee2991]

Don’t understand, why can’t the developers just check the Figma design directly as a comparison rather than baking the URL in?

[@albazalba6453]

great except aah! aah! aah!

[@headwayio]

Glad you found it helpful! We appreciate that feedback.

[@KuanyshMoldabek]

00:19 first "Ah"

[@AlexAlex-sh3mz]

Timeline

[@thedjnute]

Ahhhhh... ummmmm... my gosh

[@kashnigahbaruda]

Aaaaaa a aaaaaa a a aaaaaa a aaaaaa. Bye.