AMA: Karri Saarinen, Designer - Creating Design Systems at Airbnb

almost 7 years ago from Karri Saarinen, Design System Lead at Airbnb

  • Karri SaarinenKarri Saarinen, almost 7 years ago (edited almost 7 years ago )

    Hey Cody,

    Did you use some sort of base (or golden) unit, cascading across all components? I'll assume you did:

    We wanted to base our designs on 8 and 4 point grid (4 is mostly only used for our icons). However, we ended using 24pt a lot. Basically that was the unit we decided for our side gutters, and that way it ended up, being the normal spacing.

    Tell me more about them! How did you use them?

    How'd they influence typography?

    The grid 8, and the 24 spacing, generally affected our type styles. I think spacing often goes with the typography. What we also knew that bounding boxes, basically the amount of space the type takes on native devices is generally the line-height. So we made sure that the line-heights would align with our grid, and our text size would work on those line-heights.

    We're these units relative to the device size/breakpoint Pixels? Ems? Rems?

    For native we are defining everything in 1x, in points. Basically currently our standard screen size is the iPhone 6 (375x667). The component width and positioning is related to the screen size with, but currently we are not scaling the components based on the screen size. Often the component is defined as relative to the screen size, but with fixed spacing and text sizes. For example a listing card on mobile, is always width: 100% - 48 (gutters), so in that way we always fit one full card on any screen. On tablet the rule changes to use 2 columns, so the size ends up being a width: 50% - 128 (gutters) - 24 (space between)

    how did you handle sharing the style guide (not online but psd or sketch file) so others can do their work

    I described this in another comment, but we use Git to facilitate the process of updating the files. After that we put the updated design component library in to a shared Box folder, which is available to everyone through the Sketch Templates. When ever designer wants the new updated library, they can just go to their chose Templates > DLS > DLS Phone.

    We are also working on a documentation site, that would house our general style guide, as well as have screenshots of the components and have motion examples.

    is Airbnb built on a component based framework as well?

    Yes, for this new launch of our mobile apps and the design system, we build it to be component based. I describe the system a bit more here:

    0 points