Airbnb Design

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…

- 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.

It's really great to see more and more companies emerging in the market from these initial ideas/PoC: [1] Pix2Code: https://arxiv.org/abs/1705.07962 [2] Sketch2Code: https://airbnb.design/sketching-interfaces/ [3] ScreenShot2Code: https://blog.floydhub.com/turning-design-mockups-into-code-with-deep-l…

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’ &…

I think something like what you're wishing for will happen, but I don't think it will come from Adobe. I explored a bunch of apps in this category over the weekend and was pretty impressed with what's out there, although it still feels early. Rive (https://rive.app/) is probably the one I'm most excited about; their state-machine approach is novel (at least to me) and feels like a solid approach. Unfortunately they don't support text yet, which is a deal-breaker for what I wanted to do, but they say it's coming. The Lottie (https://airbnb.design/lottie/) ecosystem is also interesting. Funny enough, Adobe still seems to dominate as a pipeline for generating Lottie files (Illustrator -> After Effects), even though you need a third-party plugin to do it.

Lottie[0] is the animation library [0] https://airbnb.design/lottie/

Let me do some digging and see if there is anything internal I can share. If not, the airbnb engineering blog has some good articles on this approach: https://airbnb.design/building-a-visual-language/

https://airbnb.design/lottie/ lottie? if you already know how to make svgs

Exactly what came to my mind! Along with airbnb's take on it: https://airbnb.design/sketching-interfaces/

AirBnB have created a similar project. They posted this back in October https://airbnb.design/sketching-interfaces/

I'm not sure what you mean—but it is very important to note that the bulk of the work of creating a new, globally-internationalized typeface, is hard, tedious editing of glyphs and kerning tables etc. Sure, AirBnB staff were involved, but they did not put in the huge amount of effort necessary to actually create the font. So that effort did not happen on AirBnB's property, so to speak, while AirBnB design staff "got to commission a font" as part of their career progress. https://airbnb.design/introducing-airbnb-cereal/ is PR puff, it could mean they spent an afternoon or a decade of human-hours on this.

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.

Good call, it wasn't referenced in this post. It's talked about on the introduction: https://airbnb.design/introducing-airbnb-cereal/ The story: https://www.wired.com/2017/02/airbnbs-surprising-path-to-y-combinator/

That image comes straight from their own announcement: https://airbnb.design/introducing-airbnb-cereal/

Yes! They were an inspiration for this actually. They can generate sketch files from react components (https://github.com/airbnb/react-sketchapp) but not the other way around. The painting with code demo (https://airbnb.design/painting-with-code/) was a step towards that though, and I think it's really interesting as well.

Coincidentally, I just ran across this article [1] about Airbnb’s tool to turn UI sketches into interactive running code. The author of this project links to it in the post about their project (which is in turn linked from the readme). [1]: https://airbnb.design/sketching-interfaces/

Author here. While the flawed 'Secure' indicator on every HTTPS site will go away soon in favour of negative indicators for non-HTTPS connections, the worrying thing here is the researchers didn't really examine their own biases. https://airbnb.design/anotherlens/#answer2 Speaking of biases: while CertSimple is obviously interested here - online identity is our job - the tweets included, both for and against marking all HTTPS as 'Secure', are from Chrome engineers employed by Google.

The performance does definitely depend on the complexity of the animation. Small icons like the hamburger menu, wish list heart, hamburger arrow, etc run at 60fps. Even the main Lottie logo (http://airbnb.design/lottie/) that has pretty complex trim paths renders at ~60fps. Masks and mattes are the feature that incur the largest performance hit because they require allocating a bitmap (8 bit for mattes and 32 bit for masks), rendering to them, then drawing them back to the canvas.

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.

Check out https://airbnb.design/sketching-interfaces/

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.