Build a Figma Component the Right Way | Exclusive UI Collective Event

all right we'll give everybody just a couple minutes and then we're going to build the one input for all inputs or to rule them all um live and we'll see if we can do that in 45 minutes or less so uh probably going to go pretty quick um you're going to probably be staring at the side of my face for most of this session as I look at my larger screen to build this U but it should be a ton of fun so we'll just give it a few more minutes any questions before we get started all right let's get started if anybody can join they can afterwards I'll try to keep my eye on admitting any participants uh but we'll get started so one input to rule them all first we're going to start with just a bit of an introduction I'm Michael KK I'm the CEO and co-founder of XDS experience Design Systems uh and also the co-founder of UI Collective XDS sponsors a lot of what UI Collective puts together we have Kirk who is a senior product designer and also the co-founder of UI Collective he's not here today um so I taking care of all the introductions and recordings on his behalf we got a lot of initiatives on the go just reminders for everyone we've got our education that we've relaunched uh for UI Collective where you can see courses on building inputs and other components like you're going to see today uh we've got our portfolio Pro that Cur recently launched it's a new way of looking at portfolios for designers focused on questions that help designers write content to support their portfolio the questions that we have in our library are hand curated by Design managers and design directors who hire designers on a daily basis uh so it's really meant to help answer a lot of those questions that are common in terms of uh design managers and then of course we've got our YouTube channel make sure to subscribe uh Kirk's got a bunch of videos that he's going to be launching over the next uh couple couple of weeks as well all right we'll get started on the uh input um okay so I've got a couple of pre components here which I'm going to show you how to do these are otherwise called atoms in certain cases um but that's really what's going to make this input super powerful um I'm going to turn off my camera so you guys don't have to see the out of my head the whole time um but feel free to interrupt raise your hand or um use your voice voice just because I'll be staring at my other monitor let me know if you have any questions so the thing that we're going to build here is this input and one thing to consider when building large complex components is about its children components or those atoms so in this case we have a label component we have pre and poab components and we have alerts that were going to be all integrated into this component um this gives you the ability to have a large property panel here where you can choose to hide or show um pre and post tabs and pre and post Tabs are really good for defining a field so it could be this field is defined by a percentage or it could be a currency or in this case a URL um and then you may want to use an icon in place of text um but just giving those um as many abilities as possible and then things like being able to show or hide your label and then your label will have uh different properties inside of it and uh yeah so we're going to get started so the first thing we're going to do is build our our label component so just type in label and then we'll choose one of our type settings we'll go with body uh medium semibold perfect okay we're going to put an auto layout on top of that um so that would be our Auto layout frame we're going to add a few more elements to it so we're going to also create optional text and then you can create a required element so we're going to create the required element we're going to make that red um sorry should be grabbing from my kit uh then with our optional we're going to grab um small and we're going to change the color to text disabled make sure that we select our color here okay and then we're going to add all of these things inside the same component don't worry about the order right now so we can refresh all that type of stuff so now we've got our label optional text and required depend on your design Aesthetics if you want to you can put your required uh right beside your label um I've started putting it actually before the label the reason I think this is good From usability perspective it lets the user know that the field is required before they they start reading it versus reading it and then realizing it's required um but for now the general usage is after the label so we'll go with that for now we're going to remove all of our padding perfect and then we'll add a small Gap padding of pixels excellent so now we've got everything that we' want in our label uh we're going to turn that into a component call it label and then we're going to do a few little property systems so we're going to add a property for the label itself label we're going to add a property for the optional text and we're going to add a property for required actually sorry my bad we don't need to do that in this case and I'll explain why in two seconds get rid of that optional now because one will show and the other one will not it's actually easier to do that the way that we did it up here which is just creating three different variants so go to main component add variant add variant again so what we're going to do is in this case we'll leave the required in this case we'll delete optional end required and then we've got our optional here with that required these are three different types so we're just going to call this optional we're going to call this none and then we're going to call this required okay and then change our property here to Ty so now when I drag and drop my new label over here I have the ability to say none optional or required um all of which swaps out those elements and I can change my title to input without having to break anything so that's the first part creating our our label okay the next is uh we're going to want some hint copy now you can make hint copy into its own um its own component if you want to it's more of a choice thing in this case we're not going to but I know if you're thinking about developers uh developers will uh create hang copy into its own component um we do that and then we'll start to wrap this into each other so we've got the two pieces here oh I forgot we also have a tool tip um so if I want to add that tool tip into my component here simply grab it in uh and then we'll add a property for Tool tip uh we can easily just paste that into each component just like that uh and then you can hide it by default if you want to or not but then all of a sudden here you have the ability to show un hide your tool tip if you if you choose to do that uh in this case we probably want our required field to be the left of the the tool tip um excellent so we'll just hide those by Def default perfect so now we've got our input we've got the ability to show on hied tool tip and our different states we have our hint copy and now we'll get started on creating one of our pre or post tabs um okay so in this case I'm going to grab one of my icons from here okay and then we're going to grab a text element for now we'll just copy over our our hint copy textb will change the color okay these are couple of the elements we're going to need to build out our our pre and post house that you see up here so in this case what we're going to do is create a shape okay uh we're going to open up our corners and put a four pixel on the top and bottom on the left hand sides to mimic this we'll grab our color we'll grab a surface uh not primary sorry secondary perfect and we're going to um put our icon over top of it we'll grab our elements and then we're going to create a component out of that um okay and then if you want to you can add a border uh specifically to the right of this if you choose to it's really up to you um but I think that is everything that we need and then we can add all of our paddings on here if we want to so so um we'll add Auto layout to this element and you'll notice that kind of messes with our our shape one thing that you want to know is that with the uh input usually your shape is your background color uh in this case you actually want your shape not to be your background so it needs to be its own element um so second drag that into there okay then we're going to turn off the surface because we have Auto layout obviously these things are going to push against each other so we have to put um OD there we go sorry selecting the wrong one um we have to put in uh absolute positioning so our absolute positioning will move up and then push that to the back ground so now we have our background shape which has the corner turns or rounded corners on the left and on the bottom it's a shape so it's not the background color of your auto layout um it has to have absolute position I'll explain why that's important in a minute um you want to make sure that um you're not clipping your content so you can see the outside of it and what you want to do in this case is set this to minus 8 and I'll explain why that is and that took me a long time to figure out um and then we want to make sure that we set our Auto layouts to 8 pixels left and right um you want to make sure that this object in your background is set to left and right which means it will scale with your element so as I move here and change my padding left and right to 12 now my background shape will actually expand with my um with my container and then I believe I just want to double check check on this one what my vertical padding was so 12 0 12 12 8 so open this up Zero 12 12 perfect uh then what we want to do is grab our icon add a um property to show and hide icon um or it you can create different types so in this case we had we can create a second variant we can go to main component add variant uh we can grab our copy in here and we can just simply replace our copy with our um where the icon was then you can grab your copy at a copy property for just that copy uh we can change this to a this is really good when you want to add things like percents or if you wanted like I said add currencies that type of stuff um so that when someone chooses it they can have that option so we're going to say type in our component uh the default is now going to be called icon because that's the type of uh property it is and then our second one is text okay so now when I have my example over here I should be able to switch between text or icon and when I switch to text I can edit this to be like a URL everything's expanding as expected which is perfect um we see a little bit of a gap down here which means that my object should be uh top and bottom as well uh these constraints help the uh background color grow with the uh container we go that's good perfect okay any questions so far any raised hands just check in the chat for a second okay perfect so now we've got our uh pre- Tab and basically building the post tab is a a duplication of it and honestly just rebuilding these things but going the the other direction if you want to have an option in this case we have an action so sometimes pre- tabs and post Tabs are they're disabled uh they're disabled when they Define the field type so if you're defining like I said a currency or a percentage something like that and you can't click on it it's just there to help people know the the input Ty type then it should have a disabled look and feel to it versus sometimes people use pre- and post tabs as a split container which means that those pre or post Tabs are actually an action item um you see that when you see a button basically it's inside an input so it looks like it's part of the input that can be to activate a calendar or it could be activating a search so sometimes uh you may end up having a alternative version that uses um your action color just to show that it is a applicable item within the the input itself any questions so far so that's preab and perfect and then if you want to um to do the opposite you can just simply drag and drop that um rather than doing it twice and you would call this one post Tab and then when you're doing post tab obviously there's a few little things in this case you want to um move your object to switch it so you're going to grab your corners and open those up mixed on there we go why won't you let me change that right now gives me the option to it's really odd one of thing I did forget to add is on your icon version you want to add an instant swap for Icon this just means that when you do switch it from text to Icon you can now switch your icon and grab another icon from your Library without again breaking the component um so we can easily do that swap I am not 100% sure why it's not letting me swap these things out which is really odd give me a second all right just because it's not letting me do it we'll just rotate it around for now move that to zero and we'll do the same thing with here rotate that around and then we've got our post Tab and our pre- tab excellent okay now we're going to get into how to put these things together into a a label or sorry into an input so the next thing we want to do is build our field component our field is really the component that exists without the pre- tab or post tab um so we want to use something like placeholder copy copy uh we'll grab an icon because we do want our um field component to also have the ability to have icons as well so we'll add Auto layout to that grab the icon put it on the end this is now our field component uh we'll make the top and bottom padding 12 We'll add eight to the outside and we'll make that into a field component um this is really good if you want to build a simple input um that doesn't have pre or post tab so often field by itself can be its own uh its own element or its own component so if I show you right here give me two seconds I'll go down to our library here is your field component so field component is basically an undefined input so if we grab an option up here you can see that it has different states hover Focus disabled um it has the ability to have a its own icon so this is just another way of adding an attribute that says this is you know to put your email in uh it's a little different than a predefined or pre- tab or post tab of an input it's more just an identifier to help understand the input type uh but it isn't usually a reflection on the um the preab and post tab they're not usually used at the same time so let's go back up to the training for a second okay so here's our field uh what you want to do at this point is grab each icon and we're going to make those into instant swaps so we're going to have icon left and then we're going to have icon right okay that's your instance Swap and then you're going to want to allow the ability to show and hide icon so we're going to go icon right now they can't have the same name um so if I hit create property what you're going to see here is instead of saying icon right um because you can't have properties with the same name it automatically added a number uh to the end of it so what we usually suggest people do is the visualization to be able to show or hide the component is the parent right because whether you can change the property of it doesn't matter if you can't see it um so we will often put that as the top one and then what we'll do is we'll put in um an arrow or uh something online show that it is a child of that component so you can say icon right and then an arrow uh pointing down to show that it's it's child of of that parent um you can also go into grab your emojis I usually use the arrow see usually it used to be one my easy wants to grab there you go so we usually use the down arrow in this cas case right so it shows that it's an indent or a child of of that item so it's the same with uh so here we have our icon WR show and hide as well as the attribute and then here we're going to do the same thing we will add icon left of course it's going to have the same issue it's going to say that it's numeric oh we already that well that was right grab that put that above here rather than going back and trying to get my emoji we'll just throw this one in here perfect and we can change that to ion left then we add a uh content property or rep placeholder okay so now when I create a duplicate of this um I have the ability to show and hide my icons and you notice that this child then disappears if I hide it if I show it here I can then choose choose a different icon I show or hide the icon on the right hand side no problem and I can now change my placeholder to me site.com if I want to do an email let's say so that's kind of how you want to build your your input field by itself uh before you start adding the the pre- tabs and post tabs any questions no just some awesome parts thank you okay so the next thing you want to do is start putting these elements together so we'll take this component uh we'll take our preab we'll take our label and our hint copy all these things now come in together okay so we're going to add an auto layout to these elements we're going to add Auto layout to these elements and then we'll start start putting this thing together so um in this version of the field we're going to hide the icons just to simplify which will hide it in my versions down here uh we want to make this top left aligned um we that works so we've got our input which is fine we've got our copy which is good and then we've got our field component now you notice I didn't put a border or or anything around our field component um that was on purpose because we're going to wrap that border around with our preab so we're going to bring pre- tab into here we're going to wrap preab and field into its own Auto layout we're going to change that into a horizontal in this case we'll call this our input so we're going to add some attributes to the uh label itself so that you can show or hide it properties is not there at the moment okay so we got our hand copy oh it's because I made it into a component sorry oh my goodness more coffee um okay so now with our input here um you can we're not going to do an instance swap but we are going to allow you to hide the label or show the label okay and like everything else we want to make sure that we create a version over here a copy of this just so we can start testing elements really quickly um one thing I like to do is set up my input so that um you can predefine whether the most common one would be none so that if anyone grabs the component they can edit the property of the label but um the default States what you most commonly used therefore in this case not required uh the other thing we want to do when we grab this is we want to make sure that under the properties we go to nested instance and I'm going to select each one of these this means that when I go to the parent here if I hide the label all the label properties disappear if I show the label here's my label component and here's it's nested properties I can still make it required I can still change the text to email and I can still add my tool tip if I want to so the beauty about this is as it gets bigger um all these properties are EXP osed but if you hide the child component um then all of its properties disappear really quickly so now we'll go to our hint copy obviously we want to let people be able to change that so we have hint copy uh we're going to set it to fill which is fine so now if I go over here I have the ability to change that copy to email l contain I don't know it could be business URL uh business or must contain that's something like that just again trying to help users so they don't make any any mistakes in those cases um our Gap padding is set to um 11 right now we'll switch that to four which will tighten up everything um and now we've got our input that has a good label component and hint copy component but we want to we want to make sure that we can hide that H copy as well so you will create a property for your hint copy and then now perfect I can hide it or show it you see some issues with the ordering here like I said always want to make sure that the ability to show or hide an element is above the ability to edit or swap out that element so if you're going to edit text or you're going to do an icon swap or an instant swap that should always be below uh the attribute or property to show or hide that component so now if I hide it that dis appears but I don't see the jumping uh that I was seeing before okay so now we get into our got label hint copy andp put okay I've got an extra Auto layout that I don't need so I'm going to get get rid of that we want to keep this as clean as we can um so let's make this oh move this down for a second um just gonna undo those for a second really quick so here's label and copy input is right that okay that's fine so if you see on the layers here I do want um a auto layup specific to the label and the copy H but my um input shouldn't be in that auto layout my input should actually be down here so they're two separate elements um that should be vertically stacked um just so I can affect them differently right so this one has its own settings in terms of paddings or margins and gaps if I want that to the object itself has its own version so I can say that I want the gap between hint copy and the input field to be larger or smaller than the gap between input here and Hing copy so for now we just want to keep it standard verus eight um but now we've got our input okay so we have a few little things to deal with on the input side of things one is the ability to show and hide the preab so let's add that attribute in here uh and we're going to call this preab okay so if I walk over here and I go to my my ability to hide preab that disappears and my field element exists which is good I have access to all my field attributes I can add an icon I can make the icon disappear and I can still change my placeholder to uh me at website.com okay so all of these elements are working there's still some finessing on the layout side but we're getting pretty close so one issue we have is that our preab is kind of sticky out beyond our elements you guys can see that um so all we're going to do is force this element in uh so that it aligns to the left and we're going to reduce the gaps so we're going to set our Gap to uh just going to double check that one for a second find field prab post tab field element it's set to eight that's right okay retab set just double checking again this took multiple tries the first time to get this accurate um so I'm just checking to make sure that everything is consistent with how we originally built this it has a padding of eight on the side this should have a pading on the side it does okay so now this input this Auto layout is going to become our identifier in terms of um adding a stroke to it so we're going to create a stroke uh we're going to grab one of our Colors Let's go down to our borders we'll create an action color um we're going to add Corner radius of four um which is starting to look pretty good minus our input placement um so we've got a height of 44 on this and our preab height is 40 um so we're going to set that to a rather than hug or uh anything else we're actually going to preset these to 44 so they should be the size of our inputs and then we're going to change our alignment to centered so you can see what I'm doing over on the left alignment is centered um but tab is going to be preset to a fixed height of 44 which is our standard so now you see how this is starting to align um in this case it's one of the few times that we're going to put the border on the outside so you can start to see how that's now moving around the object and then we just need to move our preab in uh which should uh be adding and padding here of no that's not where the padding goes that work sorry there's because pre- tabs have to be able to disappear and still showcase their padding I just need to double check where that object exists background Define field set to fill width is fine Corner a is fine top alignment eight and eight this does need eight which is fine that gives it in space perfect new would be a small variable so now we've got our alignment which is good we've got our preab which is fine um we have a little bit of extra space on this side on the left hand side um but that's easy enough to to change up we simply just remove that out of this object and then that now seems relatively standard in terms of its placement so now if I go over here I have the ability to show and hide my label when I do my label all my elements are still here required non optional so my child component for label is working as expected U my hint copy is working as expected I can change those elements I can hide my preab and show my preab and when I hide my preab it disappears in my object still stays standard um so that when I grab this my field component it it doesn't add any extra space which is why we had to do all of that extra padding so when you look at this object here this extra padding that shows up outside has to be able to disappear um between well being relative to the space between your input field here and your object um your pre- tab I know that's a bit confusing um again we have this as a download so please feel free to uh to access it it's one of those kind of tricks where you have to um position something in a negative space to make sure that when it disappears uh you're not left with extra space the extra eight pixels that you would have otherwise and then I think we're pretty good uh I can change this my object should be larger or smaller make this bigger with copy so it's always good to be testing all of this that extends the way you want it to um I can still make an icon left show up which is perfect and it extends so everything from a responsive perspective is working so now we've been able to build our pre- tabs um I could throw a post tab in but there's not a lot of time but you've got your pre- tabs post tabs uh your field component um your label component now the only thing left to do is start to build out all the different variants of those elements so here we simply go um go to main component add variant so this would be my default um and if I wanted to create now an error one um or a feedback version and we do have just enough time I hope um now I can go down here I can change my border to a success border so now if I go over here I can go okay show me the feedback version um and you can make one for each one so this doesn't have to say feedback it could be success um and this would be State um but what's missing is my alert component so if you've built an alert component that's ideal um you want to basically go back grab your alert asset here and then you're going to copy and paste it into this component layout okay wait a make this a lot bigger so you can see what's going on now we're going to do a few things we're going to obviously this isn't going to be a primary it's going to be in line uh because the version that we have going on is going to be success um it's going to be set to not fixed fill grab my example move it over here grab this over here so now I can have my alert in in with my component um one thing we also want to go back and do is uh make sure that the Pro nested property of our childhood the alert is showing so now when a user selects this um they only will see it when they go to the success version so if I go from default that's fine soon as I hit success I also have the ability for the alert uh to show up you may want to make it another attribute where they could show or hide that so we can say uh notification uh is true so now if they want to they can hide the notification or show the notification if they do they can show the notification change and say uh you know email success email it's awesome there you go so now you have the ability to also add in your notifications so as you look to add more things into your input component uh you would simply duplicate this uh if you wanted to create an error version you would grab your border you would make your border error you would grab your input you would default it to error and then it's pretty simple to realize that uh change the state to error and then boom I've now created a error version of my input and the beauty about this is you're using the best benefits of all the children components right so I don't have to create a bunch of different alerts I've got my alert that has my error my warning my success I can simply choose the attributes I want to show in the current state of that component um so it makes it a lot easier when you're trying to build out large complicated components to be able to have all of these nested children put into them uh last trick before I go is you obviously wouldn't want these pre- tabs and post tabs to be published as part of your design system um if you haven't already learned this uh it's a good trick you simply add a period before uh your component names on your left hand side and then these items will not get public with your library um only the input component will get published with your library just do that um that being said you also the period will automatically show up here if you want to keep it nice and neat um I then actually go back and and delete the periods from here just so that people don't see them um and when they look at the objects themselves um see if I select this you can see the period perod here that's a bit weird um so I just need to go down to my error component and then the periods here and then perfect they will they will delete on the next refresh so if I reset all changes you'll see that the labels now and the preo pre- tab don't have periods which makes it a lot neater uh from a design perspective um obviously this one still needs to be set to fill container if you want it to it depends on how you set up your design system um sometimes you want the elements to grow inside uh with them as well but that's just why you always have your copy over here so you can always be testing uh your components and I think we are at time that is how you build a complicated input um I'm just going to run you back through the input itself um in the design system that we have is built um it does get pretty big but it gives you a ton of options uh to be able to do this um literally turning one component I believe this is into almost 64 variants by the time that you're done um so you can have a pretty complicated input and field but they're really easy to build like the input in this case because of all the children were built to build my input component that's all it took right because I had rebuilt the field component here to have a defined field type and a non-defined field type or a default field type I'd already pre-built these pre- tabs and post tabs which means making this became far easier as you start to build more complicated things um once you have these field types and pre and post tabs stuff like that makes it really easy to build selects or dropdowns makes it super easy to build date Pickers time Pickers any of that type of stuff because you're building your input relative to all those different form elements that you're going to be looking at all right so that is what we've got any any questions

Channel: UI Collective

Views: 1,624

Keywords:

Id: 1X5EZrUBGcc

Length: 40min 8sec (2408 seconds)

Published: Tue Feb 27 2024