Airbnb - "Don’t Go There. Live There."(airbnb.com)

over 4 years ago from Jeff Hilnbrand, Design Manager at Scale AI

  • Karri SaarinenKarri Saarinen, over 4 years ago

    I actually started with the Fluid plugin, but found bit too finicky do it for the whole app / component library. Also the plugin kept breaking after every Sketch update. It could be fine for prototyping.

    So in the end, we just documented rules per size class (phone and tablet). Something like a listing card, is defined by device width minus the paddings ($width = 100% - (24+24). The height just comes from the photo aspect ratio ($width/1.5) + paddings + text details.

    On tablet, the rules are pretty much the same, but instead always fitting one card per screen, it now fits 2, the the cards adapt from portrait to landscape to always fit two cards + paddings.

    Generally we use aspect ratios and min/max-heights to define many of the components. These components behave the same in iOS & Android.

    Overall I just had to manually try the components in different sizes and test if the rules work. Now since the components are built, I can actually run them in the native simulators but before that I imagined a web tool could have been helpful for this.

    0 points