An Introduction to Multi-Platform Design Systems

An Introduction to Multi-Platform Design Systems Danny Banks @dbanksdesign bit.ly/clarity2020-multiplatform

Less than 10% of public design systems support platforms other than the web.* * dbanks.design/blog/multi-platform

Differentiating factors

Consistency Cohesion

Applications don’t need to look exactly the same across all platforms.

Foundations Principles Brand Content strategy Localization Communications

Design tokens Foundations

Definitions Design tokens Foundations

Component Definitions <example-banner variant=”warning” title=”Uh oh” description=”Something bad happened” />” <com.example.component.Banner app:variant=”warning” app:title=”Uh oh” app:description=”Something bad happened” />” let banner = Banner( variant: .warning, title: “Uh oh”, description: “Something bad happened” );

“ We design and build in parallel so any discussions on details that come up during implementation (and there are usually many) get addressed and considered together. A system built on parity: How to treat all of your users equally by Linzi Berry, Kathy Ma, Sam Soffes from Lyft

Systems should support how creators work.

Efficiency Autonomy

Low friction environments

Lowest fidelity to express intent Rely less on mockups Get to code quicker Designer & developer pairing

Spread ownership Distribute creation Own the full experience Meet creators where they are

Cohesion Autonomy

Over 25% of public design systems support multiple platforms next year.

Thank You! Danny Banks @dbanksdesign bit.ly/clarity2020-multiplatform