How do native apps fit into Design Systems?

How do native apps fit into Design Systems?

Slides for a talk Joey Kaan & Jolanda Verhoef gave at the GDG Brussels Meetup in April 2018.

Af7e5e2b05ae5f8666233e8fd9122faa?s=128

Jolanda Verhoef

April 25, 2018
Tweet

Transcript

  1. How do native apps fit into Design Systems?

  2. Jolanda Verhoef @lojanda Joey Kaan @joeykaan

  3. Designed by Vilmosvarga / Freepik

  4. None
  5. None
  6. None
  7. None
  8. None
  9. Designed by Vilmosvarga / Freepik

  10. 3500 Hipster Style Employees Designed by Kubanek / Freepik

  11. 200 Developers Designed by Kubanek / Freepik

  12. 20 UX Designers Designed by Kubanek / Freepik

  13. 5 Android devs Designed by Kubanek / Freepik

  14. None
  15. Designed by Vilmosvarga / Freepik

  16. Design system?

  17. None
  18. None
  19. None
  20. None
  21. None
  22. Design tokens are named entities that store visual design attributes.

    ~ Lightning design system
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. Understanding not only the what, but the why, behind the

    design of a system is critical to creating an exceptional user experience. Defining and adhering to those standards is how we create that understanding. ~ Marco Suarez - Product Designer at InVision
  30. Examples

  31. None
  32. None
  33. None
  34. None
  35. None
  36. Why would I want this?

  37. None
  38. None
  39. What went wrong?

  40. None
  41. None
  42. None
  43. None
  44. Recipe for success

  45. None
  46. None
  47. None
  48. What about native?

  49. None
  50. None
  51. None
  52. None
  53. None
  54. React Native https://facebook.github.io/react-native/

  55. Flutter https://flutter.io/

  56. None
  57. Towards a solution

  58. Design Tokens Components Documentation Documentation Documentation App Components Android XML

  59. Design Tokens

  60. XML PList YAML or JSON SCSS HTML

  61. Theo https://github.com/salesforce-ux/theo

  62. Design Tokens HTML Android XML

  63. None
  64. Components

  65. Screenshot Tests for Android github.com/facebook/screenshot-tests-for-android

  66. Component Library Screenshots

  67. Espresso https://github.com/googlesamples/android-testing

  68. Component Library Screenshots Behavior tests

  69. Design Tokens HTML Component Library Screenshots Behavior tests Components Android

    XML
  70. Design Tokens HTML Component Library Screenshots Behavior tests Components Android

    App Android XML
  71. Demo

  72. The future

  73. None
  74. None
  75. Lona https://github.com/airbnb/Lona

  76. What if we had a single design system specification that

    encodes all of the detail needed to accurately translate from design to code? This spec would act as the source of truth. An engineer could then write code which captures the design with 100% accuracy. If the design file is missing a key piece of information, the designer and engineer could work together to add it to the source of truth. ~ Lona documentation
  77. Questions?

  78. Jolanda Verhoef @lojanda Joey Kaan @joeykaan