El botón Añadir de la ficha de Pigmento Norte mide 44 px de alto y nadie ha escrito 44 en ningún sitio. Es auto layout horizontal, gap 8, padding 12 y 16, hug contents: 12 px de relleno encima de una caja de línea de 20 px y 12 debajo, y la altura sale de la cuenta. Cambia la etiqueta de Añadir a Sin existencias y el botón se ensancha solo. Cambia el cuerpo de letra y la altura le sigue detrás.
Rocío Lastra Peña está montando ese carrito. Pigmento Norte es una tienda de bellas artes de Vitoria que vende por internet desde el año pasado, tiene 340 referencias y la rejilla enseña catorce por página. Los nombres van de Goma, cuatro letras, a Papel de acuarela prensado en frío 300 g, que son treinta y seis, y tres de las catorce de la primera página están sin existencias esta semana. Nadie que dibuje esa pantalla elige el contenido, ni el idioma, ni el ancho al que se lee. Lo que sí se elige es cómo se comporta cuando los tres llegan distintos del fichero.
La pantalla del fichero es un ejemplar de lo que estás haciendo
Una interfaz tiene una propiedad que el resto del pilar no tiene: la vuelve a dibujar una máquina cada vez que alguien la abre, con un contenido que no estaba en el fichero y a un ancho que no elegiste tú. Un cartel está terminado. Una pantalla es un juego de instrucciones que ejecutará más tarde algo sin criterio ninguno, y toda decisión que dejes implícita pasa a ser decisión de esa máquina.
Por eso los seis bloques de este tema no son seis estilos de pantalla, son seis clases de instrucción. Qué aspecto tiene una cosa es el diseño visual. De qué está hecha, los componentes. Cómo se llaman los valores y quién puede cambiarlos, los sistemas de diseño. Qué ocurre a un ancho que no abriste nunca, el diseño responsive. Qué se mueve y qué afirma ese movimiento, el movimiento en la interfaz. Y lo que hay que escribir porque la máquina no lo deduce, la entrega a desarrollo.
Cuatro reglas, con sus valores
Hug contents para el botón y fill container para la tarjeta. Esos dos ajustes deciden quién gana una discusión sobre el ancho: el botón pide exactamente el sitio que necesita su etiqueta, la tarjeta se queda con lo que le dé la columna. Puestos al revés, el botón se estira de lado a lado de la tarjeta mientras la tarjeta se encoge hasta el ancho de su palabra más larga, que es lo más común de ver en un primer fichero con auto layout.
Dibuja los cuatro estados: por defecto, hover, foco y desactivado. Esta es la regla más fácil de saltarse porque el fichero parece completo sin ella. El botón de Rocío está desactivado en las tres referencias sin existencias, y si el fichero no enseña nunca ese estado se lo inventa alguien durante el desarrollo, normalmente bajando la opacidad, que produce un botón que no pasa contraste y una clienta que lo pulsa tres veces. Con hover tampoco basta, porque la mitad de la gente que usa esa pantalla la está tocando y no tiene hover ninguno.
Un anillo de foco de 2 px de grosor y 2 px de separación. La separación es lo que mantiene el anillo legible sobre un botón relleno, y el grosor es el número del criterio de apariencia del foco de la WCAG 2.2, que es de nivel AAA, así que trátalo como un valor por defecto sensato y no como un suelo legal. Es además lo que más se borra en toda la interfaz: el navegador lo dibuja gratis y se quita por feo, y quitarlo convierte un teclado que funciona en un cursor invisible.
Y el tamaño, que son dos números y no uno. 44 por 44 para un dedo, y 24 por 24 como suelo. El primero es el objetivo cómodo que Apple publica desde 2013 y el que conviene dibujar. El segundo es el mínimo de la WCAG 2.2, publicada en 2023, y es un suelo y no una meta. El botón de Añadir pasa los dos por accidente, por culpa del relleno, que es la manera habitual en que llega un valor bueno: de una regla aplicada con constancia y no de alguien mirando una especificación.
El dato que llega después es español, y ahí se parte la casilla
El contenido llega cuando el fichero ya se ha ido, y en esta tienda llega con forma española. Cuatro casillas del formulario de envío lo enseñan mejor que cualquier regla.
Un código postal es texto: 01001 pierde el cero como número. El de la calle donde está la tienda empieza por cero, igual que todo Álava, todo Barcelona y todo Almería, y guardado como número entero sale 1001 y la etiqueta del paquete se imprime mal. La casilla se dibuja para cinco caracteres y se valida como cadena, nunca como cifra.
Los apellidos son dos. Una casilla llamada Apellido, en singular, obliga a media España a decidir cuál de los suyos cabe, y una sola casilla de Nombre y apellidos rompe el saludo del correo de confirmación, que acaba diciendo Hola Rocío Lastra Peña. Van dos, Nombre y Apellidos, y la segunda con sitio para las dos palabras.
Un IBAN español ocupa 24 caracteres, así que la casilla de la transferencia se dibuja con ancho para 24 y no para los 22 del ejemplo inglés que venía en la plantilla. Y la fecha se escribe 03/09/2026, el día delante, que es lo que la clienta teclea se lo ponga fácil el calendario o no.
El precio lleva el símbolo detrás y coma decimal: 1.234,56 €. Un componente de precio alineado por el símbolo funciona en inglés y descoloca la columna aquí, porque el euro no está en el mismo extremo. Antes de dar ninguna pantalla por terminada, pega dentro el dato más largo que tengas, en las cuatro casillas y en la ficha.
Prueba el caso vacío en el mismo minuto. Una ficha sin foto, una lista sin nada, un precio que no ha cargado. En una tienda esos no son casos extremos, son un martes, y son los estados que deciden si la pantalla parece rota o parece que está esperando.
Un botón
Cuatro piezas, y a la mayoría de los kits les faltan tres
Un componente no es un dibujo que se ha archivado bien. Es un dibujo más tres cosas que deciden qué pasa cuando abre el fichero una máquina.
- 01La regla de disposiciónAuto layout horizontal, gap 8, padding 12 y 16, hug contents
- 02Los estadosPor defecto, hover, foco y desactivado, dibujados como variantes y no descritos
- 03Los valores que leeTokens con nombre, para que el tema oscuro cambie qué significa superficie-elevada y nada más
- 04El nombre bajo el que se archivaLo que hace, con las palabras que el equipo ya usa cuando lo pide
Quita una cualquiera y las otras tres dejan de funcionar. Un componente sin estados es una foto; sin tokens es una copia del sistema por su cuenta; con el nombre equivocado lo vuelve a construir el mes que viene alguien que no supo encontrarlo.
El atasco tiene una segunda mitad, y es más callada
La primera mitad ya está dicha una planta más arriba: se aprende el lienzo y no se aprende el sistema. La segunda pilla justo a quien sí aprendió componentes. Un componente con una sola apariencia es una foto bien archivada. Las variantes son el asunto: el mismo botón por defecto, en hover, con foco y desactivado, para que los estados sean decisiones del fichero y no conjeturas de quien programa. Un kit de cuarenta componentes dibujados cada uno en un solo estado no ha resuelto el problema, lo ha ordenado.
La señal de que estás en esa segunda mitad es concreta: abres tu propio fichero, buscas el estado desactivado de un botón y no está, ni siquiera como nota.
Hazlo dos veces a mano antes de hacerlo una vez bien
El orden de este tema va al revés de lo que parece. Dibuja la primera pantalla a mano, todo rectángulos. Dibuja la segunda a mano también, y fíjate en que has hecho el mismo botón dos veces y un poco distinto. Solo entonces vuelve atrás y sustituye los dos por un componente, que es el punto en el que un kit deja de ser archivo y empieza a ser ahorro. Desde ahí la tercera pantalla no cuesta nada, y la número catorce tampoco.
Empezar por el otro lado, desde una biblioteca que hizo otra persona, enseña sus decisiones sin ninguno de los motivos, y la señal es alguien que no sabe hacer un botón sin ella. Produce además un fallo muy concreto: una pantalla enteramente correcta según el sistema que no contesta la pregunta de nadie, porque una biblioteca de componentes tiene opinión sobre el relleno y ninguna sobre para qué es la pantalla. Esa pregunta es de UX y conviene cerrarla antes que todo lo demás.
Nombrar es lo último del orden y lo que decide si el sistema aguanta un año. En el kit de Pigmento Norte, nombra el token por lo que hace, no por el color que tiene. Un valor llamado superficie-elevada puede pasar de casi blanco a casi negro cuando llegue el tema oscuro; uno llamado gris-100 hay que renombrarlo o mentir con él, y en la práctica se miente.
Qué abrir en 2026
Figma es el estándar aquí desde 2019, cuando le quitó el sitio a Sketch por funcionar dentro del navegador y dejar entrar a más de una persona en el mismo fichero. La capa gratuita es real y todos los valores de esta página se pueden poner en ella. Penpot es la alternativa que merece nombrarse y no la que no usa nadie: código abierto, instalable en tu propio servidor, y la respuesta cuando los ficheros no pueden vivir en la máquina de otro, que para un hospital o un banco es una condición y no una preferencia.
La entrega es donde muerde el precio. El modo Dev de Figma llegó en 2023 y sustituyó al panel de inspección gratuito del que quien programaba sacaba las medidas, y es un asiento de pago aparte de la capa gratuita. Las condiciones se han movido más de una vez desde entonces, así que mira el precio del día en vez de fiarte de la captura de un tutorial, y cuenta al planificar que quien reciba tu fichero puede no tener la vista alrededor de la cual montaste la entrega. Figma cubre el programa en sí.
Lo que nada de esto decide es qué debe sentirse mientras la pantalla cambia, que es la única parte de una interfaz que no se puede dibujar quieta. Una ficha que aparece afirma una cosa y una ficha que entra desde donde ocurrió el toque afirma otra, y ninguna de las dos es adorno cuando alguien recorre la tienda con prisa. Esa es la pregunta que queda al salir de aquí, y se contesta con duraciones y curvas en vez de con píxeles: ¿cuánto puede durar un cambio antes de leerse como una espera? Debajo de todo siguen los fundamentos del diseño, que no cambian porque la pantalla se vuelva a dibujar sola.