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

[Music] the talk today is we're going to talk about two technologies and kind of how they combine together to help developers and designers be more in sync and build build better products so those two technologies are storybook and figma so I'll start talking about storybook and then it will switch over to figma I'll just first kind of give a couple of just a quick intro the storybook for those of you that have never heard of storybook or maybe have used it just a little bit it's a essentially an open source tool to develop UI components in isolation so a lot of times when we develop react applications there's components that get thrown into other components that then get thrown into other components and sometimes things get in order to reach one component you kind of have to go through this entire user flow in order to test it out so storybook allows you to test every component that you have in isolation by itself in that way you can kind of reach these kind of hard to get educators and kind of combinations of states that might not be as easy to replicate inside the actual application that you're building so story book is framework agnostic which means that it's not just for react it's actually works nicely or it integrates with react native view angular ember and I guess about if you yeah so pretty much it it integrates with everything and it is the cool thing about storybook is that you can kind of get a bird's-eye view of your entire component library which you don't really get once your what's your application gets big enough and you have enough components when you're trying to build a new piece of the application you don't really know if the component that you're trying to build maybe there's pieces of it that already exist in the codebase and it's really hard to kind of see it unless you can like search through your kind of component tree and actually visualize what those things look like so storybook provides you some nice UI is where you can say that you have to build some sort of date picker or I guess it's about example maybe you have to build some sort of form that uses a lot of like strange inputs you can kind of search and see okay is this input already in my codebase or do I have to actually go and build it from scratch and sorry what kind of gives you some nice tools to kind of search through your stuff and be able to quickly kind of visually check instead of maybe you look at you search through your codebase and you see that there's a component called you know date picker but you don't know what it looks like you just see that code there and you have to kind of go through this whole UI flow to actually visualize it so it's good for reusability it makes it easy for a developer to check whether something exists or not and the final thing about storybook is it has a lot of it has an ecosystem of add-ons that is growing every day so there's kind of all these ways to supercharge your storybook toolset to add new functionality to it and one of those add-ons we're going to talk about is the design add-on which actually combines figma into storybook which gives us a very powerful tool so we'll with it'll fit short of that in a second so yeah that was a little bit of a storybook Billy I'll let you kind of do a quick run-through of a figma in the context of this so yeah so figma is a a multiplayer so a multi players like multiple people can be in a single file at one time across the internet product design tool prototype tool and really a place where developers can get information like hex codes padding amounts and everything like that it's really taking things like sketch envision prototyping and Zeppelin and mash them all together into a single tool that allows anyone to be in your file at any time so you're saying prototype your prototype is using the same elements that you're actually designing so you're no longer cutting out a single screen to put it a new envision everything's live so you update it live people can jump in your files leave comments and it's really really dynamic and it's really flexible and it allows us allows people to build really intricate design systems that inherit things across from multiple files all in a really nice really nice toolset that's web-based which is like one of the biggest positive sides of figma is that anyone can jump onto it so one of the things is like when the whole industry is using sketch for a while if you ever had a client that was using a Windows machine they couldn't get your sketch files you had to send them an invasion link but now they can just jump into figma they can check out your prototype leave comments everything like that so if you are interested in figma how many people have used figma before okay we have quite a few people in here so if you haven't used it we do have a Wisconsin UX has a four-part three-part series just kind of going through the introduction of how what is figma how to use it how to put things together and run a prototype in there so if you want to check that out we have that on our YouTube channel so cool alright so so we're gonna start with just kind of the basic setup of storybook in a simple react app and we'll we'll see how figma integrates with storybook later so I'm kind of gonna do a quick run-through of a storybook in the text editor so for those of you that came to the last react.js meetup we actually built a simple to-do list using glitch so what I have here is a project that I'm gonna run here for you all to see what the app is so I'm just gonna do yarn start and that's gonna fire up the project so this meant this will be familiar to the ones of you that were here before this is a simple to-do list built in react where I can just go ahead and add you know a to-do list and delete it you get the point what I'm gonna do is kind of incorporate storybook into this react app so just to give a quick kind of walkthrough of for those of you that have experience with with react this is pretty much a you know create reactive application so I just ran creating react up and through a few components in here I broke it out into several components like we did in our walkthrough so we have for example our to do component we have our title so just to give you an idea this would be our title component or to do would be this component right here so it's all broken out by by component so in order to add story book to this project it's very simple I'm going to open up a new new terminal here and what I would have to run is I'm not sure you guys are familiar with MPX it's a NPM package like executor so I can run packages without actually downloading them to my machine so to run storybook I just specified the storybook package which is at storybook slash CLI and then I do storybook in it so I actually already ran this off I'm not gonna run it here but this is all you need you run this in the top level of your of your app and what will happen is storybook will generate this folder dot storybook and it will have these two files in it and after this gets generated I can go ahead and just open up story books so I'm gonna do yarn story book to start up the story book server and here webpack is doing some compiling of what its gonna show us and this is what story book looks like so right now we don't have any stories yet but this is what story book is is this kind of UI tool where we can where we will be able to see each of our components individually kind of in their own little box and we'll be able to manipulate them in in in different ways so right now it says no preview we don't have any stories right so so for story book let's let's go ahead and add our first story so the reason why I have each component in a folder with the same name is what I can throw the component story in that same folder with it so I'm gonna do the the form input one so the form input component is just this input here when I'm typing so I'm gonna go over to the form input and I'm gonna create a new file called form input input dot stories is so now we have a stories file that is associated with the form input or it's not yet associated in there but how do we associate it so we essentially have to use storybooks API which I'm gonna show right now so we essentially have to use it's called the stories of API so I'm gonna just quickly show you how it works so the first thing is we import react react and we're gonna import the stories of function stories off from a storybook react so when we actually run that SB in it storybook automatically figures out what kind of application we have so if we if this were a view up story book would have installed the storybook view package in our inner app and knew that it was react so we would access the storybook react package I'm gonna import I'm gonna import into here our form input component which is the one we want to generate a story for so I'm gonna do form input from form input right it's in our in the same file okay so oops so how do we actually use this function to create a story of this form input component this is how we do it we just do stories of and we do the actual name so this is the name that's gonna go up on a storybook form input that's the first argument the second argument is our node module this is kind of boilerplate here the important part is this when I do dot add and here's where we add our story the first argument is kind of the state of our form input so I'm just going to call it default and you'll see in a second what that means and here is where we actually render our form input component so I'm gonna do form input and our forum impact component if we check it out it actually takes some props here right so we can't just generate it without props because some of these things are going to fail it takes the input value which is what value is actually in the form and it takes the function that sets that input value so for now I'm going to create some kind of fake data or storybook data that I'm going to pass into this component so what I'm gonna do is simply I'm gonna create some props so I'm going to call it default props and those props are going to be those two functions those two values the first is the input value which I'm going to leave is empty and the set input value function I'm gonna have it be just an empty function and then these props are what are gonna go in here so I'm gonna use the spread operator to actually spread those props in here okay so this is essentially we have now created a story for our form input component with this state so it has no text in it and the set input value function which is the function that happens when you type into the input it just does nothing so I'm gonna save this here and then we go back to storybook we see that we now have one story under the form input component that is the default state so we're now seeing like essentially like a cut out of that specific component in this state right so this is not super interesting but we can add multiple states to see the same component in a different condition so I'm gonna show quickly here I'm going to add a second state to the same story so this is the default state but I could add a a populated state so I'm gonna create some props called populated props or yeah we can call it when there's actually data in there so popular did props and the input value instead of being empty is just gonna say you know walk dog and all I have to do is just add a new story so I'm gonna tack on another add to this stories of function so I'm gonna put it right here we can actually break this up probably a little bit like this so we have add and this one's going to be populated and the component I'm rendering is that same form input oops but instead of the default props we're gonna do the populated props so I'm gonna grab this and put it in here all right likes it like that better so Oh dot add yeah it should be like this oh I see so let's see let's try to put this like this okay this one close to this one and this one closes this one there we go I think that should be good there we go okay so all that work and now we have another state of our component right so we have the default state and in the populated state so obviously this is a very simple example but you can imagine how you can feed all the different types of props that your component would need you can have kind of a case for each or sorry a state for each case of of your component so in this case it's a simple input so it only takes one one prop that actually matters in this case but you can imagine a component where so you need to visualize some data or and somehow utilizes the props that you're feeding it to render other components so that's the kind of stuff that you can kind of mock with this so I'm gonna so now that we've kind of gone over like a simple example I'm gonna switch over to a branch where I've already added kind of all the stories to our component yeah yeah this module here so this is a this this stories of function this API just utilizes this it's a it's a it's a node it's it's a built-in variable to the environment so it's it's not defined here it's just it's like a global variable it's a reference to the storybook module I believe so actually this API this the stories of API they're actually changing it to get rid of that module so there's a new API called the CRF four story book it's called the component reference I have it right here it's called the sorry CSF which is the component story format which uses exports instead of having this the stories of function you would just export the stories from these files in storybook kind of knows that if you're exporting something from a dot stories file it kind of replaces this kind of awkward module way of doing it because this is not ready to go about beginner-friendly it's like what is that variable right but luckily we have PS code here with some some some tight script or some it gives us an idea it's a it's a known module type of a variable that it's just yeah it's I wouldn't worry about it too much it's just it's a magic global that it's kind of a back door for storybook to actually pull its own package in here and do what it needs to do so let's see so I'm going to switch over so I actually have another branch here where I'm gonna I have the all stories branch let's see so this is what the story book looks like when you have when I've already put in here kind of one story for each component so the first one is our form so this is a component that combines the input and the button this is when it has text populated we have our form button by itself form input text populated which is this is the one we did title so each of these is an individual component this is a to do and this is our our to do list so you can see how kind of allows you to kind of showcase your whole application and actually story book is used a lot by like UI frameworks as just their documentation so we have we use a lot of like graphing libraries where their documentation is just a link to their story book so you can just look at what everything looks like in storybook instead of them having to build it out in some like you know essentially recreate what storybook does so yeah so this is kind of just the basic idea I'm gonna talk a little bit about this storybook folder here that I didn't really go over so I'm gonna comment some of this out for a second the main idea of this file is this is where you actually determine which which are the stories you want to include what it does is it parses your directory for files that end in dot stories jas and then again there's some module magic here but this is actually something that you don't actually write this is just a file that gets generated for you but some of the things that we can do is we can kind of do a little bit of customization of this kind of this pre-loading of all of our files the small demo that I had here was just setting the the background of a story book as a kind of a quick way to show you like the kind of stuff you can do so you can you can create a theme by importing the theming or by importing the create function from the storybook theming package and then you can just use that function to create a new storybook theme in this case all I'm doing is the the app content background I'm changing it to blue and then I'm adding some parameters this is another function add parameters where I pass in that theme as an option and if I save this we reload we see that we kind of overridden some things here it's sort booked so there's a lot more than just the background that was just a quick example but we can we can change a lot of different things of how you know how we can use it so yeah I'm gonna kind of stop here with with storybook and we'll switch over to some kind of now that we have this tool how do we actually use or like how do we as a developer what should I look for from a designer in order to organize my components using your design tools so yeah so Nick who's gonna switch over to figma and he's gonna follow along with me yes it's kind of one of the cool things about the multiplayer aspect about figma is when you're presenting I can drive he can follow along and I can kind of walk him through it but when it comes to setting up your figma file to be conducive to integrating with storybook there are some I want to say best practices but some things that we found that work out really well we follow sort of a the atomic design principle and that's on how we structure our files and I'll kind of go through each one of those is a very simple file it's a to-do list so I've the design prototype along with the entire UI kit all in a single document here a lot of times that won't necessarily be the case so if niihka wants to actually you know play so we did make a little prototype go ahead and do you want to lay there right here of the to-do list app and this is kind of using one of their new features is the smart animate know if anyone's had a chance to use it yet I'm gonna just drive okay so one thing that we allowing the smart animate allows you to add a like a lot of unique animations to your prototype so this is kind of a neat thing that necessarily storybook related but kind of allows us to do nice little transitional animations that they didn't allow before so I just wanted to kind of show that off so if I delete this one out I can have things move up and slide down you can fake somebody out and say I have a real app and it's really a prototype so that's should I exit out of the prototype and just go back to your other view just close it yeah you can just close the prototype and go there and you should still be following yep one thing they don't allow you to do if you click the prototype button all your followers don't follow along with so so sort of setting up an atomic design file one of the ways that will set things up is we break things down into particles atoms and molecules and organisms particles are a lot of our super-high level elements that don't necessarily need to be brought into storybook this be colors if you're doing any plates or corner rounded quarter elements shadows stuff like that we would store those in here so we have a plate element here so we can control all our rounding elements and then our type styles this stuff doesn't necessarily need to be integrated in there but that's kind of what we've extrapolated these out to their own level these normally would go into atoms but we've sort of since we might have multiple products using a single particle file we'll kind of pull those out at like a level higher then the secondary level here is atoms so atoms are a lot of like single elements so here we'll have containers so these containers will be using the plate file to inherit their shape properties so if I round the corners in that plate it's gonna change all the rounded corners here and then there might be slight modifications here so a stroke for a secondary container or an empty state and then a fill for a primary we would put our icons in here if they're not in their own file that we're pulling in but icons might live in here and then this is kind of a shortcut when I put all the templates into a single frame here so one thing that Sigma does that leave Sketch does it now too is if you put things into the frame you will see that it will separate everything real nice based on the frame that it's in so then you'll see these in the asset browser here so just kind of a nice way to organize things instead of doing button backslash I don't think that's being this plate over here though oh yeah it is yeah you can't see do I'm going to show it yeah if you want to go to your side oh no that's right your view only mode trust me it's really great but this template file would be the template that drives all our buttons on the system the template that drives all the row elements in this design system and the template that drives the input field here the reason we break out the templates ahead of time is that we'll make modifications or the different states in their molecule area so this is the part where these would probably be what your development team would grab and put into storybook because here is where you're going to define out your different states so like here I just have to submit buttons that say submit but I might name this one normal and this one active I'm same thing with submit row this might be like normal and this might be like hover State and these would be the frames that would be being pulled into storybook and you put all your different states in here and these would be the components that that you would normally drive all your prototypes and designs with these are still pretty much the simpler versions of components so like a button in different states row in different states input different states icon placement container so if you're doing dents for like mobile apps or normal for like Web Apps you might have that here and then here we just have a page header and then an organism's is where we start to put our more complicated component so this is our form which is a lock up of our input field and then the primary button Janelle says normal or normal button and if I switch this out I can switch out the different states real easily in sort of these complicated components so really when organizing your files is really paramount to getting them into storybook and you might have to work with your dev team to really think about how are they organizing things how are you organizing things normally they would be coming into figma on may be looking at things here but here we're really gonna leverage they don't have to go into figma because they'll be getting a lot of that information out into storybook itself another thing that with atomic design is might be templates and these are like full page views don't have that in here because it's such a simple app but those might not live in this file those could be in their own file depending on like what kind of product you're building so you could have like a sign up file template file or something like that so yeah so I think that's it for just like the general figma overview and structure and now we can actually get some things plugged in okay and change them around cool yeah so as Billy said the molecules is kind of at the level where as a developer that's kind of the horizontal where I would go in and grab the stuff that I'm gonna be putting it in my well the molecules main organisms are kind of the two places because it start looking like you wouldn't want to like have a mock-up of like your entire application right like you're usually there's a level where things are complex enough where you're like okay this is the cutoff I'm not gonna have a story for you know maybe if you have a complicated app like I'm not gonna have a story for the entire sidebar that has all these crazy configurations I'll have a story for each line perhaps right so the molecules and organisms is where I went to reference some of the things that I needed for my application so I'm gonna switch back here to our code editor and I'm gonna take a quick look at so I already added some design and I'll kind of walk you through what I did so the first thing that I did was I added the design add-on to storybook so from what we have all that I did was just the following I just did yarn ad and the package is story book design sorry storybook add-ons and then design so I've already done this the the capital D flag is for development so this will be a development dependency so won't go into production but this package allows me to add design to these stories so I already ran this so I'm not going to run it the next thing that I did after I did that is in my add-ons I added this line so these two wines come with when I first install storybook this third line you can see that it's it's the register package from the storybook at a design so this kind of like superpowers my storybook instance where I can now reference this specific add-on and what it does is I'll show you right here for example in our in the story for our to do it looks a little bit different than before the only thing that I added is this third object here which is kind of the add-on object in in storybook and what I'm referee's the the key here is design and I'm referring I'm referencing figma and then I'm passing a URL okay so it's just an object an options object where I say okay use the design package use type figma and then the URL of a specific figma node and that URL would be in this case I'm using this URL which is this is the the frame right yeah so I have a frame selected and you hit share right here you are l to specific frame and so that'll be the URL that you want to use I know the web browser does switch but sometimes it's it's not as nuanced as grabbing the actual share and grabbing link to a specific frame so this is the link I'm using there and if I go back here well in in in that case so this is the to do so I'm actually using this one right the Rose one and what does that look like in storybook you can see now that if I go to my to do there's a there's a design tab here which comes when you install that design add-on I want to click on it it's gonna actually render figma inside a storybook where I can go ahead and zoom in move it around and essentially I immediately can see exactly what the design team expects this component to look like right so this is as a developer who has to constantly go into figma and kind of scour through looking for the specific thing that that I need it to look like this is super helpful because I just go in here and I can just immediately do an eye check okay that looks that looks right right this this kind of matches and we'll see form input same thing I can just immediately quickly do an eye check here okay that's why it's empty and when it's filled right so even though this this is kind of a simple implementation when your app is big enough this is incredibly powerful and incredibly helpful because it kind of puts all the things that you need to look at in the same place both from the developer perspective when you are doing this entire user flow it gets a specific state of a specific component then check it going into figma to find a specific thing here we can just both things are right here super easy to check easy to look at all in one all in one screen so that's kind of the idea so not only do I see kind of the most up-to-date but this is actually live so if Billy were to go into inputs and actually change something that would actually I can see it live as he types it right so it's very cool we're always going to get the latest version of this and it's using all of his design patterns and and his design system so yes it's leveraging figmas live in bed which are if you've ever plugged in their thing into notion or it gives you essentially a live view of their entire website since figma is web-based that's what they're using and do you have the buttons in there you so one kind of neat thing is so to get as great as figma is and it's great to get developers in there clicking around the prototype to get some stuff in there there's different things that you can do to sort of communicate things to the your development team if they're using storybooks so they don't even have to get into figma things that like so here I cheated because I made this earlier things like adding padding guides or margin guides or communicating different features in your design system they'll see those right away as they're being added so that they know because like in storybook I don't think you can actually go into figma and see sort of the padding elements like you could if you were in the CSS or the code view but you can communicate that with some nice nuanced overlays they explain like how things are set up different elements and what type well you know this is using the input font and different rules you can communicate those in the frame itself so there's really a big there's a really good reason to make sure they're everything's in a nice frame nice and clean organized and documented so somebody in storybook can get in there and it's not just a bunch of stuff floating around in space so yep you mean like the animation like the kind of the milliseconds to fade in and stuff like that that's a good question I mean we we usually usually I think that decision happens early in the project we're like I guess I'm not sure we we usually have a when we build out a component system these types of things are the first things that get built out and usually design is pretty closely involved in those first few components that are going to kind of set the base for the entire project so that's really not something that we use this for this is more for those kind of intermediate components that have multiple of these atoms where the the animation of those we could use using some of figmas prototyping but this is more for just kind of a visual check the animations usually are something that is talked about outside of outside of storybook I would say figmas like they're smart animation system is nice it's still pretty limited compared to using something like principle or even in vision studio that allowed you to set is it an ease in ease out allow you to move some of those parameters actually set specific second amounts I want this to ease in for this may seconds and then come out of that so like it's not that advanced yet so if we really needed to communicate a lot of likes very specific animation stuff we may still jump back to a tool like that or find an example out there that exists it's like this is exactly what we want there's plenty of CSS animation libraries that we can reference and look at so hopefully they add it soon and then we'll just have another to another part of this tool that so we don't have to go into another piece of software so usually if a designer doesn't specify most developers don't you don't really add any animations I do but most don't right yeah so let's see so yeah that's kind of you know one of the things I wanted to kind of discuss here today is kind of ask all of you like first have you all use storybook before and for those of you that haven't what is like what is your process right now for doing some of these things that we're talking about I just kind of wanted to open it up for whoever has just wants to kind of give their their input on this because for us it it really does does solve some problems when it comes to kind of building things that are constantly changing which happens a lot when you have clients that their expectations and the things that they need are constantly changing you might look at figma one day and you're like okay you take a pic you you take a mental picture and then you go and build it but then you go back and it's like oh that's it's not what it looks like now I swear that two days ago it was different this kind of helps you get that latest and greatest constantly as you're building so yeah so for those of you that don't use storybook do you have an alternative system or or do you who here has used storybook or use this storybook right now does anybody know buddies is it what do you guys think of the system and like the integration with Big Mama said MIT does it yeah yeah no but the I mean to be fair the or the the generated code in figma is it's not real I think it's like for people who don't know it's like a nice add-on like oh it generates code but like developers look at it like that's not that's it's not useful it's come it's like CSS and sometimes it's accurate but the CSS is like kind of you know the cherry on top of it's not really the component it's great when a designer has to build a website because like copy paste done so yeah but that that's a good point I think the day that fig my turn into code is the day that I don't have a job anymore so hopefully that never happens but but I think that that piece that CSS piece does not get translated into here so yeah I'm not sure if that's on purpose it it seems like this kind of this figma appear that they're using here is kind of purposely simple like it's they don't really bring much like you can't even edit or move things around it's it's it's almost like as a developer they don't really want you to touch your move things around so I'm not sure if leaving that CSS piece you can always click right here and it'll take you to that actual frame which is like pretty useful right so I have it right here the CSS code but I think that they exclude that on purpose just to keep it uncluttered that's that would be my guess right there's a cool design system management tool out there it's a little more robust that you could put live code your figma prototypes in it's called zero height I believe but it's like documentation figma assets live code it's more I don't like we have a design system and needs to be followed two hundred percent to the T and here's all the notes behind it and the history of everything which is web-based which is pretty cool too if you looking for something to help manage that as well I mean the editor is all presented as vector components so like everything in there can be turned into a shape if it's tight otherwise as a vector component there's people who've done entire vector illustrators and figma it's not built to do that but it can do that I don't know what is written in though I'm pretty sure that like it's just one yet I looked into this it's really impressive I think it's all what is it called I wish it doesn't let me inspect them but I haven't like looked into it too much but it's a I think it is like SVG's or about let me see if I can yeah they just don't let you like inspect it I mean I can go in here and inspect them but I was actually reading a bill do you wanna check the comments I was reading an article about how figma does their third multiplayer it's kind of like a quasi distributed system to do it where is the cheese over here I usually just right-click there we go yeah let's take a quick peek in here yeah so it's just a canvas which is the word I was looking for yeah so it's it's just who knows yeah right here right so the canvas tag is everything in there is written as you said using some simple graph you know you can draw you can put anything in there and animate it and using javascript and then yeah it's that I'm not exactly sure like how they I mean this must be a decision in order to be able to be compatible with like building all this stuff out like kind of the I don't even know like what are you talking about the vector the vector vector components it must just be a better way to do it than like using pure react is what I assume but yeah do you have one question from the chat it's an also one thing I really show them but assuming you can do it but can you specify canvas constraints that the component is getting rendered on so you can do media based layouts and verify overflow etc I know the I believe that if you want to go back to storybook I believe the clip canvas works look since just grabbing the frame so like if I move this off the actual clip canvas works but any of the and if I turn this off I think as long as it's still in the frame it'll still be able to go on the outside so if you're doing like let's say notes that are outside your frame for like a design system so this got this button I just moved out of the frame so it's no longer visible but if I bring it back into the frame even though it's above it if yeah so you can have things float outside of your frame but still be in the layer so you could have like some notes a status of the design so this could be like use this button but this could be like improved and then we could have a bunch of notes down below to communicate things we actually have a a reusable library that we've built out called our design system management system it's not very good name for it but has different statuses they you know doing frames yeah the DSM s ms so many PS MS that we can place and it has a bunch of stuff that can float outside of the frame so we can change statuses and leave notes and communicate different things using the the clip canvas on and off gets a little interesting when you have a prototype and you've clipped Canada's turned off and you like a modal show up and then it says like approved the tops off but hope that answers your question Blake we have any more questions from the chat oh I got I was referring more to media query based layout so overflowing long test and verifying that happens inside of a button let me see media query based layout so overflowing long text verifying that happens oh I say way to communicate that so I think like media queries like having the media queries I assume like like if we were to like how do we actually test for a our component or like if we want to show this component in a different state you can actually wrap your component so say like in your story you could create a test media query wrapper that has a max width of whatever and then you go ahead and render that instead of the to do so you would rather you would put to do inside of that one and that's how you would test like a state of you know in a limited with environment and then the Figment part is just there would be if that was needed there would be a design for that so yeah we'd probably put that documentation right in there on the screen different padding amounts how things would have just we've done a project before we're way to do it was like four different iOS or iPhone sizes screen sizes so we had to like document how everything adjusted and shifted accordingly so we did that manually because they didn't quite have the constraints in the actual components at that point a little bit but they didn't have like my favorite left and right and top and bottom so what also well any question yeah I mean there's there's a few cool ones I was going to show some of these so before I dive into that I just want to like if you just want to learn Buster book learn Starcom it talks about what Billy touched on today which is kind of how do we as developers [Music] interface with with with design systems so this is kind of the you know in the context of storybook how do we do that and there's some kind of some visual testing handbooks well this is not out yet but there's in the design systems they kind of talk about you know how to organize your storybook because you're gonna be writing the storybooks as a developer how do you kind of organize it thinking of these design systems yourself so and it kind of just walks you through as I said there are a couple of different api's out there to actually implement storybook we looked at the stories of API there is a newer one that I mentioned the CSF one I wish I believe is going to kind of be the like the new version but right now it doesn't it's not Universal yet so it doesn't actually work in all of the different frameworks so this is kind of the way that we can keep it so that whatever it is that you use this will work for you and this is still gonna be supported of course but but as for add-ons the design one is really I would say the most powerful one that I've seen the red book I was looking at some last week the the there's another piece that we didn't talk about which are the storybook actions which is not a an atom but it's like a built in thing where by toggling an action you could accept you could for example change a boolean in one of the one of the props so I'll show you so there's an actions tab here that I didn't put anything in here but you could define different actions and here we would see some switches that you can turn on and off that would for example show what to do when it's completed versus not completed and you could do that from the same story without having to generate you know a million different stories if you want to kind of compile some of those stories into a couple of you know two or three that have some toggles that can show you the different combinations that's a good way to test some edge cases right where you can kind of have a bunch of conditions that you can turn on and off and check all the different permutations of that so it's not an add-on it's that's built in but as for add-ons I mean you can go in here and kind of look at some of the stuff you can actually build your own add-ons as well so that's something that I definitely want to look into but there's a there's a cool add-on for like they call them nobs where you know you can map a numerical value say from zero to ten and as you move the knob that specific prop or value increases so there's kind of things like that there's like you know actions where say that you submit a form you can get like a little notification inside of storybook saying like this actually worked based on the conditions you had let's see I mean there's there's kind of a difference is there's some more layers of conditionals that they call backgrounds cold snap shots with jest so these are just more advanced uses but this is a viewport one right so this is what we're talking about so instead of building your custom wrapper where you like you can imagine having actions to switch from mobile to desktop where the boolean that you flip reduces the wrappers with to kind of simulate you being on the specific device I'm this plugin seems like it does it out of the box so it's so there's there's there's a bunch there's some more so these are the official ones from storybook and there's the community ones there's these are probably the most popular once some internationalization ones if you use react they're national yeah so feel free to kind of dive into this and take a look at some some of the cool ones this is the one that we are using the figma one so yeah yeah that's a good question we actually have them intermingled so the pattern that I use here is what we are currently using in the project that I'm working on we have a folder with the component name and then in that same folder we just throw that component story the reason for that is you know the component tree is already big enough that having another component tree that we have to keep in sync with the real one would be really difficult so instead we just decide to just keep one component tree and just have the stories be alongside the debt components because you can imagine if you move something from one place to another if you don't you forget to move the story then suddenly your story tree is like you might as well just throw them all in a folder right so that's kind of what what works what's best for us we have any other questions if not I think I think that's all we have for today thank you all for coming we'll be sending out some more resources some of the things that I've worked for us to get us up to speed on kind of some of these cool features of story book and did everything as well so it'll be up later yep they want to watch it go back like and subscribe all the YouTube things yeah it'll be up so yeah we will we'll send that stuff out and I just want to say again this is this we like JSF work and I'm not sure for Wisconsin your ex but this you know what we're trying to do is to have this be a community driven Meetup so we want to encourage whoever if you if you want to come up here and give a talk of whatever it is that you're working on as long as its react adjacent or you know we can be lenient with that we we want to welcome you to just reach out to us Damir to Jacob and we we can help you get we can help you get there if you if you have something that you want to share with with what the whole meet up we're looking for people who want to come up here we don't want it to be kind of had we doing it every every every month we want it to be kind of organic and everybody contributing so that we can get other perspectives besides kind of the stuff that we do here so and same thing with Wisconsin UX there's some wants to talk about sketchy I'd be great I know we only talked about figma so but like yeah just won't be there yeah you never thought it would be like the best thing tomorrow and then we're all gonna switch again this is the way of the world right so no but we definitely want to get more designers and UX professionals to come up give some talks or even students just to see what other people are doing and just like help a community that share as much knowledge as possible so reach out we can host it here or we can go somewhere else or if you know someone who has a talk and they'd be interested in us talking with them or something like that let us know - this is our first like collaborative talk but I definitely could see more of these in the future so awesome thank you [Applause]

Channel: Headway

Views: 56,177

Keywords: react storybook, react storybook tutorial, react storybook demo, react storybook examples, react storybook testing, storybook tutorial react, react storybook youtube, storybook js react tutorial, storybookjs, figma to react, figma react, storybook js, storybook react, storybook ui, figma react native, figma to react native, react js, figma prototype, storybook js react, storybook js tutorial, storybook js examples, storybook react tutorial, react storybook setup

Id: p2sZKAPOQXs

Length: 63min 46sec (3826 seconds)

Published: Fri Apr 24 2020