Building a Mobile Design System

Learn how to build a mobile design system from the ground up. Learn what a design system is, how it's useful to your team, how it can help speed up your development and the first few things you need to focus on to get started successfully.

Transcript

1. @krstnfx kristina.io MOBILE DESIGN SYSTEMS Kristina Fox | Senior iOS Engineer | Intuit
2. @krstnfx kristina.io h i t u n e s . a p p l e . c o m / u s / a p p / q u i c k b o o k s - s e l f - e m p l o y e d / i d 8 9 8 0 7 6 9 7 6
3. @krstnfx kristina.io design system? W H A T I S A
4. @krstnfx kristina.io Design system Design system A series of components that can be reused in different combinations. Design systems allow you to manage design at scale. W H A T I S A D E S I G N S Y S T E M ? f o r u m o n e . c o m / i d e a s / w h a t - i s - d e s i g n - s y s t e m “
5. @krstnfx kristina.io
6. @krstnfx kristina.io
7. @krstnfx kristina.io Title label Body text
8. @krstnfx kristina.io Title label Body text
9. @krstnfx kristina.io Title label Body text Title label Body text Title label Body text Title label Body text
10. @krstnfx kristina.io
11. @krstnfx kristina.io Title label Body text Title label Body text Title label Body text Title label Body text
12. @krstnfx kristina.io b r a d f r o s t . c o m / b l o g / p o s t / a t o m i c - w e b - d e s i g n /
13. @krstnfx kristina.io benefit? W H O D O E S I T
14. @krstnfx kristina.io Everyone! Everyone! W H O D O E S I T B E N E F I T ? ! Engineers " Designers # End users
15. @krstnfx kristina.io applicable? W H E R E I S I T
16. @krstnfx kristina.io a i r b n b . d e s i g n / b u i l d i n g - a - v i s u a l - l a n g u a g e
17. @krstnfx kristina.io a i r b n b . d e s i g n / b u i l d i n g - a - v i s u a l - l a n g u a g e
18. @krstnfx kristina.io m e d i u m . c o m / t a p - t o - d i s m i s s / a - d e s i g n - s y s t e m s - i m p a c t - 1 5 9 f 4 a d 3 c 2 3 0
19. @krstnfx kristina.io get started? H O W D O Y O U
20. @krstnfx kristina.io $ “How to create a mobile design system”
21. @krstnfx kristina.io m e d i u m . f r e e c o d e c a m p . o r g / h o w - t o - b u i l d - a - d e s i g n - s y s t e m - w i t h - a - s m a l l - t e a m - 5 3 a 3 2 7 6 d 4 4 a c
22. @krstnfx kristina.io % How to implement a mobile design system
23. @krstnfx kristina.io b r a d f r o s t . c o m / b l o g / p o s t / a t o m i c - w e b - d e s i g n /
24. @krstnfx kristina.io What are the most basic building blocks?
25. @krstnfx kristina.io What are the most basic building blocks? Fonts and colors!
26. @krstnfx kristina.io Congrats! You’re already started!
27. @krstnfx kristina.io Fonts Fonts H O W D O Y O U G E T S T A R T E D ? enum FontStyle { case display1 case display2 case display3 case headline case headline2 case hero case pageTitle }
28. @krstnfx kristina.io Colors Colors H O W D O Y O U G E T S T A R T E D ? enum Color { case blue01 case blue02 case blue03 case quickbooksGreen case quickbooksLtGray case quickbooksDkGray case pink01 }
29. @krstnfx kristina.io label.textColor = UIColor(named: "blue01")
30. @krstnfx kristina.io UI Controls UI Controls H O W D O Y O U G E T S T A R T E D ? UIKit standard QuickBooks Self-Employed Lyft
31. @krstnfx kristina.io UI Components UI Components H O W D O Y O U G E T S T A R T E D ? let doneButton = ActionButton()
 doneButton.setButton(style: .Save) Done
32. @krstnfx kristina.io UI Components UI Components H O W D O Y O U G E T S T A R T E D ? let deleteButton = ActionButton()
 deleteButton.setButton(style: .Destructive)
33. @krstnfx kristina.io View Components View Components H O W D O Y O U G E T S T A R T E D ? a i r b n b . d e s i g n / b u i l d i n g - a - v i s u a l - l a n g u a g e
34. @krstnfx kristina.io View Components View Components H O W D O Y O U G E T S T A R T E D ? d e s i g n s y s t e m . q u i c k b o o k s . c o m / b o l t
35. @krstnfx kristina.io Piecing Together Piecing it Together H O W D O Y O U G E T S T A R T E D ?
36. @krstnfx kristina.io Epoxy by Airbnb Epoxy by Airbnb H O W D O Y O U G E T S T A R T E D ? override fun buildModels(photos: List<Photo>, loadingMore: Boolean) { } g i t h u b . c o m / a i r b n b / e p o x y header { id("header") title("My Photos") description("My album description!") } photos.forEach { photoView { id(it.id()) url(it.url()) } }
37. @krstnfx kristina.io Implementing de Implementing Design Systems H O W D O Y O U G E T S T A R T E D ? • Fonts & Colors • UI Controls • UI Components • View Components • Piecing it together
38. @krstnfx kristina.io keep others aligned? H O W D O Y O U
39. @krstnfx kristina.io Documentation Documentation is Key H O W D O Y O U K E E P O T H E R S A L I G N E D ? m a t e r i a l . i o / d e v e l o p / i o s / c o m p o n e n t s / b u t t o n s /
40. @krstnfx kristina.io Stay in sync with Stay in sync with design H O W D O Y O U K E E P O T H E R S A L I G N E D ? ! Engineers " Designers
41. @krstnfx kristina.io things to keep in mind? W H A T A R E S O M E
42. @krstnfx kristina.io Over-engineering Over-engineering is bad W H A T A R E S O M E T H I N G S T O K E E P I N M I N D ? Just because you can, doesn’t mean you should. “
43. @krstnfx kristina.io Building a workin Building a working relationship W H A T A R E S O M E T H I N G S T O K E E P I N M I N D ? ! Engineers " Designers
44. @krstnfx kristina.io Thanks! @krstnfx | kristina.io