Apple's Genius UI Trick | Figma tutorial

There's one specific element that Apple use across their website and it's simply genius. It is this section right here. This design decision saves them a ton of scrolling and creates a powerful interactive way to share product details. In this video, we are going to break it down. We will discuss why it works so well and I will show you exactly how to build it in Figma. So, let's get started. Before we jump into Figma, let's analyze why this solution is so effective. For years, Apple work on that solution. When we visit iPhone 15 Pro website, we can see simpler version of this element here. And also like other companies, they use a card with simple accordions on the left side and a static image on the right. It felt a bit dated. And right now they connect those two things into one and make this a top priority because it's engaging experience where you can explore device color highlights in a way that feels natural and also the layout of this section is inspired by Apple new design language idea called liquid glass. Now that we understand the why so let's build it in Figma. in Figma. To make this section, we only need two images from Apple website, those three icons, and a copy from Apple website. So, let's get started. Let's make the first card. When we have that, we can take the plus icon here. Let's make this text a little bit bigger to 16. And as you can see, they have a circle plus. So the easiest way to make this is add a stroke. Add some border radius. Let's make a frame of this. Uh add some padding. Also, we need change the text color to black. Add the background. As you can see, they make opacity around 80 to to this section. Now, let's add border radius to this element and make this semi bold or maybe medium. I think medium going to be great. And we have our first element. Let's make create other buttons. So, we can copy this one. Paste here other icon. Okay. Make out the layout maybe 24. That's going to be great. Also, let's make the closing button. Okay, we have all buttons we need. And to make this animation smooth like apple did here, we need to take our text. Move this text inside this and make frame here. Change the auto layout option. Also, we need to change this text to 16 pixels. Make this black. Also make this medium. Let's make this text around 300 pixels. And when we have a card like that, we can hide our text. Copy this element couple times. change the copy to make a text copy without changing the font. Use the shift command foul. Okay. Have all elements. We can make a auto layout here. We can go for 24 pixels. Connect this with this one. Make 32. And when we are here, we can show descriptions of those buttons because we want to work on the design and display button. Copy this here. also make this regular to have exactly same design like Apple did. And we can hide this right now. Okay. When we have that, let's create frame of this. As you can see, they add a little padding on top on top here and at the bottom. So, we also need to do that. But the best way for this is going to be change the height to I don't know 700, change with a little bit, add some padding and let's add the background to this. But as you can see background also have animation. So to make this, let's create rectangle. Make this position absolute. Change the wave for put this element back here. Copy the image. And right now we need to duplicate this image and put this image here. Okay. When we have that, copy second image, paste there, let's add some border radius clip content. As you can see, we are really close. Okay. And we are here. We need to hide this. Let's make the copy of that frame. In display we need to show our text but hide the title with icon. And in design section the opposite of that and let's move the images in that way. Okay. And right now I think it's better to not use any device in this case. Let's take this here. As you can see, I made the exact animation of Apple because as you can see, there's a little bounce here. There we need to take this button to move this animation. In that way also we can use our arrows. Take this here. Take this sphere. And let's test our animation. As you can see, we are almost there. But this bounce in Figma isn't perfect because as you can see the background moves. So the better idea in this case going to make a normal animation something like that and after that as you can see we have almost perfect prototype almost because Figma prototype isn't perfect tool because as you can see here we have border radius and there is no border radius but if we going to check the design both screens so have border radius but it's enough to share our vision version of this component. And as you can see in couple minutes in Figma, we recreate most popular website element on Applecom right now. Thank you for watching. Leave a like, subscribe. If you're watching on mobile, click hype and see you in the next