Diseño de interfaces

Reutilizar estilos y componentes

Un token de diseño es un valor visual con nombre, como un color, con variantes clara/oscura cuando se definen. Un componente es un objeto de diseño reutilizable. Una instancia es un uso del componente; una variación local cambia solo ese uso. Permiten mantener pantallas repetidas con mayor coherencia.

1. Define tokens para los estilos reutilizables y aplícalos a los objetos.
2. Crea un componente con una parte repetida de la interfaz, como una tarjeta o un botón.
3. Coloca instancias en las pantallas correspondientes. Cambia texto u otros valores compatibles mediante variaciones locales.

4. Modifica un token compartido y revisa todos sus usos, incluidas las variantes clara y oscura.
5. Muestra las anotaciones durante la revisión y ocúltalas para comprobar el diseño limpio.

Ver el diseño sin anotaciones