Designing Apple AirPods Pro interaction in Figma

[Music] hey guys what's up welcome back i'm akash and welcome back to my channel so i was on apple's website and i was looking at airpods pros website so if you see the entire website this is how the entire website looks like so they tell you more about each and every feature of the airpods coupled with these awesome animations awesome interactions these like one interaction so there are a couple of smaller smaller smaller interactions right and all of these interactions like small interactions are really fascinating uh ideally actually cannot directly build them in figma right you need more sophisticated tools to build this obviously this has been developed using i think css animations and 3d rotations and you require like really more sophisticated tools to even prototype this bit but there are a few interactions in this page um like small interaction that you can pull out of it and you can design it actually in just using figma so one of such interaction is basically uh this interaction which i'm showing you right now so if you see in this interaction what happens is you see the airpods pro and then you see a view of its component as well in technical terms in engineering drawing it's called exploded views and it's one of the very cool ways of explaining explaining actually what is inside of a product so what we're going to do is we're going to build this exact same thing that you're seeing here so i'm picking up this entire this section actually the section that you're seeing right now where the ear tape and the speakers this comes out of the airpods and it explains how it works and it has some value preposition here and here as well so we're going to design this in figma and the interaction is really really simple to build in figma so let's see how we can do that so guys right now we are in figma and we are starting with an ipad uh artboard so i'm taking an ipad pro artboard because i have an ipad with me and i am going to be mirroring my prototypes on this ipad itself so it looks really good on the ipad so miners just do it but theoretically you can take any desktop artboard if you want with this project doesn't matter okay so first step is just draw the artboard of an ipad or desktop second thing that i have already set up is basically creating the simple nav bar it just contains the text if you see just a text which says ipad pro a straight line and then an apple logo and i've grouped them together and i'm calling it a nav and you can come here and you can give fixed position while scrolling on the right so what we'll do is it'll just make this nav was sticky so even if you have a scroll um it will not uh it will not move away it will stick at the same top level so you can quick tip you can just use this functionality to make it sticky on the top actually sticky anywhere so you can also make anything stick in the bottom if you want with this option great great now so design this to design this first interaction that we just saw now we first need the components which is basically that expanded view so what we'll do is we'll go to the apple's website and what we'll do is at this particular moment so we'll stop at this particular scroll and we'll immediately take a screenshot so just take a screenshot of this entire thing okay from here till here so we're taking this and this specific frame of this interaction because if you see all these elements are slightly far away from each other they're segregated they're not touching each other and this is exactly what we want so just take a screenshot of it this is basically the screenshot that we have taken from the apple website now um the ideal way of doing this is we first want to segregate all these parts separately from this one image so you want speaker to be different we want the earpiece we want these internal components to be an individual individual pieces now the ideal way of doing it would be to go in photoshop and remove the background and create these individual pieces separately but we can also achieve that by using a small trick in figma itself which i've also told in my previous videos so what you do is you come here and you first of all come and you change the layer property from pass through to multiply so what will happen is as soon as you hit multiply if you see um the white background is gone and it's blended from the one so multiply what it does it it just takes that white thing and it just blends the entire image into uh the background color so it looks like so as of now if you see this it looks like that we don't even have a white background it was just a screenshot but just changing it from pass through to multiply it becomes looks like a transparent image right so that's the effect of multiply multiply is a great way of changing the layer properties now we have this one image now what we need to do is we first need to segregate these components now that is also very easy to do so first thing is we are going to drop it in our artboard so we'll just paste it here we don't want it to be fixed okay so we have pasted the screenshot here we just align it in the center and uh just make sure that the size is fine just make sure it's like smaller bigger whatever you feel like is the perfect size okay now it's there now what we need to do is we need to segregate all these components individually so what i'll do is i'll double click on this and as soon as you double click on the image you will see uh the panel opening up now it's currently at the fill stage but we don't want it to fill we want to crop it select the crop option and as soon as you do that you will see cropping this blue markers here crop tool so what i can do is i can just crop this image and it's a in destructive process it retains everything else but it just crops to that particular area so first i want this big piece to be segregated so i'll come here i'll make it i'll make this blue option smaller like very close to this uh particular one okay so i think this looks perfect and we are done with our first piece now we want a second piece as well so very simple just duplicate this by hitting alt on your keyboard and just dragging it with the mouse and you have duplicated the tool duplicate the entire layer double click it again now we want the second piece to be there right so what i'll do is i'll move it in the side and i'll segregate the second piece as well perfect so now you have the second piece and i want the third piece so we'll do the similar thing again [Music] now what i'll do is i'll just group them together and this will become our second frame first of all so basically the second frame is expanded but we need to make the first frame where it is collapsed right so first what i'll do is i'll just come here and i'll group them together and i'll call it ear parts okay because these are the interior parts what i'll also want to do is um so i think this is perfectly fine now what i want you want to do is i'll just duplicate this artboard okay and i actually want to rename them i want to call this one and i want to pop this too okay so what we have done is we have just duplicated the second arm the first artboard and created a first frame actually now uh this stage that we have created here is the second stage so we need to build the first stage so to build the first stage what we need to do is we'll come here and in this one it should be collapsed right so what i'll do is i'll move everything on this on the right actually okay perfect now if you see um so all these other bits except the main big body and this ear cup we need to hide it in this layer so we don't want it to be visible here so we'll just make it uh multiply and opacity is zero so it's not visible right now uh what we also want to do is we want to scale them like a little bit smaller so that in the next stage it slightly expands so it gives a nice real effect so select these groups hit k on your keyboard and as soon as you hit k you see this double edged arrow and just scale it a little bit down okay perfect now this is there it's not visible what do you want we want our cup ear cup to come on top of this so i'll do this i'll move it on top this like this okay so this is our main earpiece which is here image 2 and this is our ear cup which is this image 7 and these are the components are hidden in this one now what we also want to do is i'll come here i'll select this and i'll make it center align i'll also select this and make it center line okay so what will happen now is uh since it's center line and the cups are moving you'll see expanding like in both direction so let me just quickly show you how it looks like i'll come here i'll say go into prototyping bit click navigate to do we don't want instant we want smart animate so always use smart animate because that's how we're going to see the animation and we'll give something around 360 milliseconds perfect let's see how it looks like yeah so this is our first stage and if i click see perfect so uh i'll go back again this is our first stage and i'll click and it expands and opens up right so this is perfect now this is small imperfection here if you see um if you see this ear cup as well as this uh since i moved the ear cup on top you can still see the background of this first bigger bigger airpod right the reason being both are multiply and multiply what it does it adds a transparency to the layer so you're able to see through the ear cup actually and this black portion is basically your uh the background ear cup body right so earpods body so to fix this um what we need to do is we need to add a slight background so it becomes clearly more perfect so what we can do is we can come here on the image too and we'll grab our oval tool by hitting o and we want to add a small layer of background on top of it so ellipse is here i'll just drag it in here just above this body and on top of this the ear cup is there so i'll just place it just on top of the body and what i want to do is i'll just change it to white so behind white it works like a normal transparent image but with other backgrounds it works like a pass through so see through actually with the multiply option that we have added so what we'll do is i'll add a solid layer of ellipse a solid layer of ellipse behind it so it hides the uh intersecting layer so that you don't see uh from the ear cup the part of this airpods body right so i've added this let's just fine tune it a little bit perfect so if you see what i've done is i've just placed a small oval ellipse actually on top of this body which actually hides the part of this with a solid white fill and when there's a white fill on top of this ear cup you won't be able to see anything behind it so it becomes like a perfect thing let me just quickly show you without this how it looks like if you see without the solid layer you are able to see the body part of the airpods body of the earpods if i add solid layer back you are not able to see so it looks perfect right now okay so this is how it is now you just quickly preview it again see perfect so this is the first part of it that we are done with now what we also want to do is we also want to add our text x to all these like we also want to add x to these components so we'll come here and okay we'll come here and we'll copy this so if you see the animation there's a line that extends upwards and downwards and then there's a text around it right so the text moves up and then there's a line as well that extends so i'll just copy this text from here okay now i'll come to this stage and i'll paste my text here maybe and by the way i'm using poppins font here if anyone wants to know and the size is 24. so this is the text i'll just move it a little bit up okay and we also want the line um that will draw to this so we'll grab a rectangle tool and we'll make it like width too and height i think is fine and we'll make it black okay we'll group them together and we'll call it and we'll call this group as maybe it's for base so we'll call it base okay um perfect so now i'll just copy this from this second artboard that we have and we are going to paste it in the first artboard okay what we also want to do is we want to select go into the group and we want this rising animation that we just saw so i'll come here and i'll change the height to 2 and become like a small dot the rectangle will become a small dot and i'll move it down like this i'll also select the text and i'll move it down like this so the line is now a dot and we also have the text here i'll come here and i'll give it a 0 password because we don't want to see it in this stage right but we are able to see it in this stage and it's also down and it's here it's up so it'll give us this nice rising animation when we do smart animating so i'll come here i'll select this and let's see how it looks like see perfect so this is also the second part of it that we are done uh now let's also add like a slight uh ending animation like slide end feeling to it so we have done the majority part of it we have done the exploratory very nicely let's build the final touch touches to it so what i'll do is i'll um actually duplicate this bit and i'll come here so we wanted to expand and collapse and we want to see the pricing of let's say the airport this is the additional thing that i'm adding but feel free to stop it here if you want so what i'll do is uh i'll come here and we'll go to the airport's site actually take a screenshot of this okay and i'm gonna paste it on sigma so i've pasted the screenshot on figma and again i have changed it to say multiply and we already have the previous one behind so what i'll do is i'll come here on the earpods group and i'll first of all give it a zero pass through so that we are not able to see this we want to want to collapse it and we then want this to appear i also want to add a text to it something like okay guys so i have added some text a buy now button and a starting price just a small thing on this and i want that once i move it from here to here it should collapse so we already have the background layer that is there if i show you here uh it's right now it's zero positive but it's behind so we'll do the collapsing animation because it's immediately the first thing it's exactly the first thing that is here and i'll make it zero again and then we want this to appear this airpods pro view and this option to buy it out i also want it to be have like a slight animation that's coming up so it becomes a little bit more dramatic so what i'll do is i'll select all of these together ctrl c command c actually come to the second frame and paste it there and actually move it down to the artboard so right now you're not able to see it's moving out of the artwork but it's still in the artwork i'll remove the clip content from here so you can see that so this this the text i wanted to go down out of the artwork so it's not visible and in next frame it'll look appear like it's coming on top so it's here and i also wanted to make it like a little bit smaller so i'll hit k and just make it a little bit smaller okay yeah so uh if i just hide it again click on it you're not able to but it's so now from the second one let's hit the prototyping bit and remove this from second to third we want again on click we want slightly more time so that we can see the animation uh is in and out because we want that to happen and yeah that's it let's see how it looks like in all its glory this is our first stage the second stage perfect and there's a third stage perfect let me show you again first stage expands nice text comes up nice and collapsed because we already have the first stage as it is so it just collapse again and then this comes from top so the airport's final things comes from top with the option to buy so guys this is it for the tutorial uh if you want you can also pick more components and build uh even more extensive one that i have done actually here i'll quickly show you that as well so what i've done is i have added few more stages to it um something like these ones which is again there on the apple's website so i've also done this stage as well so it's the same process just do this and add it in the next uh artboards and then again the last stage is still the same thing let me show you if you do that all these things like all add more stages together how it'll look like so i'll just hit play and this is our first stage perfect second perfect two texts coming up and down same procedure that i have told you again and from here you're able to see the second stage as well which i have created additionally it shows the chip and the other part as well and airports grow by option perfect so guys this was it uh it's a really simple trick and really simple way of doing it the beauty of this entire interaction is really simple to build right now you can do it for other products you can do it for maybe phones uh same principle you can use it for doing other type of uh e-commerce product as well these are called exploded views and this is how you can build it so guys i hope you liked the video if you do like the video do subscribe to my channel because i'll be bringing more and more figma tutorials in my upcoming videos so stay tuned and thank you for watching bye [Music] you

Channel: Akash Yadav

Views: 4,009

Rating: 4.9597988 out of 5

Keywords: UI, UX, DESIGN, INTERACTION, ux design, User experience, figma, prototyping, apple, airpods, airpods pro

Id: WV3kDMvcCnM

Length: 21min 9sec (1269 seconds)

Published: Fri Oct 23 2020