Contenido del curso
Tipografía en UI: jerarquía con Manrope y Figma
Elegir la tipografía correcta para un proyecto de UI puede paralizar a cualquier diseñador. Aquí verás cómo se decidieron las dos fuentes del proyecto Zapata, qué reglas seguir para aplicar jerarquía tipográfica en Figma y cómo practicarlo con un ejercicio rápido.
¿Qué tipografía debo usar en un proyecto de UI móvil?
La decisión empieza por la plataforma. Si estás diseñando para Android, la opción por defecto es Roboto, la fuente nativa de Google. Si trabajas en iOS, lo natural es usar San Francisco Pro, la tipografía oficial de Apple. Ambas son gratuitas y descargables [00:30].
¿Cuál es la tipografía default para Android y iOS? Android usa Roboto (Google) y iOS usa San Francisco Pro (Apple). Las dos están disponibles en línea para descargar.
Para el proyecto Zapata se eligieron dos fuentes complementarias:
Esa combinación logra contraste sin romper la armonía: una fuente trabaja como soporte y la otra como acento.
¿Qué tamaños de fuente funcionan mejor en interfaces móviles?
En móvil, la legibilidad manda. La regla práctica que se usa en Zapata es sencilla: nunca bajar de 12 puntos como mínimo absoluto, idealmente arrancar en 14, y reservar 16 puntos o más para títulos [01:30].
Aunque las pantallas son pequeñas, esto asegura que el texto se lea cómodamente durante toda la experiencia. Y si necesitas tratar un texto como elemento gráfico, puedes convertirlo en outline con Command + E, lo que transforma la tipografía en vectores no editables.
¿Cuál es el tamaño mínimo de tipografía para UI móvil? 12 puntos es el piso, 14 es lo recomendable y los títulos van de 16 puntos en adelante.
¿Cómo se aplica la jerarquía tipográfica en Figma?
En el panel de diseño a la derecha, la sección Typography concentra todas las decisiones [03:00]. Para el main headline del perfil de usuario, por ejemplo, se usa Clash Display en peso medium y tamaño 32. Probar con extra light le quita prominencia; medium da el balance justo.
La altura de línea ideal está en 125%, no en valor fijo, porque en pixeles puros la caja queda demasiado apretada. Desde ese mismo panel controlas:
La jerarquía no siempre depende del tamaño. En la pantalla de senderos, el nombre y la ubicación comparten tamaño, pero el color en gris claro indica que la ubicación tiene menos peso visual. El color es una herramienta de jerarquía tan válida como el tamaño.
¿Cómo practicar tipografía en Figma con un reloj análogo?
Un ejercicio práctico para dominar la manipulación de texto es construir un reloj análogo. Aquí entra un truco poderoso de Figma: Command + D no solo recuerda la distancia entre objetos duplicados, también recuerda el ángulo de rotación, lo que permite crear patrones circulares perfectos [05:00].
El proceso es así:
Después reemplazas los valores por 1, 2, 3 hasta 11. Figma detecta que estás editando texto, así que pasas de un número al siguiente sin hacer doble clic en cada caja, algo que sí exigen otros programas de diseño.
¿Cómo enderezo los números rotados de un reloj en Figma?
El último paso resuelve un problema visual: cada número quedó inclinado 30 grados respecto al anterior, así que tendrías que torcer el cuello para leerlos. La solución es rápida.
Selecciona todas las cajas de texto, ve al panel de propiedades, busca el campo de rotación y escribe 0. Todos los números vuelven a su posición vertical sin perder su ubicación en el círculo.
¿Para qué sirve Command + D en Figma? Duplica un objeto repitiendo la última acción, incluyendo distancia, posición y ángulo de rotación. Es ideal para crear patrones circulares o repetitivos.
Con este ejercicio practicas duplicación inteligente, rotación con Shift, edición rápida de capas de texto y manejo del panel de propiedades, todo en un solo elemento.
Me encantaría leer en los comentarios cómo le agregarías un puntero a este reloj, qué tipografía elegirías para los números o si le pondrías un reborde para convertirlo en reloj de pulsera.
