Airbnb Design

We also have a Design Tools team at Airbnb (source: I’m on it. hi.). Whilst Lottie was developed outside of our team, I think it’s representative of the kinds of projects we love.

There’s plenty of stuff we haven’t shown off yet, but I’d hope that almost everything will at least be written about, but ideally open sourced too.

My team is focused on building tooling every day. We think of our work in three buckets:
- Integrated Toolchain — next-gen design software built around our Design System[1] (and componentized systems design as a whole), with a view to making our design & eng processes radically more efficient. Mostly proactive projects born from observing the cracks across the org. We just work on it; our experience is that external design software companies have little awareness of the challenges we actually face. Facebook's design tools team is a big inspiration here - they're doing really exciting things.

- Information Systems — there’s lots of knowledge spread out across the design org & Airbnb as a whole, and we like collaborating with other teams to solve their workflow needs. This is typically more difficult to release because it’s baked into internal systems. Airshots[2] is an example of this, and we’ll be sharing another system soon.

- Experiments — as hybrid designer-engineers we tend to get pulled into different prototyping projects across the org, typically for new initiatives with exotic tech that we can’t talk about just yet.

Regarding ‘releasing’ &…

In reality design for the web and phone applications ends up being largely about typography. So a good foundations book on typography like "Designing with Type" or any other of the usual suspects is a good start. That said, some applications have very little text so this is not always true anymore in UI/UX.

"Don't Make Me Think" is a good read, but the direct info is not really as important as the point it is trying to make. Aggressively reducing friction and decisions for the user at all points. If reading that book helps get that point across then it's worth the read. On how to do that...

If you are new to design, just pickup a used intro textbook on design. Something like "Design Basics" by Lauer and Pentak. Or really any intro book on design. They all cover the same basic concepts you'll need for UI/UX design. Fundamental stuff like visual hierarchy and composition. Honestly, just go find a used one for $8 and read through it. Most of them are pretty quick reads.

After that, although no one really goes out and tells you this, it involves a lot of following the trends and looking at past work and pulling in ideas and pieces together to create a new design. Another comment in this thread talks about how they don't write books and this is pretty accurate. A designer rarely just sits at a blank screen and starts from nothing. They usually have a list, whether formally or informally, of examples and ideas to start with. Then through iteration, critique and testing they…

Here's my variation:

1) Using a text editor like Visual Studio Code, write core components in react-primitives. This code can be largely the same as your real react-native code with all it's handling of layout and internationalization.

https://github.com/lelandrichardson/react-primitives/

2) Create a library of core components. In aggregate, this library is your DLS (Design Language System)

http://airbnb.design/building-a-visual-language/

3) Use react-sketchapp to transform your core components in react-primitives to sketch symbols. If you have a large design system and support multiple languages, then this will save you a lot of time as the number of combinations of layout, language and potential input values are explosive.

http://airbnb.design/painting-with-code/

4) Use sketch to design your new feature. Use sketch symbols to quickly pull in core components. If you need to create a new core component go back to step 1. With all your fancy tooling, it can be as fast as 1 minute to build a new page.

https://twitter.com/karrisaarinen/status/849733176150773761

5) When core components change, go back to the "source of truth", the react-primitives code and modify that. Re-run react-sketchapp. Now all sketch files that depend on that core component will be automatically updated because of updated sketch symbols.

This is super useful feedback!

I definitely want to support more design systems, including higher fidelity ones. I started with Chakra due to its popularity and simplicity, but agree that visually it's not the most compelling demo.

I think the people who will get the most value from what Noya can do today are founders, PMs, researchers, and engineers - people who want to show a mockup to their team or customers, but who don't want to spend hours in Figma.

Part of the goal, which I think could be valuable to designers too, is to help smaller companies leverage design systems without needing a person/team to support them. E.g. Airbnb had a design system team AND a design tools team, and I think that's a big part of what made it work. At smaller companies, trying to use a design system without the proper support can often make things worse. We think Noya might fill that gap. With Noya, a smaller company could make mockups and prototypes with their existing React component library, without having to maintain a separate Figma library.

My cofounder David worked on the Airbnb sketching interfaces project: https://airbnb.design/sketching-interfaces/. But mostly the output of that plugged into the higher fidelity (internal) design tools that David and I were building.

I'm making a point on how indulgent it is to spend technical resources on something of so little consequence, and then write 2(!) 10,000+ word blogposts (including https://airbnb.design/working-type/) on it and also produce a video to announce it to the world.

The second blogpost actually says After 18 months of creating, refining, testing, and integrating, we flipped the switch and released Airbnb Cereal across our brand and product. 18 months?! This is HBO Silicon Valley level insanity.

Spend 18 months figuring out how to stop real issues on the marketplace like discrimination against minority guests. The only solution Airbnb has offered to quell the #AirbnbWhileBlack controversies that started in 2016 has been to force hosts and guests to click a button pledging to not discriminate. That is an actual issue. This is throwing idle bodies at a non-existent problem.

- Open Sourcing an animation library for After Effects (https://airbnb.design/lottie/)

- Making a plugin for exporting After Effects to JSON (https://github.com/airbnb/lottie-web)

- Porting their open sourced animation library for iOS (https://github.com/airbnb/lottie-ios)

- Porting their open sourced animation library to a mobile framework that another company created that doesn't really have anything to do with its core business. (https://github.com/react-native-community/lottie-react-native)

- Writing a 5 part blog post on why they're moving away from that technology

Look I love Lottie, but it's hilarious to me how far outside of "Facilitating short term rentals" it is. Facebook has the same thread to pull with React. I get that they're "trying to contribute to the ecosystem" but it's like an extension of the PhD for these coders.