Tipografía y sus propiedades en Figma

Curso de Fundamentos de Diseño de Interfaces UX/UI

Contenido del curso

Intro

Heurísticos

Básicos de User Interface

Animación

Cierre

Live Class

20
Conceptos Básicos de Diseño de Interfaces (UI)
60:23 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0010:27

Tipografía y sus propiedades en Figma

Curso de Fundamentos de Diseño de Interfaces UX/UI

Clase 12 de 20

Clase 12 / 20

Recursos

La tipografía define gran parte del éxito en un producto digital. Aprender a elegir familias, pesos y escalas adecuadas en Figma te permite crear interfaces legibles, coherentes con tu marca y alineadas con el tipo de usuario al que apuntas.

Dominar la tipografía digital no se trata solo de elegir una fuente bonita: implica entender su anatomía, sus propiedades y cómo fluye dentro del lienzo. Si estás empezando en diseño de productos digitales, esta es una de las bases que vas a usar todos los días.

¿Cuáles son las partes de la anatomía tipográfica?

Antes de abrir Figma, conviene reconocer las cinco piezas que conforman cualquier letra. Saber nombrarlas te ayuda a tomar decisiones más finas cuando ajustas tamaños o eliges una fuente.

Línea base: la línea sobre la que se asientan las letras y por debajo de la cual se extienden los trazos descendentes, como en la p.
Altura de las minúsculas: cuánto mide en píxeles una letra minúscula.
Altura de las mayúsculas: la medida equivalente para las letras en mayúscula.
Ascendente y descendente: lo que sobresale por arriba (como en la v) o lo que cae por debajo de la línea base (como en la p).
Serifa: el tipo de acabado de la letra.

¿Qué diferencia hay entre serif y sans serif? Una sans serif tiene acabados rectos, sin decoración. Una serif incluye pequeños remates decorativos al final de los trazos. La elección depende del producto, del público y del tamaño al que se va a leer.

¿Cómo elijo entre serif y sans serif?

Piensa en el contexto de uso [02:00]. Si tu producto necesita leerse en tamaños pequeños dentro de una interfaz, una sans serif suele dar más limpieza. Si buscas un tono editorial o más clásico, una serif aporta carácter. No hay regla rígida: hay decisiones de marca y legibilidad.

¿Qué propiedades tipográficas debo controlar en Figma?

En Figma vas a manipular cinco propiedades principales que aparecen en el panel derecho cuando seleccionas una capa de texto [04:30]. Cada una afecta cómo se ve y se lee tu contenido.

Familia: el tipo de letra (Roboto, Garamond, Times, Helvética).
Tamaño: el tamaño de la letra en píxeles.
Peso: los niveles de grosor disponibles, como regular, semibold o bold. Cada familia trae sus propios pesos.
Interlínea: la distancia entre las líneas base de un párrafo.
Espaciado: la separación entre caracteres, también conocido como tracking.

¿Cuál es la interlínea ideal para buena legibilidad? Multiplica el tamaño de la tipografía por 1,4 a 1,6. Si tu texto está en 12 px, una interlínea entre 16 y 20 px te dará una lectura cómoda.

¿Cómo afecta el peso a la jerarquía visual?

El peso es tu herramienta para crear contraste sin cambiar de fuente. Un titular en bold con un cuerpo en regular genera jerarquía clara y mantiene la consistencia visual. Si la familia que elegiste no tiene suficientes pesos, vas a sentir limitaciones rápido.

¿Cómo funciona el flujo del texto en Figma?

Cuando dibujas una caja de texto, Figma te ofrece tres modos de comportamiento que cambian completamente cómo se adapta tu contenido [09:30]. Saber cuál usar te ahorra horas de ajuste manual.

Auto width: el ancho de la caja se ajusta automáticamente a la longitud del texto en una sola línea.
Auto height: el ancho queda fijo y la altura se adapta a la cantidad de texto. Es la opción más útil para párrafos.
Fixed size: tamaño fijo de la caja, sin importar cuánto texto pongas.

Después de elegir el modo, defines la alineación. Horizontalmente puedes alinear a la izquierda, al centro o a la derecha. Verticalmente, si tu caja es más alta que el texto, puedes anclar el contenido arriba, al medio o abajo.

¿Cuándo conviene usar auto height en Figma? Cuando trabajas con párrafos o bloques de contenido variable. La caja crece o se reduce según el texto y mantienes el ancho controlado para tu maquetación.

¿Cómo pego texto sin perder formato?

Si haces clic con la herramienta de texto y pegas, Figma genera una sola línea larga, incómoda de manejar. La alternativa es dibujar primero un área con la herramienta de texto y luego pegar dentro: el contenido respeta el ancho que definiste y empieza a fluir como párrafo.

Para textos de prueba puedes copiar Lorem Ipsum desde una web, aunque más adelante vas a descubrir plugins de Figma que automatizan este paso.

¿Qué beneficios trae la cuenta educacional de Figma en Platzi?

Como miembro de Platzi tienes acceso a la cuenta de Figma Educacional por dos años, que incluye proyectos ilimitados, historial ilimitado y usuarios ilimitados en un solo proyecto. Es una ventaja real cuando estás aprendiendo y quieres practicar sin restricciones.

Ahora te toca a ti: elige la combinación de fuentes que mejor se adapte a un jardín de infancia, un banco y un restaurante. Comparte tu selección en los comentarios y cuéntame por qué la elegiste.

JVN PURPLE

Hace 3 años

LINEA BASE

En un conjunto de texto, la línea base es la línea en la que descansan los caracteres sin ascendentes ni descendentes, como las letras "a", "e" o "o". Todos los caracteres se ajustan a esta línea base para mantener una apariencia visual coherente y legible.

La línea base también es importante porque ayuda a establecer la alineación vertical en un texto. Otros elementos tipográficos, como las ascendentes (parte superior de letras como "h" o "l") y las descendentes (parte inferior de letras como "g" o "j"), se extienden por encima o por debajo de la línea base.

Al diseñar o componer texto, es esencial tener en cuenta la línea base y asegurarse de que los caracteres se alineen correctamente. Esto implica ajustar el espaciado entre líneas (leading) para evitar que las letras se superpongan o se separen demasiado. Además, alineando elementos como títulos, párrafos y elementos gráficos a la línea base, se crea una apariencia cohesiva y ordenada. .

ALTURA EN MAYÚSCULAS Y MINÚSCULAS

La altura de letras en tipografía se refiere a la medida vertical de las letras en relación con la línea base. Es una medida que indica la altura media de las letras que no tienen ascendentes o descendentes. .

SERIFA

Las serifas son pequeños rasgos o proyecciones que se agregan a los extremos de las letras en algunas fuentes tipográficas. Estas características son visibles en letras como "T", "E", "A" o "S". Las serifas pueden tener diferentes formas, como cuadradas, redondeadas, triangulares o adornadas, y su presencia o ausencia puede afectar el estilo y la legibilidad de un tipo de letra.

Las fuentes tipográficas que tienen serifas se conocen como fuentes serif o tipografía con serifa, mientras que las fuentes sin serifas se llaman fuentes sans-serif o tipografía sin serifa.

Comentarios (193)193 comentarios

Brayan Leonardo Velasquez Gutierrez

Hace 4 años

Jonathan Jesús Roa Becerra

Mercedes Sánchez

Jesús Manuel Pastor Pacheco

Daniel Cubides

Daniel Andriy Carrillo Marulanda

Yadira Avila

Lihue Palacio Nievas

Oscar Andrey Martinez Calderon

Tatiana Gaviria

Hace 2 años

Mauro Nava

ANDRES PRADA

Guido Francisco Rodriguez Alvarez

Jorge Almanza

Miguel Ángel Lozada Niño

Diego Reyes Cabrera

Daniel Felipe Castro Castillo

Biester Jhorky Mestanza Tuesta

Alejandra Ocampo Loaiza

William David Vargas Vélez David Vargas Vélez

Intro

Fundamentos de Diseño UI con Figma para Principiantes

Fundamentos del Diseño Digital: Pantallas y Color

Figma como herramienta principal de UX/UI

Historia del diseño: arte, HCI y buen diseño

Heurísticos

Principios heurísticos de percepción en UX

Principios Heurísticos de Percepción y Comportamiento

Principios Heurísticos de Relación y Jerarquía en Diseño

Principios heurísticos de forma en diseño

Principios Heurísticos de Forma: Iconos, Remarcar y Proporción Áurea

Principios Heurísticos de Interacción en Diseño Digital

Básicos de User Interface

Arquitectura de información en apps móviles

Tipografía y sus propiedades en Figma

Vectores y operaciones booleanas en Figma

Qué es un sistema de diseño y cómo usarlo

Organización de archivos en Figma para equipos

Animación

Principios de animación en diseño digital

Cómo prototipar navegación y scroll en Figma

Cierre

Exploración de Portafolios en Figma para Inspiración Creativa

Diseño Digital: Principios, Herramientas y Colaboración en Figma

Live Class

Conceptos Básicos de Diseño de Interfaces (UI)

Tipografía y sus propiedades en Figma

Progreso del curso

Intro

Heurísticos

Básicos de User Interface

Animación

Cierre

Live Class

Recursos

Recursos