El botón de agregar de Rodada 41 mide 44 px de alto y nadie tecleó 44 en ninguna parte. Es auto layout horizontal, gap 8, padding 12 y 16, hug contents: 12 píxeles de aire arriba de una caja de texto de 20 y 12 abajo, y la altura sale de la cuenta. Cambia la etiqueta y el botón se ensancha solo. Cambia el tamaño de letra y la altura lo sigue. Esa es la diferencia entre dibujar un botón y describirlo, y es casi todo este tema.
Rodada 41 vende bicicletas en Guadalajara y tiene 60 productos en línea, con nombres que van de Cámara, seis caracteres, a Bicicleta de ruta talla 54 en aluminio, que son 44, y con ocho modelos agotados en cualquier momento del mes. Quien dibuja esa tienda no escoge el contenido, ni el idioma, ni el ancho al que se lee. Lo que sí escoge es cómo se comporta cuando los tres llegan distintos del archivo.
La pantalla del archivo es una instancia de la cosa que estás haciendo
Una interfaz tiene una propiedad que el resto de Diseño no tiene: la vuelve a dibujar una máquina cada vez que alguien la abre, con contenido que no estaba en el archivo y a un ancho que no elegiste. Un cartel está terminado. Una pantalla es un juego de instrucciones que después ejecuta algo sin criterio, y cada decisión que dejaste implícita pasa a ser decisión de esa máquina.
Por eso las seis carpetas de abajo no son seis estilos de pantalla, son seis clases de instrucción. Cómo se ve una cosa es Diseño visual. De qué está hecha es Componentes. Cómo se llaman los valores y quién puede cambiarlos es Sistemas de diseño. Qué pasa a un ancho que nunca abriste es Diseño responsivo. Qué se mueve y qué afirma ese movimiento es Movimiento. Y lo que hay que escribir porque la máquina no lo puede deducir es Entrega a desarrollo.
Cuatro reglas, con sus valores
Hug contents para el botón, fill container para la tarjeta. Esos dos ajustes deciden quién gana una discusión de ancho: el botón pide exactamente el espacio que necesita su etiqueta y la tarjeta se toma el que le dé la columna. Al revés, el botón se estira de lado a lado de la tarjeta mientras la tarjeta se encoge al ancho de su palabra más larga, que es lo más común de ver en un primer archivo con auto layout.
Dibujar los cuatro estados: normal, hover, foco y desactivado. Es la regla más fácil de saltarse porque el archivo se ve completo sin ella. El botón de Rodada 41 va desactivado en los ocho modelos agotados, y si el archivo nunca muestra ese estado, alguien en el desarrollo se lo inventa, casi siempre bajándole la opacidad, y salen un botón que no pasa contraste y un cliente que le pica seis veces. El hover tampoco basta solo: más de la mitad de la gente está tocando esta pantalla con el dedo y no tiene hover.
Un anillo de foco de 2 px con 2 px de separación. La separación es lo que lo mantiene legible encima de un botón lleno, y el grosor es el número del criterio de apariencia del foco de WCAG 2.2, que es de nivel AAA, así que conviene tratarlo como un buen valor por defecto y no como un piso legal. Es también lo más borrado del oficio: el navegador lo dibuja gratis y alguien lo quita por feo, con lo cual convierte un teclado que servía en un cursor invisible.
Y el tamaño, que son dos números y no uno: 44 por 44 para un pulgar, 24 por 24 como piso. El primero es el blanco cómodo que Apple publica desde 2013. El segundo es el mínimo de WCAG 2.2, publicada en 2023, y es un piso y no una meta. El botón de agregar pasa los dos por accidente, por el padding, que es la manera normal en que llega un buen valor: de una regla aplicada parejo y no de alguien revisando una norma.
El estado que se rompe en español es el error
Los cuatro estados de arriba son los mismos en cualquier idioma. El que cambia aquí es el quinto, el del formulario cuando algo sale mal, y cambia por una razón mecánica: el aviso en español ocupa más renglones. Correo inválido cabe en uno; Escribe un correo electrónico válido para enviarte la confirmación no cabe, y al partirse empuja hacia abajo todo lo que sigue.
De ahí sale una regla que ninguna guía en inglés escribe. El mensaje de error se dibuja en dos renglones desde el archivo, con el texto real y no con un texto de relleno, y el espacio entre campos se decide con el mensaje puesto. Un formulario ajustado contra el mensaje de un solo renglón queda apretado el día que aparece el de verdad, y ese día es el día en que alguien se está equivocando, que es el peor momento para que la pantalla brinque.
El ancho de referencia es 360, no 390
El kit de interfaz que se descarga viene dibujado sobre un iPhone, alrededor de 390 puntos de ancho. El aparato de este mercado es un Android de gama media, que suele reportar 360. Treinta puntos parecen nada y son la diferencia entre dos tarjetas por renglón y una, con nombres de producto que además son más largos que los del kit. Dibuja el archivo a 360 y revísalo a 390, no al revés.
El precio es el otro pedazo que el kit no trae. El signo de pesos significa tres monedas distintas según quién esté mirando, así que el monto lleva su código de moneda: MXN o COP, escrito junto al número y no escondido en la configuración de la cuenta. Y en México la tarjeta de producto carga una línea más que en ningún kit en inglés existe, la de meses sin intereses, que en Rodada 41 dice 12 pagos y es la línea que la gente lee antes que el precio. Un componente de precio dibujado sin ella se rehace completo el día que el negocio la activa.
Un componente
Cuatro piezas, y a la mayoría de los kits le faltan tres
Un componente no es un dibujo archivado. Es un dibujo más tres cosas que deciden qué pasa cuando el archivo lo abre una máquina.
- 01La regla de acomodoAuto layout horizontal, gap 8, padding 12 y 16, hug contents
- 02Los estadosNormal, hover, foco y desactivado, dibujados como variantes y no descritos
- 03Los valores que leeTokens con nombre, para que un tema oscuro cambie qué significa superficie elevada y nada más
- 04El nombre bajo el que está guardadoLo que hace, con las palabras que el equipo ya usa para pedirlo
Quítale cualquiera de las cuatro y las otras tres dejan de funcionar. Sin estados es una foto; sin tokens es una copia aparte del sistema; con el nombre equivocado lo vuelve a dibujar el mes que entra alguien que no lo encontró.
El atasco tiene una segunda mitad, y es más callada
La gente aprende el lienzo y no aprende el sistema, y en este tema eso son auto layout y componentes. La segunda mitad agarra a quien sí los aprendió: un componente con una sola apariencia es un dibujo bien archivado. Las variantes son el punto, el mismo botón en normal, hover, foco y desactivado, para que los estados sean decisiones del archivo y no adivinanzas del desarrollo. Un kit de cuarenta componentes dibujados en un solo estado no resolvió el problema, lo ordenó.
Ármalo dos veces a mano antes de armarlo bien una vez
El orden de este tema corre al revés de lo que parece. Dibuja la primera pantalla a mano, todo rectángulos. Dibuja la segunda a mano también, y date cuenta de que hiciste el mismo botón dos veces y un poco distinto. Hasta entonces regresa y reemplaza los dos por un componente, que es el punto donde un kit deja de ser archivo y empieza a ser ahorro. De ahí la tercera pantalla no cuesta nada, y la número catorce tampoco.
Empezar del otro lado, desde una biblioteca que hizo alguien más, te enseña sus decisiones sin ninguna de sus razones, y la señal es una persona que no puede producir un botón sin ella. También produce la falla específica de una pantalla entera bien armada que no le contesta nada a nadie, porque una biblioteca tiene opinión sobre el padding y ninguna sobre para qué es la pantalla. Esa pregunta es de Experiencia de usuario y conviene zanjarla antes.
Nombrar es lo último del orden y lo que decide si el sistema aguanta un año. En el kit de Rodada 41, 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 llega un tema oscuro; uno llamado gris 100 hay que renombrarlo o mentirle, y en la práctica se le miente.
Qué abrir en 2026, y dónde muerde el precio
Figma manda aquí desde 2019, cuando le quitó el lugar a Sketch por correr en el navegador y dejar entrar a más de una persona al mismo archivo. El plan gratuito es real y todos los valores de esta página se pueden poner en él. Penpot es la alternativa que vale la pena nombrar y no la que nadie usa: abierta, instalable en un servidor propio, y la respuesta cuando los archivos no pueden vivir en el servidor de otro, que para un banco o un hospital es una restricción y no un gusto.
Donde muerde el precio es en la entrega. El Dev Mode de Figma llegó en 2023 y reemplazó al panel de inspección gratuito con el que los programadores leían las medidas, y es un asiento pagado en dólares. Las condiciones se han movido más de una vez, así que el precio se revisa el día, y al planear un proyecto conviene contar con que quien recibe tu archivo puede no tener la vista con la que armaste la entrega. La lista corta de lo que de verdad se usa del programa está en Figma.
Lo que nada de esto resuelve es cómo se debe sentir la pantalla mientras cambia, que es la única parte de una interfaz que no se puede dibujar quieta. Una tarjeta que aparece afirma una cosa y una tarjeta que entra desde donde ocurrió el toque afirma otra, y ninguna de las dos es adorno cuando alguien está usando la tienda a toda velocidad. Esa es la pregunta que sigue, y se contesta con duraciones y curvas en lugar de píxeles. Las reglas de abajo de todo, las distancias y las diferencias que vuelven legible cualquiera de estos componentes, no cambian cuando la pantalla se redibuja, y están en Fundamentos del diseño.