Cambiar colores, tipografía y bordes en todas las pantallas

Cuando el cliente cambia el color de su marca o quieres otra tipografía, no hace falta dictarlo pantalla por pantalla. En Design System lo cambias una vez y llega a todas las pantallas que lo usan, a los tokens y a las piezas compartidas, sin pasar por la IA.

Abrirlo

En el proyecto, pulsa la pestaña Design System. En ventanas estrechas está dentro de Más vistas (⋯).

Arriba tienes tres bloques: Colores, Tipografía y Bordes redondeados. Cada uno enseña el primero; Ver todos despliega el resto.

Cambiar un color

1. En Colores, busca el color. Cada tarjeta dice en cuántas pantallas sale (al pasar por encima ves cuáles) y, si también está en los tokens o en una pieza, También en el token o la pieza.
2. Pulsa Cambiar.
3. Elige el color nuevo: con el selector, con su código o entre Otros colores del proyecto. Abajo ves el Antes y el Después.
4. Pulsa Cambiar en y el número de pantallas.

Donde ese color se usa con transparencia, la conserva. El aviso dice también cuántos tokens y piezas cambiaron. Un clic en la muestra copia su código.

Unificar colores casi iguales

Si las pantallas usan tonos que casi no se distinguen, salen juntos en una tarjeta con casi iguales. Pulsa Unificar, elige El color que se queda y confirma: todos pasan a ser ese.

Cambiar una tipografía

1. En Tipografía, cada familia dice de dónde sale (Google Fonts o un archivo) y en cuántas pantallas se usa. La que lleva La del proyecto es la principal.
2. Pulsa Reemplazar y elige otra familia del proyecto, Una de Google Fonts… o Subir una fuente… (TTF, OTF, WOFF o WOFF2, hasta 8 MB).
3. Confirma con Reemplazar.

También puedes soltar el archivo de una fuente sobre la familia que quieres cambiar.

Cambiar el radio de las esquinas

1. En Bordes redondeados, pulsa Cambiar en el radio que quieras.
2. Mueve la barra o escribe los píxeles. La tarjeta de ejemplo te enseña cómo queda.
3. Pulsa Cambiar en y el número de pantallas.

Las píldoras y los círculos no se cambian aquí.

Volver atrás

Cada pantalla guarda el cambio en su historial: ábrela y, en Últimos cambios, Restaurar esta versión. Se deshace pantalla por pantalla. Lo cuenta El historial de una pantalla.

Lo que se pide con una bitácora

Aquí se cambia un valor exacto. Lo que sale de él, como un tono más oscuro para el hover, o crear los tokens del proyecto, se pide en una bitácora. La IA cambia primero los tokens, luego la guía de estilo y después las pantallas.

Cambiar es del Propietario y de quien Puede ejecutar con IA; los demás roles lo ven.