New Figma Updates! Component Switcher, Swapping Libraries, and more (17th August 2021)

hey guys in this video i quickly want to talk about the recent update that figma has made because i didn't get a chance to talk about them i think these updates were launched on 17 august so apologies for not covering it earlier but let's just get into it so the first thing that i want to talk about is the ability to move published components and even like normal components component sets between different files without necessarily breaking the link between them so as an example like i have a component created here and as you can see it's in the old library file i'm going to copy this file copy this button and i'm going to place it in my in some other file one thing that i'd like to point out is if i actually go here you can see okay it's published it's up to date so on and so forth i can obviously click on it as you can see it's actually in the old library file now if for some reason i've actually created a new library file i can basically just cut this particular component and paste it here and once i do that it says hey you've you're actually pasting this from a published component you're moving published components so do you wanna do you wanna make a library update and i can say okay go ahead so if i actually publish it and now go back and review some of the updates it says it's been moved from the old library so now i don't have to worry about the design system update manager i just move the file and i just update it and now as you can see it's in the new library so this is just amazing uh for those who for those of you who are avid users or figma and have been moving uh components around different files want to combine them when i break them apart so on and so forth this is game changing this is just just amazing so the other thing that i want to talk about is the ability to actually switch components so right so previously for example here as you can see or switch or even like place components so i actually have some other buttons coming here from some other file so previously what i used to do is obviously press like command 2 to actually select the button and then let's say drag it here but now there's an easy way that figma has allowed you to do to insert uh components i can just press shift i i can search for a button and here is as you can see i have that button here similarly for example and this is something that a lot of people might not tell you if i wanted to actually replace this button with something else or probably with the above button i can actually go ahead and i can search for a button as you can see i have these two buttons and it's asking me what i want to do i can obviously click on it to add it to the artboard but let's say if i actually want to update this button to this blue button i can actually press the alt key and then click on it and as you can see it magically changes to the different button this is something that you previously were not able to do from the left hand side similarly not only can i actually toggle between different types of the same element but i can basically just replace this to anything i probably have created some other elements here so i'm just going to press a now as an example if i actually just wanted to replace this component with an icon like i can do that by pressing the alt key and it's just going to replace it completely this in itself is game changing this is something that you previously were not able to do easily so you obviously could go here and you can let's say search for a different component and you can replace it here but that actually makes it easier it allows you to add components from the same place and it also allows you to replace components from the same place and it's just game changing the other thing that i want to talk about is the ability to swap out libraries so one thing that i don't want to point out is let's just go ahead and actually create some colors here so i'm going to create a color in this library i'm going to name it i don't know dark sorry i don't know why i'm naming it dark here but let's see this is the primary color i'm going to go ahead say primary i'm going to create another color here and let's just go ahead and change the hue and gonna name it secondary so here we have these two colors coming from this old library file i'm gonna publish them and once it's published i'm gonna go back to my to this file and let me just go ahead and create a frame around it i can actually go to my fill and i can search for a primary obviously this primary is actually coming from this file because i don't see anything any name above it but let's just go ahead and actually enable our old library a new library file so now that i've done that i can actually go here and i can say i want this to be from the old library primary and i want this to be from the old library secondary so now i have these colors linked from the old library i'm just going to go ahead and copy them copy these and i'm going to paste them here and obviously as you can see these are also coming from that particular library they're not coming from this particular file so i'm going to go here and i'm going to say that the primary color in this file is going to be this one let's just go ahead and name it primary and i'm going to say the secondary color in this file is actually going to be something different maybe i don't know this one slightly lighter i'm going to name it secondary i'm also going to publish this file just so the updates are there and once it is published i can actually go to my libraries that i've added i can go to my old library i can click on it and i can say swap library so if i actually search for the new library as you can see it's here and it also allows me to choose which of the styles or components i want to replace with the new library so i can choose hey i just want to replace the primary one or whether i want to replace both of them and i click swap and as you can see in a while it's going to update both of those things and this is just insane you can updates whole component sets if you're let's say migrating from v1 to v2 everything can be updated with a single button click and you can also choose what to update and what not to update if there's a breaking change and this is just amazing one other thing that i'd like to point out and that's coming from an old uh update is the ability to actually have different flows so let's say this is a this is flow one and this is flow two now previously uh for example if i actually wanted to present these things like there was no way of switching to these different things in figma uh without obviously having different interaction buttons between them now however what you can do is you can actually add if you go to flow one like you can actually add a flow starting point and i can name this this is going to be my uh starting flow and we can obviously say that this is going to be the let's say purchase flow and this one is actually going to be the checkout flow just just in case you actually had those two things to begin with and now if i go to my prototype view you can actually see that i have these purchase and check out things on the left so i don't have to connect anything i don't have to do anything like if i want completely separated flows i can lay them out quite easily in the left hand sidebar similarly for example one other thing that you can do is the with the interactions here you can actually go and click on the edit button here on the pencil icon and you can type a lot of informational things so this is exploratory exploratory and just showing you how awesome flows are and if either let's see just click outside go back to my prototype view as you can see we we can actually add some description and there's fascinatingly there's some ability to actually customize this text as well add bullet points add links hey or let's say https google.com or something along those lines so once i and obviously i can link it so i can obviously i can place the link and i can say i wanted to go to the google.com and now as you can see you can actually have spec links here you can have links to jira tickets or anything else that you want and obviously you can click these links to actually go there so this is again an extremely powerful feature all of these features are extremely powerful and i'd definitely love to know how you start using them so that's pretty much it for now do subscribe to hit the bell icon do let me know if you need anything else but i'll see you in the next one take care

Channel: AM Design

Views: 3,614

Keywords: Figma updates, figma, figma design, figma components, design systems, swapping, swapping libraries, component switcher, ux, ui, asaad mahmood, asaadmahmood

Id: O8lrIeOcWEs

Length: 7min 55sec (475 seconds)

Published: Fri Aug 27 2021