Design Workflow with Chakra UI and Figma

hello everyone it's javi and in this video we're going to look at one of the most popular frameworks for building modern applications it's called chakra chakra is a simple modular and accessible component library it's got everything you need in order to build react applications if you are new to my channel welcome my name is javi and i make weekly videos about product design skills practices and principles to help you build software products and bring your ideas to life there's a couple of benefits when it comes to designing with an existing framework like chakra one of those benefits is speed of execution meaning that you have the same styles and figma as you have them in code you're designing the real thing which means that you will have to spend less time later making any adjustments and at the same time you have a chance to be speaking the same language as your engineers to show you chakra in action let's go ahead and design something together we're going to create a real sign-in form prototype that's going to be production ready and we're going to be working with some real product specifications that i myself have used in a recent project there is four things that our prototype sign-in form has to be able to cover the first one is that the user has to be able to authenticate via email by inserting an email and a password the second is that we need to be able to show interaction so we need hover and focus states the third one is that it has to be responsive across all of the breakpoints that we've defined in our project and the fourth and final specification is that if the user gets the email wrong we need to throw an error validation that specifies to please correct the email in any way appropriate one of the challenges as a designer of using the chakra framework is that there is not a single official resource on figma from which we can extract the styles and the components in order to be able to use those in the design so what you're seeing here on the screen is my attempt to bridge the gap a little bit and as you can see i'm working on something that will contain all of the styles of the framework nicely organized such as the colors the different typography choices the shadows even the radii specifications the spacings the breakpoints etc as well as the components i've already started to document things over here it's a work in progress but i will be either way putting the link in the description below so if you want to catch up on my work in progress feel free to use what i've already created so as you can see you've got a lot of button variations and the things that you're seeing here is what we're going to be actually using today to create that form prototype if you head over to the sigma community and look for chalk raw you will find that there's an existing resource created by some awesome people at a design agency called move it it's got also most of the styles and components and so on the only challenge with this one is that it hasn't been updated in a while so it's not going to be leveraging the auto layout and the variance and all the cool new stuff that fakem has been introducing over the past months and that's what i'm hoping to be able to achieve as well so coming back to our chakra ui resource here let's have a look at the form page which is where our project lives at the moment i would prototype this for you i've actually prototyped it here as you can see the problem right now is that my computer is being very very slow with everything i've got going on so i'll let you do that all you have to do is click on this layer right here and then click on the play button and just follow along but just for you to see it's got all of the interaction states here so this is the email hover this is the email focus let me get rid of these for you to see the whole thing password hover the password focus so essentially it's got the whole sign and flow in terms of those interactions and then at the very end there is also an error validation state as i mentioned in the specifications to be able to point out that for example in this case the email is missing an at so we need to be able to throw that error validation cache so the user can make the right adjustment so that's that and then at the bottom of it i've created a couple of additional break points and as we scroll down as you can see we're just showing how that form is going to be adapting to the different breakpoints all the way down to a mobile friendly size so now that we know the whole scope of the project let's go ahead and replicate it ourselves with what we have from chakra the first thing that i want to do is bring up the break points right so if i come over here to my theme you can see that chakra already gives us some specific breakpoints that we can use for our projects let's go ahead and actually just start with excel i think that will be enough for this project and what we can do is just copy paste that come over here to our form actually i'll create a new one here called form2 and i'm just going to copy paste that breakpoint screen so this is 1280 pixels width and the first thing i want to do here is because i know we're going to have a car on the top i'm going to change the background so there's a bit of contrast so as you can see all of it is being handled nicely with the styles that are implemented in the file we are not going to be using the border or the shadow effect so i'm just going to be removing those i only had those specified because if you'll recall here i'm putting white on white so it's just a way for me to be able to differentiate those break points but we don't really need that for our form here so let's leave it as it is now i can come here to the color style and as you can see you've got all the colors here nicely defined if you want to have a look at those more visually you can come over to your theme and you have this whole breakdown here of all the colors in your project so going back to form two what we're actually looking for is going to our gray section here and we're going to go with 100 and that should give me a good enough contrast now we know we want a container in the middle right so we're we're going to be able to put all of our elements so let's go back to our theme and chakra also provides us with some defaults for the different container sizes so i could come here and look at these and think okay i think 640 pixels is going to be plenty for our container so i'm gonna come back to form two just copy paste that make sure it is centered in the middle and setting the constraints to center center and this looks great i think we can even leave in this case the stroke and the shadow because it helps us differentiate this container from the rest of the screen and it gives it again a very nice contrast effect so there we have it we have our background and our container already set up and these are all just defaults that we are having through the chakra library next thing we want to do is start creating this form actually so i'm going to make this a little bit bigger i'm going to hold my alt key so when i'm dragging the upper side here it's going to actually drag top and bottom in the same amount so let's just keep it at 560 for now and if we look at the form that we have here i have a logo just the one that i've used for this file and that is a separate component that is actually part of the cover page so it's not going to be a logo that is officially included in all of the components package but just for this file i added the logo here so let's just go ahead and reuse that for this project and i believe this is a 64 by 64. so copy paste hold my alt as well as the shift key so when i'm resizing down it's all going to go down proportionally let's bring it all the way down to 64. and now we can drag this up until let's say there's a 64 spacing from the top now one note about spacing is that you want to be sure to check out the spacing that comes built in with the theme so if i come over here to my spacing you can see that these are all values that are already hard coded into the theme itself right so it's important that you try to adhere to these as much as possible because then for the engineering aspect that's going to be much much simpler to be able to just reference these values that you see here on the naming part and then in code this will automatically output the size and pixels that you should be expecting from each of these at any point when you deviate from these values it means that either you're going to want to create or add an additional specification to this spacing or it means that you'll have to actually hard code that value outside of your theme specs which over time is going to be hard to maintain so as you can see we just use 64 pixels which in this case would be the 16 value so going back to the form here there's nothing we got to do there regardless just make sure that you're using that spacing appropriately and now if we have a look we can just grab this text size and as you can see this is just a simple text layer that is going to be leveraging one of our styles so heading large and then the large version of it if you come over to the theme and you head over to typography you can see that for heading there is heading large and heading small and if you just look at the tiny description there you can see why that is the reason being is that the heading large is being used across these break points and the moment that screens get a little bit smaller let's say making it over to the medium or small break points you are reducing the size of the heading by a little bit and that makes sense because you don't want to have huge headings on your phone and so you'll see that as we bring bring the form down we're going to be adjusting the value of our heading so coming back to my form here all i have to do is head over to the assets panel look for form control which is right over here drag it over and now i can place it right here in the middle and also make sure that the spacing with respect to the title is one that we can use i'm gonna center this and now i'm gonna change the label to something more appropriate in this case email address and also put an appropriate placeholder so something like this there we go now we want to put an input field also for the password so hold my alt key to duplicate bring it down here and now i can change the label to password and we can actually get rid of the placeholder the text will still be there as you can see and the last thing we want to add here as we saw before is a button so all i have to do is come over here drag the button and now we can leverage figma's variants to get to the right kind of button that we want for this project so we're going to change the size over to medium so we have a nice 40 pixel height the variant is still going to be solid you can see that there's a couple other variants here that you can use based on the chakra framework and what i want to do here is actually come over to my color scheme and just so it matches nicely with the color of the logo i'm going to select the teal color scheme that looks pretty good and i'm going to make sure that this spans across the entire width here in the same way as our form controls and i'm gonna bring this at 16 pixels to be consistent with this spacing right here and now all we have to do is change the button text to sign in and that looks pretty good so now the last thing to do is have a look at our spacing here this is 64. we want to bring this down to 64 as well one trick that i like to do when i'm doing spacings like these is just look at the spacing that i already have and then i can just select the whole container come to the height here and just do something like minus 124 plus 64. so that will give me exactly what i'm looking for without having to awkwardly adjust the layer on figma now i can select this whole thing put it in the middle and if we want to be specific i could also come here to my layers select all three of these do a shift a to do an auto layout and we can call this form and that's going to come handy later once we get to the error validation stage so we're just going to center it and that should be good to go now if you want to replicate all of the interaction design at this stage you will have to create a frame for each of those to be able to show how those states are happening as you're animating the prototype as i did so i won't be doing it in this video but just so you can see it it's really really simple oh and by the way we can come back here and change the button styling to actually go to a disabled state so that only once the two input fields are filled the user will be able to actually continue in the sign in process but what i wanted to get to is come back here to the form page as you can see i've changed the titles of the frames to show you what exactly is going on in each frame and if we come over to the component itself the only things that you have to be changing is coming down here to the input component so let's just make sure that i'm not blocking you here so you can see it properly in the video so coming down to the input component and as you can see it has a state management variant and you can change this to hover to focus disabled so that for any given screen of your prototype you can put the appropriate state right so if you had hover you want to put the hover state if you want it to be in focus which is what happens next what happens in focus is that it's just going to apply an additional effect so as you can see i'm in my input component right now it's in focus and it's applying the outline specification here for my shadow and that looks pretty good and then we're just doing the same thing but in this case for the other input field so once you've got that and once you prototype it you will pretty much get a very nice animation of that whole flow and for the button the two states that you want to have i think in this case i'm already in the focus state yep so this is a focus state with a much darker teal and if you come back here you can see that i have a screen also for the hover so in this case i guess we're using yeah tl600 which would be the color for our hover state we have seen now how to be able to create the interaction designs for all the different states of your components now we can do an extra one here just to show you how easy it is to be able to do that error validation if you come over here to email address let's say that we will change this to 100 opacity and let's say that i put this email but i forgot the at right and for the password i had actually copied a special character so let's go ahead and bring that over copy pasting that putting it a hundred percent opacity and it's previously at forty percent because that is the appropriate value for placeholders in chakra so just for you to know you can change it back to 100 once you're here theoretically now that these two have been filled you can come over to your button and point out that instead of being a disabled state you're going to want to have it as base so now it is active and ready for the user to click and if you were to do that you would expect an error validation being thrown at the user right so the way to do that so far and the way i've defined this component there is a caption that you can turn on through variants so let's go ahead and do that as you can see everything else goes down and that is because of the way that we've used auto layout for this form so you don't have to worry about those tiny adjustments as you add things to the form right so what we want to do here is and we're going to do this manually for now because i don't have the error validation styling but it's going to be really easy because all you have to do is come here to the stroke look for red 500 which is the one that we will be using for our error validation and so now that becomes much clearer that something is wrong and you can come here to the label and also change it to red 500 and then if we'll just come back here to the form so we can check that out as you can see it's exactly as we were doing i can just copy paste this copy here which is just some text and i can paste it here and that is exactly the kind of design that we wanted for our error validation so now we have that specification covered and what's left here to do is to because we have a little bit more of content and we want to keep the spacing consistent i'm just gonna make sure that that 64 pixel difference is respected so i'm going to again come over to my height here this was 35 so i'm gonna do 500 minus 35 plus 64. let's not keep it centered because that would just be too much movement on the screen we can just bring the container a little bit down and that should be pretty good for what we're looking for here and now the last thing to mention is that we have additional break points that we have to be able to cover and how the container would respond to those so as you can see all i've done here is i've been using the break points that tracker has provided us by default so you can grab those from the theme so if you come over here to the theme page and we started in excel right so we would start off here by just picking the large version coming to our form 2 and putting it down here right so let's say 100 pixel difference we would start by making this in our familiar styles so i would pick gray 100 for the background get rid of the shadow get rid of the stroke and the moment that we reach the large break point we're going to be expanding this container across the entire screen so what we want to do is copy this and paste it here we're going to for now keep it in the middle and what we're going to do is while holding my command key so that nothing internally is changing i'm going to drag the edges all the way to the sides when this whole thing gets animated and we actually go from one break point to the other i don't simply want the box to disappear and for the background to take the white color i want the container to literally span across the screen so that is why we are keeping this layer here and if you look at my final version here one of the things i did is i changed the layer name so that it's a bit more appropriate to point out what is a breakpoint and what is the container because otherwise you're going to start having a couple of different sizes of things across your layer structure so for the engineer it might just be a little bit easier if you have a bit of a specification of what each div stands for in your design so you can do that as you are getting closer to production in this case let's just continue with the example one of the things that i did here for adjustment is i brought this up a little bit over to 160 and i chose 160 because again if you go to the theme and you look at the spacing you will notice that there is a value for 160 that the engineers can then very easily adopt just by using the coded value so sticking to our spacing all the way the constraints look all right and now as i bring this down one more break point there is one thing that happens that we need to account for so first of all let's grab our medium here head over to form two copy paste it here and we can change this to grade 200 again sorry not grade 200 grade 100 and now we can remove the border remove the shadow and one thing that i missed here actually in the container is that the container by default has 4 pixel radius which we don't need in this case so i'm just going to manually remove that to make sure we don't have any awkward border radius on any of the edges and i'm going to actually copy paste this here the small container and bring it over to my medium break point and i'm just going to resize it and as you can see everything will adjust accordingly because we've done the constraints right from the very beginning and one thing to point out as we mentioned earlier is that if you're looking at this header you can see that this is a heading large style which if we looked at the theme earlier and pointed out this heading large is appropriate for a large extra large and two extra large break points the moment that you go down lower than that say to a medium break point you have to make that change to remain appropriate with respect to the chakra framework so if i come over to form two and i'm looking at this and say okay this is a large style so all you have to do is look for that large style in the heading small section so in this case this one is the one that we're looking for and then just make sure that everything else will adjust accordingly so that is all you have to do and now just to show you the remaining breakpoints i can come over here to the final version and just show you how the small breakpoint looks like so this is literally just resizing the frame all the way down and you will see that the form stays in the center and i created one extra variation of the small break point at 375 just to show you that at some point we're gonna have to resize the form so that it maintains a 24 pixel spacing from left to right at some point the width of our form is going to be larger than the available width in our screen and so i use this break point to point out in a very visual way that we need to be able to preserve the spacing on the sides as the resizing is happening and if you will look at the layer structure i've actually made all the adjustments here for the form layer itself and its auto layout to make sure that as you are moving within this breakpoint you can see that the form width itself is adjusting accordingly which is what we wanted to achieve at this breakpoint so that is just a nice way to be able to point those things out when you get to smaller breakpoints like these and now that we've covered all the breakpoints i believe that's a wrap for everything that we had to build here so as you can see all we've done is use the chakra framework defaults four breakpoints four containers four text styles four components to be able to create a production ready sign in form and we've done so with interaction design error validation and responsive design so everything is covered and once you show this to your engineers and they start inspecting this they'll be able to see that everything that they're looking at through the inspector are going to be values that are already part of the theme so they don't have to be creating or hard coding any extra values and as they hover through things like text styling and components everything is going to be there so that they can create these components exactly how you've designed them and that's going to lead to a lot less adjustments a lot less modifications down the line and it's just going to generally be much much easier to maintain from both design and engineering so that is it for today i hope you found this video useful if you did make sure to hit the like button and let me know in the comments below what you thought hopefully within the next couple of days i will have introduced more components into that figma file so that you can leverage as much of the functionality and extensibility of the chakra framework as possible right within sigma and we'll be using that file in the future also to be able to build future designs and bring those designs over to code as always stay safe and i'll see you in the next one

Channel: Javier Alaves

Views: 9,661

Keywords: figma tutorial, design workflow, chakra ui, chakra, design system, design components, figma components, figma styles, ui design, figma design to code, design to code, ui kit, design react components, design process, figma ui kit, figma ui kit tutorial, figma variants, figma responsive design, figma breakpoints, figma prototype, figma sign in form, sign in design, design tutorial, ui design tutorial, figma tutorial components, figma components states

Id: Gm7qHn9Y_Ro

Length: 25min 24sec (1524 seconds)

Published: Wed Feb 17 2021