Construcción de Design System con Design Tokens

1. Design Systems with Design Tokens

2. Somos Luis Montoro y Alfonso Morcuende
HOLA.

3. THONET N.01
thonet.realized.es

4. Un Sistema de Diseño
NO ES IGUAL QUE LOS
OTROS SISTEMAS DE
DISEÑO.

5. INSIGHTS
1. Tecnológicamente agnóstico
2. Diseño universal de componentes
3. El entregable es el producto

6. ¿Cómo podríamos?
ALMACENAR
DECISIONES DE DISEÑO.

7. https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421

9. Ceci n'est pas une button.

10. Tipografía Iconografía Color

11. Design Primitives
https://medium.com/sketch-app-sources/using-sketch-libraries-and-primitives-to-build-an-even-better-system-of-buttons-ecc8f25486ac

12. Tipografía
Iconografía
Color
Design Primitives
📏 Spacing
⬆ Layer
Shape/Builder
Imagen
Animación
🎧 Sonido
🎬
🌄
🛠

13. Show me the money…

14. 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)" }

15. Decisiones
"color":{
“brandMain":{ "value": "{color.color-1.value}" }
}

16. Arquitectura
"component": {
"button": {
"color" : {
"fill" : { "value": "{color.brandMain.value}" }
"border": { "value": "none" }
"font" : { "value": “{color.brandMainText.value}” }
}
}
}

17. Ceci est une button.
$state
$border
$fill
$layer
$fontFamily
$desktopFontSize
$spacing

18. 📏
⬆
🎧
🎬
🌄
🛠
Almacenada en una capa de abstracción
Opciones
Decisiones
Arquitectura

19. 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

20. ARE DESIGN DECISIONS
PROPAGATED THROUGH
A SYSTEM.
Design Tokens
Nathan Curtis

21. 📏
⬆
🎧
🎬
🌄
🛠

22. 📏
⬆
🎧
🎬
🌄
🛠 TOKEN DATA
YAML file

23. 📏
⬆
🎧
🎬
🌄
🛠 TOKEN DATA
YAML file
TOKEN DATA
JSON file
iOS
MD
DOCUMENT
Documentation
Website
TOKEN DATA
XML file
Android

24. 📏
⬆
🎧
🎬
🌄
🛠 TOKEN DATA
YAML file
TOKEN DATA
JSON file
iOS
MD
DOCUMENT
Documentation
Website
TOKEN DATA
XML file
Android

25. 📏
⬆
🎧
🎬
🌄
🛠 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

26. Show me the money…

27. Ahora que podemos almacenar
diseño… ¿Cómo podríamos?
ENTREGAR PRODUCTO,
NO UN DISEÑO QUE SE
PARECE AL PRODUCTO.

28. Ceci n'est pas une product.

30. 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

31. 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

32. Show me the money…

33. GRACIAS.