↵

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

7 years ago from Jeff Hilnbrand, Design Manager at Scale AI

  • Richard Gazdik, 7 years ago

    This whole thing sounds pretty great. What do you mean by adapting components? Do you use the Fluid plugin in Sketch or you use something else? Do your adapting components only exist on iOS and Android? The biggest headache in our team right now is how to make reusable responsive components which could be used to build protos and test our quick mockups. I'm really curious about your approach and workflow...

    0 points
    • Karri SaarinenKarri Saarinen, 7 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