Figma Config 2023: Variables, Advanced Prototyping, Autolayout Updates!

guys what's up so figma config 2023 just blew my mind the features that they've introduced are so insane and so powerful that I'm just like I'm just like I don't know I'm astonished I am out of words but what I'm gonna do in this video is I'm going to give you a rundown or a quick summary of all the features that figma has introduced and also explain them in a simple manner I already have the variables the advanced prototyping file and all of these files open that figma has actually given us to help us familiarize ourselves with these new features and I'm going to link them in the description so once you've seen this video definitely do check them out I've actually checked them out and I feel like even now people are going to be confused by how complicated some of this stuff is because I think it definitely needs uh it is a bit complicated so what we're going to do is we're going to start with something really basic so the basic thing that I want to talk about is let's say Auto layout so they've made a few improvements in Auto layout two things that they've improved and I'm actually just going to show you with this box so we have this box here actually let me just delete everything let me just go ahead and delete this whole thing so we have just these boxes so what they've introduced is they've introduced something like wrapping so previously you had something like left and right and up and down but now you have wrapping as well so what wrapping does is let's actually just see what wrapping does so if I do Wrap nothing's exactly going to happen because if I try to resize it this is behaving pretty much exactly like how it used to behave but now along with let's say uh figma's features of Max bet and minimum width we can make this extremely powerful the first thing which is a pretty simple thing and a lot of people would actually be doing this and showing you how this is amazing but it's not actually this is this particular thing that's amazing so I actually went ahead and created a manual width for these particular boxes and now if you try to resize it as you can see these boxes are resizing and based on the container width that's available and they're not resigning they're actually wrapping to the other line but what if we actually wanted to have a grid sort of a layout where at a particular screen I want these boxes two of the boxes to go down and also take full width well the first thing I'm going to do is I'm also actually going to help you explain Max width so you can set the max WID by going here and I'm going to add a Max width to this container I'm going to say that this particular container should not exceed Beyond let's say 1200 pixels or something along those lines actually make it large so we can at the very least have both these items here so now if I try to resize it and actually let me just select all of these elements as well all of these children's because I was just showing you uh setting it as a manual width but now as you can see if I'm let's say resizing it it's not resizing and I can actually make it centered so we're gonna have a centered container and we can resize we can keep on resizing the container but the object that we have inside is not going to scale Beyond it and if we actually go past a particular point then it's going to start resizing so it's amazing this particular feature Max width minimum width is insane even without the wrapping this thing is going to blow this thing blows my mind up it's pretty simple but it's really amazing that figma has introduced it now coming to the point maybe I don't want any of these items to actually go beyond a particular minimum width let's say 320 pixels so I'm gonna say this is all good and fine and well but I don't want these boxes to go beyond or at least below let's say 320 pixels so if I try to resize it as soon as any of these boxes go below 320 pixels as you can see they're actually resizing so previously you had like three then you have two then you have one and you have all of this like really awesome stuff going on now if you if you if you obviously wanted two of them to actually go at the bottom instead of just one then you can obviously group them into an auto layout yourself and play around with that so that's one of the things that I wanted to talk about now coming to another important thing which are variables so what has figma done with variables well it has done something really amazing it just blows my mind up so you can access your variables going to the design if you have nothing selected you're going to see local variables here and you can see all of the collections here you can create new collections now what are collections collections are basically you can consider them a folder of sorts a larger folder where you can have different types of connections collections so maybe you can have a translation collection you can have a sizing collection you can sorry not a sizing translation collection you can have yeah a sizing collection you can have a dark mode light mode collection something along those lines right so what we're going gonna do is we're going to build one connection collection and in that collection what we're going to be doing is we're going to be converting this actually creating variables and linking it to this particular button using variables obviously and then changing it to light and dark mode so the first thing you need to do is you need to click on create variables you can create four types of variables color number string and Boolean so I'm going to first of all go ahead and create a color so as you can see it's saying okay what color do you want I'm going to say this is going to be my button BG color or it can also be just the primary color right it doesn't necessarily have to be button I'm going to say this is my primary color and what is your primary color I'm just going to copy the button color and paste it here then I can also create another variable I can say I want to have have another color which is going to be my text color and this text color my friend is going to be white that's okay and I also want to create another color that's going to be our background and that can be something like gray I'm just gonna I'm just changing it slightly so that it does not resemble the text color so now if you actually want to link all of these colors and I can obviously go ahead and rename this or do whatever rename this collection if I want to so I can say these are my colors let's say I can also group certain things so I can say I want to group these and I can let's say group these in a selection if I want and all of that stuff so all of that is something that I can do but I don't want to focus on that so similar to colors you can obviously apply numbers you can apply strings and we're just going to do colors and strings for now because I just want to explain these two things to you so now if I actually want this to be linked to the colors that I've created I can go here to the fill and I'm just going to move I actually close this old variables thing I'm going to go here I'm going to say libraries and I can see all of the colors that I have in my library right so I'm going to say I want this to be linked to the primary color this text needs to be linked to what it needs to be linked to the text color and this particular background needs to be linked to the background obviously pretty simple stuff right so now this is basically linked not to Styles not to any styles that I have we are not going to use Styles anymore for this we're going to use local variables or obviously they can be probably team variables as well now if I want to change these colors I can change it directly from here so these behave very similarly as Styles but they're super powerful so what I can do now is I can actually create a light and dark mode so I can actually so it's saying hey you can't really create light light and dark mode or any of these variable modes in a free plan which is unfortunate so I'm actually just going to move it to one of my teams so I've moved it to one of my design teams and now it's on in my asset designs now I can go ahead and I can do the same thing I can go to my local variables I can click plus and this is going to be mode one mode two I can say this is going to be a light mode this one is going to be our dark mode right and then in the light and dark mode the difference is going to be let's say I don't know I'm just going to do something random so it's going to be something like this the the color is going to be a bit uh brighter and maybe this particular text can be still White and the background can change background can change to something like this so I've done that now if I wanted to apply it I can just go here quite simply just go here go to the layers option and go to the colors and change the light in dark mode I can say this is going to be dark and I don't even have to do it here I can do it at the top I can go here change the mode to dark or let's say change the mode to light I'm not sure why it says mode obviously this needs to be dark so this is amazing stuff now if we actually go ahead and duplicate this I can say this one is going to be dark so even if I don't have the button even if I have the button located here if I just move it here it's in since it's in a light frame it's going to be light since it's in a dark frame this button in itself automatically is going to be converted into dark similarly what we can do is we can actually change the button text so imagine if this was log in right so if this was login so I'm going to go ahead and I'm actually just going to place it here I'm going to go ahead and I'm going to create another variable let's go ahead and actually go to our local variables I'm going to create another collection so I'm going to say there's going to be another collection which is going to be what it's going to be let's say uh translation and now what I'm going to do is I'm going to create let's say a string here I'm going to say this is going to be like let's say our login button so the default value of the login is going to be login and then in let's say I don't know Arabic it's going to be login or let's say Logan I don't even know Lao gan I'm sorry sorry for those who speak Arabic I'm not trying to make one I'm just saying just trying to demonstrate something so we have sorry not so this is like Arabic this one is like English and obviously we have the name login so now I can obviously link this as well I can go here and I can say this is going to be linked to the login variables so now if I obviously go here nothing's going to happen it's just going to change my change the um the theme so now if I wanted to actually change the text here I can just go here I can basically put both these buttons on the left and the right I can go ahead and I can say that this is going to be translation this one is going to be Arabic and this one can by default be English right so now as you can see this is English this is Arabic even if I just drag this button here it's automatically going to convert to that particular language if I grab grab it here it's going to convert to the other language similarly I can go ahead and I can say not only do I want the language to change but I also want this one to be darker as well or something along those lines right I can let me just go ahead and actually link this particular background again so I'm going to link it so now if we go here this is going to change the language and the background or sorry the theming as well so this is insane stuff I mean I don't even know what to say I think I'd just like to quickly mention I actually have a paid figma Noob To Pro course where I'm going to actually be breaking down all of these things in extreme detail and actually real world use cases so if you want to check it out you actually want to be a pro and mastering figma definitely check that thing out you also get a 50 off if you use my am subscriber voucher code but let's get to the next thing so now that we're done with variables let's talk about Advanced prototyping now obviously there's a lot of things that I could have talked about variables but we just need to wrap this quick video quickly otherwise it's going to be like an hour long maybe even longer than figma skin or figma configs keynote so we're going to be using uh the playground file for advanced prototyping because it definitely requires a lot of things so the first thing that I'm going to talk about I've already mentioned the variables type are these four types you already know that applying variables I've explained that how do you actually go ahead and apply variables how do you open variables I've already mentioned all of that now coming to some other important points now imagine you have this particular text here and I actually wanted to link it to something how would I go ahead and do that I can go into the Prototype view I can obviously not in the Prototype view I just want to link it to something like link it link it to a particular text so I'm going to link it to let's say I want to create another variable of my own right I just want to go ahead and actually create my own variable maybe this is going to be I don't know name of fruit or something right so by default let's say I'm just going to say the title is going to be choose a fruit so I'm gonna I'm creating a variable of my own which is in my own collection now obviously they have already created some collections in this file but I'm going to create it in my own collection so as you can see as soon as I apply it the default value that I mentioned is now here but now we can change it what I can do is I'm going to say that if a person clicks on this if a person clicks on this particular fruit which is I think cherry or something I want you to change the variable so again it's saying I wanna I have to choose the team so let's just go ahead and move it to a certain designs so I think that should be there so now I'm gonna say I want you to set a variable and I want you to change a variable which variable you do I want it to change the name of the fruit the variable that I created I'm gonna say it's going to be changed to let's say I don't know what these are maybe these are berries or something so let's just go ahead and say berries and I'm going to do the same thing here I'm gonna go here I'm gonna say this should change the name of the fruit to let's say peaches or something so now if we actually play this now this is really important if you press shift and space you actually have something like a quick preview or an inline preview which actually runs pretty fast and actually stays there right completely uh beside you so you can just if you actually want to preview any particular frame you can just let's say click on that particular frame and it's going to be there so as you can see it says choose a fruit if I click on these berries nothing happens if I click on it it changes to pages so let's see what happened unfortunately I'm not sure where that particular set variable went so we're just going to do that again so we're going to say this is going to be our berries enter enter and now as you can see if I'm clicking on berries the check text is changing to berries if I'm clicking on peaches the text is changing to peaches pretty awesome stuff similarly let's go here it's saying that you can actually change actually I think we can even play this like I'm I think they've actually set this by default so if I click on one two three as you can see what they're doing is they're chin changing the instance used above but just by clicking the one two three and what exactly is happening here I'm going to explain it to you it's saying if a person clicks on one I want you to change the shape to circle the shape to Diamond and the shape to Star and this particular shape thing and I'm going to explain it to you as well let me just actually grab this particular slide press enter now I'm just going to go ahead and actually unlock these things so I can show it to you so if we go here and if we go to the design tab as you can see this is a component and this component has multiple variants the name of the variants are circle diamond and star so what this is doing is it's linking this particular thing to a particular variable and I can detach it so as you can see it these are the variants but it's actually linking it to a particular variable and that variable is being changed so if a person clicks on one the that particular variable is being changed to Circle if it's click if someone is clicking onto it's changed to Diamond if a person is clicking on three it's changing to Star so the variable text is changing and that particular text is matching the variance which is why this is updating pretty insane stuff right we can actually do the same something here we can as you can see we have this plant image and it has three uh variants monstera let's actually change that to something else that's probably a bit more simple so first I'm just going to change that to first so it's much more simpler I'm going to go ahead and I'm going to say that I want this particular variant type to be linked to my and I'm going to create my own variable again plant image and what's the default value is going to be like I'm going to say it's going to be first because we obviously want it to be linked to the first one if we go ahead and actually don't link it to the first one it may mess up so now I'm going to say if a person clicks on let's say monstera this can actually even be first because I changed it to First this doesn't matter this text doesn't matter this interaction matters that I'm setting up so if I click on first I want the plant plant image to be first if I click on this fig Leaf I want the plant image to be fig as you can see on the left that's the name of the variant so I'm going to say set variable fig oh sorry instead of actually choosing the variable variable first I was choosing the expression and then we go here and I'm going to say again interaction set variable and this is going to be uh what do we call it plant image and then sorry not plant image we're going to say the expression is going to be ZZ and then press enter enter okay so I think that's pretty much done this is also I think done everything should be working fine let's just go ahead and press shift space so as now as you can see if I press the second one the second variant is going to be choosed if I press the third one the third variant is going to be used if I press the first button the first variant is going to be choose this is insane I'm telling you this is insane and you can do the same thing here circle diamond and all of that stuff there's nothing really complicated here it's pretty much the exact same thing that I just showed you similarly here nothing really common going on assign variable sign variable click the plant image instance in the property again this is pretty basic stuff I don't necessarily need to explain explain this this particular thing is also just triggering an overlay you can have multiple actions so basically What's Happening Here is if you click on this it's basically triggering an overlay so that's pretty simple I guess I think like these are pretty simple things so I don't necessarily need to explain them but what I want you to actually understand is something a bit more complex and we're gonna do that a bit here so let's actually do that complex thing here because I've actually done this exercise I just want to go to the complex stuff so what I want to do here is I want this particular uh volume bar to increase if I click on plus and it to decrease if I click on minus so how do you go ahead and do that well the first thing I want to do is I want to link this particular width to something right so I'm going to say this is going to be and I'm actually creating my own variables to explain it to you so you actually understand it so the name of this variable is going to be like volume sorry volume level and let's just change make it to 300 because that's a default width and what I'm going to go here do here is I'm going to say in this prototype if I let's say click on this particular button I want you to set the variable to what what do I want you to set the value I want you to set the volume level to let's say what I want it to be the volume level level plus let's say something like 20 or 10 or yeah whatever you get the idea right so I want it to be plus 20 similarly if I let's say click on this I want this particular width to increase or volume level to decrease to What minus 20 pretty simple similar to the plus thing that we did so I'm just going to press shift space here and now if we click Plus on it as you can see the level is increasing if you press minus the level is decreasing but there's a problem here if we keep on pressing one this particular width even though you can't see it because you because I think there's a clip content applied here if I remove the clip content from both these places as you can see it's exceeding but maybe we don't want it to exceed right how do you go ahead and do that well you do that by certain conditions so what I'm going to do here is I'm gonna lie just one condition to explain certain things to you so I'm gonna say that's perfectly fine but I also want another conditional here I the conditional that I want is if the volume level is let's say greater than I don't know 400 pixels let's just go ahead and do that if it's greater than 400 pixels do something otherwise and I'm I'm going to say do nothing so I don't want this button to behave or do anything I'm going to say I want you to do something if it's uh greater than 400 I don't want you to do anything if it's less than 400 then I want you to do something so I'm going to say set the variable of the volume level and then I'm going to say the volume level is going to be plus 20. so now let's see what happens if I press let's say uh shift space bar shift spacebar as you can see it doesn't increase right it decreases but it doesn't increases and the reason for that is I messed up the conditional right so I'm going to go here I'm going to say what's the conditional if it's like greater than 400 should it be this obviously that's strong so I can easily go ahead and just drag that I don't have to delete it do again any of that I can just go ahead and drag it down so as you can see it's increasing but as soon as it reaches 400 pixels in width it stops I can't really go ahead and do that but I can also say that if it reaches let's say 400 pixels or something I want it to let's say I want the volume level to do what to start decreasing even on the Press of the plus button so as you can see now it's decreasing as soon as as it reaches 400 and it increases when it's like below 400. so pretty like weird stuff that I'm actually doing to help you understand these things and similarly we can do the same thing here pretty simple I've already explained this conditional thing to you and you can play around with this file hopefully this gives you a better introduction of all the features that figma is introduced and we're going to be covering these in detail I'm actually specially going to be covering this in my figma Noob To Pro course that I have so if you want to check it out definitely check it out in the description you're going to get a 50 off if you actually use the am subscriber voucher code let's talk about the last thing that I want to talk about which is the developer view so in the developer view actually the figma file does really good in this particular View and I'm just going to go ahead and quickly show you what happens so the developer view can actually be toggled by going to the top right here and we're just going to go to the file here this is the file that they've prepared for us so the developer views can be toggled by going here you can also press shift d to toggle it pretty simple pretty straightforward stuff now what happens as soon as you basically toggle this particular thing well the first thing that happens is and this is really important the things that are ready for Dev so the things that aren't ready for that for example this isn't ready for Dev as you can see there's a small sign right beside this section I can mark it ready for Dev and that's going to actually start appearing on the left but if if something is not ready for Dev it's not going to appear on the left only the things or only the things within a section that are ready for Dev are going to appear in the left hand sidebar and the sidebar is going to be super simplified if I actually click on a design it's actually going to zoom out zoom in do all of that adjustment up so the user can actually see what he's interested in if I similarly wanted to convert this to ready for Dev I can just click it and now as you can see I have these components here as well I can just click on them to easily select them it's pretty easy similarly if I let's say you wanted to select this particular variant I can do that if I select this particular thing I'm there and it's not going to select the shapes or The Strokes it's actually just going to select that particular thing that's there which is pretty amazing I can actually see the spacing and padding just by hovering over things so imagine this is my design if I just want to see the padding in between these two things I don't have to press alt anything if I just hover over things I can actually see the spacing and not only just that I can actually see the variables used for spacing not just like pixels the variables as you can see there are certain variables used here and I can easily just see that I can also go ahead and actually view certain components in the playground so this is a component right as you can see on the left it's a component I can open this component in a playground and I can see what this particular component does like how many props there are I can mess around with those props I can change the text I can see how this is this text is actually going to look if let's say it was something different it was some if it was something longer if I actually change the price how it's going to look so it's going to be really helpful for developers to actually look at play around with these files and figure out what's going on similarly one thing really important that I actually want to point out is you have tons of plugins available as well if you actually want to go ahead and actually play around with them so you have storybook connect you have again some uh jira stuff and all of those things basically are here for you to play around with you can see all of your assets here all of your colors uh the layout files you can copy them you can copy the CSS code Swift UI code compose code I mean really awesome stuff this Dev developer view especially if you actually familiarize your developers with it is going to be super powerful but for them and it's going to really ease the handoff process so that's pretty much what I have for this particular video hopefully this gives you an introduction of all the features that figma's introduced I'm going to link all of these files actually the files that figma actually has for their community and their playground here so you can definitely have a look at them and start playing around and Diving deeper so do subscribe to hit the Bell icon and I'll see you later take care bye

Channel: AM Design

Views: 39,485

Keywords: advanced prototyping, am design, asaad mahmood, autolayout, autolayout new features, design system, figma, figma auto layout new, figma config, figma config updates, figma design, figma new features, figma update, new figma features, new figma update, prototyping, ui design tool, variables, variables in prototyping, figma config 2023, config 2023, figma conference, learn figma, figma for beginners

Id: gxJeWc7OiD0

Length: 23min 59sec (1439 seconds)

Published: Wed Jun 21 2023