Dive Club
Posts
🤿 shiny grills

🤿 shiny grills

+ a visual design cheat code 👀

Ridd
October 17, 2024

Airbnb dropped a banger yesterday 💥

So this week’s episode is a behind-the-scenes with their VP of Design, Teo Connor. We go deep into:

How Airbnb is bringing vitality to the visual language
How Airbnb is empowering designers to be designers
How to succeed in a design review with Brian Chesky
Why it’s not enough to think in terms of flows and screens
Why Airbnb is updating their design system to use more 3D
How they redesigned the checkout and welcome experience
Why Airbnb has prioritized prototyping in code earlier in the process
a lot more

Listen on YouTube, Spotify, Apple, or wherever you get your podcasts 👇

🤝 WITH RAYCAST

Friends don’t let friends use Figma’s native file search 😬

It’s been over a year since I’ve clicked into that search input and typed the name of a file I’m looking for b/c Raycast’s Figma file search extension is free and 10x faster.

I have it wired up to a hotkey so at any point I can type opt + f followed by the name of the file I want, hit enter, and then boom it opens in Figma.

It’s just another reason why I use Raycast for absolutely everything 👇

🎓 KEY TAKEAWAYS

How Airbnb is investing in design innovation

1 — Investing in tactility

The longer you stare at these filter icons the more impressive they become 👀

But Airbnb isn’t just investing in 3D for these more custom pictograms. They’re looking for every opportunity they can to make the app more tactile.

Let’s look at some dialogues as examples…

It would’ve been so easy to add simple, flat icons here 👇

How many times have you opened Phosphor in Figma and searched for a lightning bolt or a tag icon? Maybe you spice it up a bit by throwing your icon in a nice circle container with a bit of padding 😅

But Airbnb is actively fighting against flat design… and it’s beautiful 🤗

2 — Investing in animation

Airbnb is making a strategic decision to move into the prototyping phase much earlier in the product development process.

“You only understand when a design is going to work when you see it on a device and you’re actually playing around with it”

Teo Connor

It’s a big reason why they’re hiring prototyping specialists like Janum Trivedi (and why I’m so excited about Play).

Exploring interactions in code early in the process empowers designers to dream up more ambitious ideas.

It’s how you end up with something like this passport animation, which Teo admitted “has to be super fluid for it to make sense otherwise it’s going to be awful” 😅

3 — Investing in leaders

Transforming culture starts with leadership. That’s why Teo is intentionally bringing in design leaders who are not just people managers.

If you want to “empower designers to be designers”, then you need leaders who know what they’re talking about and are responsible for upholding craft.

The best design leaders keep their hands in the clay.

p.s. I turned this into a full post HERE if you want to bookmark it ✌️

🤝 WITH PLAY

One of the products I’m most excited about right now is called Play. It’s a tool for designing and prototyping mobile apps.

Don’t get me wrong, I think our current tools do a great job with visual design…but there’s so much more to designing a product than just what it looks like.

Like Teo from Airbnb said, it’s how it feels, functions, and moves

And that’s where Play comes in! You can design in their free form canvas or even import UI from Figma But what makes Play different is you can design with native iOS materials.

That means you get access to all of Apple’s native gestures and Core Animation for creating prototypes. It’s really powerful stuff!

So if you’re designing a mobile app I cannot recommend Play enough 👇

🔗 FEATURED RESOURCE

Jump into James McDonald’s Figma file

I often talk about how hiring Fons Mans to do the Dive branding process was a tipping point in my visual design skills.

Being able to deconstruct his visual styles was seriously a cheat code. So when James published this file to the Figma community I bookmarked it immediately.

It’s amazing how much you can learn by breaking apart a design layer by layer 👇

🔗 FEATURED RESOURCE

How to make your idea go viral internally

Mihika Kapoor is the founding PM of Figma Slides (aka Flides) and she’s giving a free lightning lesson on product storytelling ⚡

3 proven strategies for making your idea go viral internally
The art of the hackathon pitch
Strategies to make your public speaking more memorable

If you want to learn how to get momentum behind your ideas then you’re not going to want to miss this one (but if you do, no stress sign up anyway to get the recording 😇)