Diseñar una interfaz sin dominar el manejo del texto es como construir una casa sin cimientos. Las palabras son el bloque fundamental de cualquier producto digital, y Figma ofrece un conjunto robusto de propiedades para controlar cada aspecto tipográfico. Desde la familia de fuentes hasta los estilos reutilizables, entender cómo funciona el texto en esta herramienta te permitirá mantener coherencia visual en todos tus proyectos.
¿Cómo se crea y configura un objeto de texto en Figma?
Para insertar texto basta con presionar la tecla T y hacer clic en el lienzo [03:40]. Aparece una línea intermitente que indica que ya puedes escribir. A partir de ese momento, la caja de texto se expande automáticamente según lo que escribas, aunque ese comportamiento depende de varias propiedades que se controlan desde el panel derecho.
Entre las propiedades más importantes se encuentran:
- Familia tipográfica: la fuente que define la personalidad del texto; en el ejemplo se usa Inter [01:08].
- Peso tipográfico: determina qué tan grueso o delgado luce el texto, por ejemplo semi-bold para títulos y regular para contenido [04:18].
- Tamaño: se mide en puntos; un valor de treinta funciona bien para títulos y dieciséis para párrafos [04:30].
- Espaciado entre caracteres (letter spacing): un valor negativo como menos dos o menos tres por ciento comprime ligeramente las letras en títulos [04:50].
- Altura de línea (line height): controla la distancia vertical entre renglones; un ciento treinta por ciento da más respiro al texto largo [09:12].
¿Qué diferencia hay entre longitud automática y tamaño fijo?
Cuando creas un texto sin arrastrar, la caja crece horizontalmente de forma automática. Si arrastras el borde derecho hasta un punto fijo, la caja toma un ancho determinado y solo la altura se ajusta según el contenido [05:20]. Esto resulta esencial para bloques de párrafo donde necesitas que el texto fluya dentro de un espacio controlado.
¿Cómo se alinea y se da formato rápido al texto?
Figma permite alinear el texto a la izquierda, al centro o a la derecha desde el panel de propiedades [05:50]. Para dar formato rápido se utilizan atajos de teclado:
- Cmd/Ctrl + B: aplica negrilla (bold) [01:50].
- Cmd/Ctrl + I: aplica cursiva (italic) [01:55].
- Cmd/Ctrl + U: subraya el texto [02:00].
Estos atajos funcionan igual que en cualquier procesador de textos, lo que hace la curva de aprendizaje muy suave.
¿Por qué los estilos de texto garantizan consistencia en el diseño?
Un producto digital necesita un sistema tipográfico predecible. Si cada pantalla usa un tamaño o un peso diferente para los títulos, la experiencia se fragmenta. Los estilos de texto en Figma son propiedades globales reutilizables que puedes compartir entre archivos y con otros miembros del equipo [02:30].
Para crear un estilo se selecciona el texto, se hace clic en el ícono de los cuatro puntos junto a la sección de texto y se presiona el botón más [06:45]. Figma solicita un nombre —por ejemplo, "título" o "contenido"— y a partir de ese momento cualquier texto puede adoptar ese estilo con un solo clic.
¿Cómo se aplica un estilo existente a un texto nuevo?
Si tienes un texto con propiedades distintas y deseas regresarlo al estilo original, solo debes seleccionarlo, ir a los cuatro puntos y elegir el estilo guardado [07:30]. Todas las propiedades —familia, peso, tamaño, espaciado— se aplican de inmediato. El color, sin embargo, se gestiona de forma independiente.
Cuando modificas manualmente una propiedad como el peso con Cmd/Ctrl + B, el texto se desvincula del estilo y vuelve a ser un elemento suelto [10:40]. Puedes crear estilos adicionales como "contenido bold" o "contenido subrayado" si necesitas variaciones frecuentes.
¿Qué buenas prácticas tipográficas se recomiendan en interfaces?
Mantener una grilla de ocho puntos ayuda a que los espaciados sean armónicos. En el ejemplo, el título queda a veinticuatro píxeles del borde superior y dieciséis del izquierdo, ambos múltiplos de ocho [06:15]. Como guía general, ningún texto en una interfaz debería ser más pequeño que catorce puntos [08:50]; dieciséis es un valor seguro para contenido de lectura.
Para previsualizar cómo luce el diseño sin las guías del editor, el atajo Ctrl/Cmd + G oculta la grilla y los controles [06:05], permitiendo evaluar el resultado final con mayor claridad.
Si ya dominaste la creación de texto y estilos, el siguiente paso es combinarlos con objetos visuales para que tu interfaz cobre vida. ¿Qué estilo tipográfico usarías para tu primer proyecto? Comparte tu experiencia en los comentarios.
