Crea un sistema de diseño

En este tutorial preparas las piezas que mantienen un sitio consistente: tokens para los colores, las fuentes y el espaciado de tu marca, clases que reutilizan un aspecto y un componente que reutiliza una estructura. Al final, cambiar un solo token o un solo componente actualiza todo el sitio. Empieza desde cualquier página con algunos botones, por ejemplo la página del tutorial Construye una landing page.

Configura los tokens

1. Abre la pestaña Tokens

   El inspector de la derecha tiene tres pestañas: Design, Interactions y Tokens. Abre Tokens. Tiene tres secciones: Colors, Spacing y Fonts. Los tokens pertenecen al sitio, así que todas las páginas los comparten.

2. Agrega los colores de tu marca

   En Colors, presiona + (Add color token). Aparece un token llamado color. Cámbiale el nombre a brand y elige tu color principal en el campo de color junto al nombre. Agrega dos más: ink para el texto y surface para los fondos.

3. Agrega una escala de espaciado

   En Spacing, presiona + (Add spacing token) y agrega algunos pasos, por ejemplo sm en 8, md en 16 y lg en 32.

4. Agrega tus fuentes

   En Fonts, abre Add font… y elige una fuente de Google para los títulos, por ejemplo Google · Inter. Para las fuentes de Google, el token muestra los pesos que puedes activar o desactivar. Agrega una segunda fuente para el texto del cuerpo si quieres.

Usa tokens en los estilos

1. Aplica un token de color

   Vuelve a Design y selecciona el botón de la página. En Fill, haz clic en la muestra de color y elige brand en la paleta de tokens. Ahora el campo muestra el nombre del token en lugar de un valor hexadecimal.

2. Aplica un token de espaciado

   En Layout → Padding, presiona el ícono de variable (Use a spacing token) y elige md. Padding, Margin y Gap aceptan tokens de espaciado.

3. Aplica un token de fuente

   Selecciona un título. En Typography → Font, los tokens de fuente aparecen primero. Elige el que agregaste.

4. Cambia un token

   Abre Tokens y cambia el color de brand. Todos los elementos que lo usan se actualizan a la vez. Para romper el vínculo en un elemento, presiona Detach token junto al nombre del token; el elemento conserva el valor actual.

Crea una clase de botón

1. Agrega una clase

   Selecciona el botón. En la barra de clases, arriba de la pestaña Design, escribe btn en Add class… y presiona ↵. Aparece una etiqueta .btn.

2. Dale estilo a la clase, no a la capa

   Debajo de las etiquetas, pon Style en Class .btn (o haz clic en la etiqueta). Ahora define el relleno, el padding, un Radius en Border y la fuente. Estos estilos viven en la clase, así que todos los elementos con .btn los reciben.

3. Agrega un estado hover

   Con la clase todavía como destino, elige Hover en la barra de estados, arriba de las secciones, y cambia un poco el relleno. Elige Default para volver.

4. Reutiliza la clase

   Selecciona otro botón, escribe btn en Add class… y presiona ↵. El nombre de la clase se sugiere mientras escribes. El botón toma todo el aspecto de una vez.

Agrega una clase combinada

1. Crea la combinación

   Selecciona el segundo botón. Escribe is-secondary en Add class… y presiona ⇧↵. Shift+Enter crea una clase combinada sobre la última clase, así que .is-secondary solo se aplica junto con .btn.

2. Dale estilo a la diferencia

   Pon Style en Class .is-secondary. Cambia solo lo que es distinto: un relleno transparente, un borde en brand y texto en brand. Todo lo demás sigue viniendo de .btn.

3. Mira cómo se propaga

   Cambia el radio en .btn. Los dos botones lo siguen, y el secundario conserva su propio relleno y borde.

Haz un componente de botón

1. Crea el componente

   Selecciona el botón primario y presiona ⌘⌥K, o haz clic derecho sobre él y elige Create component. El botón pasa a un nuevo componente y una instancia ocupa su lugar en la página.

2. Ponle nombre

   Abre la pestaña Components en la barra lateral izquierda. Haz clic derecho en el nuevo componente, elige Rename y llámalo Button.

3. Coloca instancias

   Arrastra Button desde la pestaña Components a la página, o presiona el + de su fila (Insert Button). Coloca dos o tres instancias.

4. Sobrescribe el texto

   Selecciona una instancia y haz doble clic en su texto. Escribe una nueva etiqueta, por ejemplo Book a call. El nuevo texto es una sobrescritura: se aplica solo a esta instancia.

5. Lee y restablece sobrescrituras

   Con la instancia seleccionada, la sección Instance muestra sus sobrescrituras. Presiona la flecha de restablecer junto a una sobrescritura para volver al valor del componente.

6. Edita el componente

   Presiona Edit component en la sección Instance y cambia el botón, por ejemplo su padding. Todas las instancias se actualizan, y el texto sobrescrito se queda como está.

Lo que aprendiste

• Los tokens guardan los colores, el espaciado y las fuentes de tu marca en un solo lugar; cambiar un token actualiza todos los elementos que lo usan.
• Las clases comparten un aspecto, las clases combinadas agregan una variación sobre una clase base, y los estados como Hover también funcionan en las clases.
• Los componentes comparten una estructura; cada instancia puede sobrescribir su texto y seguir recibiendo todos los demás cambios.

Sigue con los próximos tutoriales o lee las guías en las que se basa este: