Multi-editing in Figma

Key Takeaways

today I'm going to show you the most useful features of multi-edit in the context of this web design project we did for our figma course multi-edit is a huge timesaver especially when you're in the exploration and iteration phase where you have a lot of just slightly different variations of your designs and maybe you want to make a change across all of them but you don't have components set up yet it also is really helpful for staying organized and renaming your layers today we're going to go over how to select matching layers how to apply different transformations to layers across multiple frames and how multi-edit affects things like components and variants to save us tons of time and help us stay organized let's dive into it so first let's talk about how to select matching layers in the first place so let's just use as an example these pills so we have these across multiple Pages here so I'm going to go in and just click on this blush one you can see there's an icon at the top left here that says if you hover over it it says select matching layers so let's click on that and see what happened okay that's great it just selected on all of the you know like blush colored ones so what happens if we go in and select all of these and then click this button now we've actually selected all of them so if we wanted to make a change across all of the pills then we could do that a shortcut to this let's just select one of them we'll do this camel colored one a shortcut is to do command option A so you can see now we have selected on all of these camel colored ones that's how we select them now how do we actually make these Transformations now once they're selected we can make Transformations which I'll show you in a moment but we can also do something cool we can rename all of these layers at once so to do that I'm just clicking command R and this window will pop up so we can rename this from color pill to let's just call it color selector and that will rename all of them and of course it would be better for this if we selected all of these option command a command R and changed all of these to color selector not just the one color so that's perfect and saves tons and tons of time especially if you don't really get into the habit of naming your layers which is true for a lot of us I feel like naming your layers can be a waste of time sometimes but then if you want to go back and name your layers to get more organized once a project is coming together then that's a really easy way to do it okay so now what if I am sort of riffing on this section here so I have a bunch of different sort of layouts here for this about section but what if I on all of these layouts maybe I even have 10 20 different layouts here just showing three as an example but it would take a long time to let's say make this logo bigger on every single one one by one so this is a really good opportunity to use multi-edit so I'm going to go in here I'm going to select on this we can go up here and click select matching layers I can also do my shortcut command option A and we've selected all of these here so that's great now something else cool is when you scale this let's watch what happens it's actually scaling on every single one just like the first one it's sort of just mirroring my action on this to all of them so let's see it's like really get in there see what we want to do I think something like that looks better maybe a little smaller I think something like that looks a lot better so now you can see that without any hassle we've just changed the size on all of these different frames now what about something like color so let's go in I'm going to do command click so that I kind of click on this background frame here we can see that we're using this off black color for it then I'm going to go up and select similar elements and we're going to change this from the off black maybe to the burnt orange and so you can do Transformations like that tons of different ways to really save time across multiple frames another thing I want to show you is changing text this is kind of lifechanging especially like if you've misspelled something multiple times and you want to go in and change it or if you just want to change the text on a button so I'm going to select on this button find similar layers and I'm going to hit T and by hitting T I can then go in and choose one of these so let's see chosen this one and let's see what happens when we start typing so I'm going to go in and I'm going to again command click so that I'm selecting on the text box inside of this button and I'm going to select matching layers and then here you can see that we've gotten this option to do multi-edit text so if I click on that or if I click t on my keyboard then it's going to let us come in here you can see that now these are sort of like dotted line outline telling us that those are going to be affected so let's say instead of contact us I want it to say learn more then it's changing on all of these which is really awesome while we're in here we can also change the font size so we can go in here and let's say instead of 14 I actually want to make this 18 I want to make it a lot bigger there we go we can change that across these different frames as well so what if I want to paste an element into a nested frame on multiple frames I think I want to put something like this this sort of underline or divider line inside here underneath the logo so I'm just going to hit command C on my keyboard I'm going to select this nested frame go up and select matching layers then I'm going to do command V and we've just pasted it in to all of these and so then we can even click and drag it up we can change it from fix to just fill container and that's happening on all of these art boards at the same time and this works not just on frames it also works on variants of a component which is really cool so I'm going to come on over here to these variants and I'm going to do multi-edit variants so I'm going to come over to this thumbnail component here and as you can see I have a option here to do multi-edit variants so I'm going to click on that the shortcut for that is Q once you've selected on that component and so now let's say I wanted to add an icon to all of these different variants there's six of these so it would take me six times as long to add it all six times I just want to do it once so I'm going to go into my assets panel I'm going to find an icon and I'm just going to drag it right into here and similar to the last example we can then start moving it around and you know changing anything we'd like about it and it's going to transform uniformly across all of these different variants last thing I want to show you is how you can actually make something into a component using multi-edit so we're going to go back down to here now at the moment this logo is not a component so what if we wanted to make it a component what if we're sort of like getting to that phase of our project where we know this is going to be the final logo and we know we want to have it across our project I want to make it a component so we could just make it a component and then copy an instance of it and paste it back into all of these but a much easier way to do this where we don't have to like Backtrack on work is to select matching layers and then here we're going to create a component and so when we did that what it did was it pulled out the main component right here it's hard to see when my background is so light it automatically pulled out the main component outside of all of these frames and it made each of these an instance so you can see it's an instance because it's got a purple outline we'll go into the layers panel you can see it's got a diamond here that's an instance of a component so you don't have to double back and copy a new instance and then paste it into all of these it just did it for you and so now just like any other component we could change the color of this and it's going to update across here or we could just change it on the instance level and it's only going to change on that one instance so that is super super helpful really helps you stay organized and save tons of time and that's the basics of multi- editing in figma like I mentioned I like to use this a lot when either I forgot to create components or I just haven't created components yet or don't feel it's necessary but still want to make changes across multiple different elements it also as you can see comes with some really interesting transformation properties that just make life a lot easier whenever you're designing in figma feel free to check out the in-depth figma course for web designers where we created this responsive web design from scratch also that course will be linked in the description box below and thanks so so much for watching I will see you guys in the next one bye