Learn to reverse-engineer designs from Airbnb and other top products using your browser's Inspect tool. Extract exact spacing, fonts, and layouts by reading the code, then check how they adapt across mobile and desktop breakpoints. Copy SVG logos directly into Figma for scalable assets.
All right, so to show you this trick or this super cool hack that I didn't know as a designer until I had to look at the designs made by the engineers, you need to check to make sure that the sizes are right, the spacings are correct. That's how I got to know about this. And so the way to make designs faster is by inspecting the code. For designers, I feel like it's not something that we naturally think about. And so for that, I'm going to go over to Airbnb to show how to do it. You can just right-click on the page and you can click on inspect. And then what we're going to do is select that little icon to select elements on the page to dive into the design specifics and learn from the best design teams in the world. Because now I can just look at font styles and font sizes. And you can see that here it's like 12 pixels and they have their own font or other fonts as like probably backup. I have here 12 pixels and here 14. You can see also there is 2 pixel padding. And so that allows us pretty much to break down their designs and anybody's designs, which is amazing when you want to learn how actual design teams create products. I don't know how to code, and I can guarantee you that you don't need to know how to code. These big companies have a ton of— you can see it's a div into a div into a div, so you need to kind of be patient and try to figure out where to click and what to find. For example, you can see that those images, those cards, they are not really rectangular. You can see here aspect ratio wrapper is 20 by 19. When you hover it, you can see the pixel size at the top. You can see in fact that it's not fully squared. And you can see as well how they structured their navigation. It's like, like a box. And inside the box, there is like a bigger box, a bigger container with margins and paddings. Inside it, there is another container with spacings. You can see the icons 24 by 24 and the text 12. I usually tell in my videos that you need to use multiples of 4 when it comes to design because it's super easy to think about it. But you can see that Airbnb might also rely sometimes on other sizes, like even here, 14 or 15. So it also depends on like use cases. Even the best companies in the world also need sometimes to have more per-case styling. It also allows you to see how they would structure a header to keep this, like you would think that the Stayzen experience is just 2 buttons in the center, but they're inside of a box with paddings on each side. They both expand to the maximum and have even sizes. I think it's just super cool to be able to see that. Even if I click on one, I'm able to dive into actually how it's being made. And I think that's really amazing. It's interesting. You can see like here, those cards at the top are higher than the cards at the bottom. These ones are a perfect ratio, 1 for 1, but these ones are not, but this one is. You can see how the top section is done. I think it's also important to scan through the above the fold section because that's going to give you a lot of context on what they value as a business. The goal of this listing's detail page is to sell something, right? So they need to create trust and make people want to book the stay. They try to give you as much information as possible to make it very easy for someone to be like, oh yeah, that's a no-brainer, I'm going to book that stay. There is the perfect review, guest favorite, there is the proof of the person, Superhost, it's one of the top 5% of homes, and they also mention that you won't be charged yet. So they make it super easy and simple for you to book it. It's a bit on the side of the video, but it's still important when you to think about showing the most relevant and important information about the fold. And yeah, I think this is absolutely just incredible. You can go on Landbook, which is, I think, one of my favorite landing page inspiration websites. And you can go like on this and inspect, go through the design and see, oh, okay, they made that navigation this way. They made the hero section this way. They are spacing it that way. You also need to think about dimensions. For example, You can see at the top right, the width changes. I recommend always to check 1200, which is the minimum for a desktop size. Then it flips to tablet and the smallest one, which is 390. And 390 is like the smallest for mobile. So once you get those 2, you can just go through again on the text, on the sizes, on the buttons, and you can get a better idea on how to make things work. And then if you want to have, for example, web apps, what you could do is go on like mobbin.com and you can find like one that you really like and you're like, oh, I absolutely love this. Like here, for example, frame.io. You go through this and you're like, oh, I really want to know how they made that page. Or you can just go on their website and then you can sign up and inspect the design, see how they structure it. And one last tip, which is that it's very difficult, I feel like, to find the logos online. If you're like, okay, I want to redesign— like, for example, I want to redesign Airbnb's homepage— then I would usually try to find a logo online and be like, where can I find it? I need a high-resolution image and all of that. But you can still do that by inspecting the You select your element, click on the logo, then you need to do some digging to find something called SVG. Then we're going to right-click, copy element. Then we're going to go on Figma and paste it. Then you're going to click on this icon to select elements. Then you're going to find the logo and you can see here SVG. You get this SVG, right-click, copy, copy element. Then we're going to go to Figma and drop it and you got it. It's really cool because this is an SVG file, which means it can scale as much as possible and not get pixelated. And it's also even better because you can also change the color, and you can also do gradients. And that's just amazing because you could not do that on Figma if you didn't have that. That's the end of the video. I really hope you liked it. Make sure to leave a like and subscribe. Also, YouTube thinks you will like this next video, so, you know, just give it a try. Bye.
