Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Design system with Design Tokens

203 visualizaciones

Publicado el

Construcción de Design System con Design Tokens

Publicado en: Diseño
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Design system with Design Tokens

  1. 1. Design Systems with Design Tokens
  2. 2. Somos Luis Montoro y Alfonso Morcuende HOLA.
  3. 3. THONET N.01 thonet.realized.es
  4. 4. Un Sistema de Diseño NO ES IGUAL QUE LOS OTROS SISTEMAS DE DISEÑO.
  5. 5. INSIGHTS 1. Tecnológicamente agnóstico 2. Diseño universal de componentes 3. El entregable es el producto
  6. 6. ¿Cómo podríamos? ALMACENAR DECISIONES DE DISEÑO.
  7. 7. https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421
  8. 8. Ceci n'est pas une button.
  9. 9. Tipografía Iconografía Color
  10. 10. Design Primitives https://medium.com/sketch-app-sources/using-sketch-libraries-and-primitives-to-build-an-even-better-system-of-buttons-ecc8f25486ac
  11. 11. Tipografía Iconografía Color Design Primitives 📏 Spacing ⬆ Layer Shape/Builder Imagen Animación 🎧 Sonido 🎬 🌄 🛠
  12. 12. Show me the money…
  13. 13. Tipografía ... Opciones "color-1":{ "value": "#DA291B" } "color-2":{ "value": "#FF34BB" } Color ... "font-family-1":{ "value": "Barlow" } "font-family-2":{ "value": "Lato" } Spacing ... "resting":{ "value": "none" } “raised": { "value": "0 8px 10px 0 Layer ... “spacing-m": { "value": "1" } "spacing-xl":{ "value": "2" } 📏 ⬆ rgba(0,0,0,0.10)" }
  14. 14. Decisiones "color":{ “brandMain":{ "value": "{color.color-1.value}" } }
  15. 15. Arquitectura "component": { "button": { "color" : { "fill" : { "value": "{color.brandMain.value}" } "border": { "value": "none" } "font" : { "value": “{color.brandMainText.value}” } } } }
  16. 16. Ceci est une button. $state $border $fill $layer $fontFamily $desktopFontSize $spacing
  17. 17. 📏 ⬆ 🎧 🎬 🌄 🛠 Almacenada en una capa de abstracción Opciones Decisiones Arquitectura
  18. 18. Primitives + Design Tokens 1. Especificaciones que cualquier persona o máquina puede leer 2. Decisiones de diseño almacenadas en una capa de abstracción 3. Agnósticos tecnológicamente (realmente multiplataforma) 4. También agnósticos (o casi) en herramientas de edición visual 5. Una única fuente de verdad accesible a todos los miembros de la organización 6. El camino visible desde diseño al lugar que este es implementado en el producto
  19. 19. ARE DESIGN DECISIONS PROPAGATED THROUGH A SYSTEM. Design Tokens Nathan Curtis
  20. 20. 📏 ⬆ 🎧 🎬 🌄 🛠
  21. 21. 📏 ⬆ 🎧 🎬 🌄 🛠 TOKEN DATA YAML file
  22. 22. 📏 ⬆ 🎧 🎬 🌄 🛠 TOKEN DATA YAML file TOKEN DATA JSON file iOS MD DOCUMENT Documentation Website TOKEN DATA XML file Android
  23. 23. 📏 ⬆ 🎧 🎬 🌄 🛠 TOKEN DATA YAML file TOKEN DATA JSON file iOS MD DOCUMENT Documentation Website TOKEN DATA XML file Android
  24. 24. 📏 ⬆ 🎧 🎬 🌄 🛠 TOKEN DATA YAML file TOKEN DATA JSON file iOS MD DOCUMENT Documentation Website TOKEN DATA XML file Android Web TOKENS AS VARIABLES STYLUS TOKENS AS VARIABLES SASS TOKENS AS VARIABLES LESS
  25. 25. Show me the money…
  26. 26. Ahora que podemos almacenar diseño… ¿Cómo podríamos? ENTREGAR PRODUCTO, NO UN DISEÑO QUE SE PARECE AL PRODUCTO.
  27. 27. Ceci n'est pas une product.
  28. 28. IT’S DESIGNERS, ENGINEERS, AND THE REST OF THE TEAM SHARING THE RESPONSIBILITY TO BUILD A QUALITY PRODUCT. REDUCE THE BARRIERS, SUPPORT AND EMPOWER THEM, AND DESIGNERS WHO CODE WILL BECOME THE NORM. True collaboration isn’t throwing designs over the wall. Diana Mounter
  29. 29. KNOWLEDGE Design decisions at an abstract layer ENGINE That renders UCD Universa Component Definition JSON File THEO Plugin ARTEFACTOS PRODUCT MADE VISUAL SKETCH File or any other in the future… PRODUCT INFO Documentation Website COMPONENTS PRODUCT CODE ANY Technology Conversion
  30. 30. Show me the money…
  31. 31. GRACIAS.

×