Texto y tipografía en Figma

Introducción al texto en Figma

El texto es uno de los elementos más importantes en cualquier interfaz de usuario. Ya sea que estés diseñando un botón, un encabezado, un párrafo descriptivo o una etiqueta de navegación, la forma en que manejes la tipografía determinará la legibilidad, accesibilidad y estética general de tu proyecto. Figma ofrece un conjunto completo de herramientas que te permiten crear, modificar y organizar texto de manera eficiente.

En esta lección aprenderás a utilizar las herramientas de texto de Figma, desde la creación básica hasta la implementación de estilos tipográficos que te permitirán mantener la consistencia en todo tu proyecto. Descubrirás cómo las decisiones tipográficas impactan directamente en la experiencia del usuario y cómo evitar errores comunes que comprometen la calidad de tus diseños.

Figma trabaja con fuentes del sistema y fuentes de Google Fonts, lo que te da acceso a una amplia variedad de opciones tipográficas. Además, permite crear Variables de Texto que facilitan la gestión de estilos a lo largo del proyecto, una funcionalidad especialmente útil en equipos de diseño colaborativo.

Herramientas de texto en Figma

Crear texto con la herramienta Text (T)

Para crear texto en Figma, simplemente selecciona la herramienta Text presionando la tecla T en tu teclado o haciendo clic en el icono de texto en la barra de herramientas lateral. Una vez activada, puedes hacer clic en el lienzo para crear un campo de texto de ancho fijo (fixed-width text box) o hacer clic y arrastrar para crear un campo de texto de ancho automático (auto-width text box).

• Campo de texto de ancho fijo: El texto se ajusta dentro del ancho que definas, saltando de línea automáticamente. Ideal para botones, etiquetas y elementos con dimensiones específicas.
• Campo de texto de ancho automático: El cuadro se expande horizontalmente según escribes. Perfecto para títulos y texto que no necesitas limitar en ancho.

El panel de propiedades de texto

Cuando seleccionas un objeto de texto, el panel derecho de Figma muestra todas las propiedades tipográficas disponibles. Este panel está organizado en secciones que te permiten controlar cada aspecto del texto de manera intuitiva. A continuación, te详细介绍 cada una de estas propiedades fundamentales.

1. Contenido del texto: Escribe directamente en el lienzo o en el campo de texto del panel derecho. También puedes copiar y pegar texto desde otras fuentes.
2. Familia de fuente (Font Family): Selecciona entre las fuentes disponibles en Figma. Puedes usar fuentes del sistema (San Francisco en Mac, Segoe UI en Windows) o añadir fuentes de Google Fonts mediante el plugin Google Fonts.
3. Peso de fuente (Font Weight): Elige entre los grosores disponibles para cada fuente. Los pesos más comunes son Regular (400), Medium (500), Semi-Bold (600) y Bold (700).
4. Tamaño de fuente (Font Size): Define el tamaño en píxeles. Los tamaños más comunes en diseño UI van desde 12px hasta 72px según el contexto.
5. Altura de línea (Line Height): Controla el espacio vertical entre líneas. Se puede expresar en píxeles, porcentaje o como múltiplo del tamaño de fuente.
6. Espaciado entre letras (Letter Spacing): Ajusta el espacio horizontal entre caracteres. En diseño UI, valores negativos (-0.5 a -2) suelen verse más profesionales.

Jerarquía tipográfica en interfaces

La jerarquía tipográfica es el concepto de organizar el texto de manera que los elementos más importantes sean más prominentes y fáciles de identificar. En una interfaz bien diseñada, el usuario puede entender la estructura de la información instantáneamente, sin necesidad de leer cada palabra.

Para crear una jerarquía efectiva, utiliza variaciones en tamaño, peso, color y espacio. Los encabezados principales deben ser significativamente más grandes y bold que el texto del cuerpo. Las etiquetas y metadata pueden ser más pequeñas y de menor peso. Esta diferenciación visual guía al usuario a través del contenido de manera natural.

Escala tipográfica recomendada

Una escala tipográfica es un sistema de tamaños predefinidos que mantienen la armonía visual en tu diseño. Aunque no existe una escala universal, muchas aplicaciones modernas utilizan una escala basada en múltiplos de 4px o 8px para mantener la consistencia con el espaciado del diseño.

Estilos de texto (Text Styles) en Figma

Los Text Styles son una de las funcionalidades más poderosas de Figma para mantener la consistencia tipográfica. Un Text Style es un conjunto de propiedades tipográficas (fuente, tamaño, peso, altura de línea, etc.) que puedes guardar y aplicar a cualquier texto con un solo clic.

Imagina que tienes 50 textos en tu diseño que representan "títulos de sección". Si decides cambiar el tamaño de todos esos títulos de 20px a 18px, tendrías que modificar manualmente cada uno. Con un Text Style, simplemente cambias la definición del estilo y todos los textos que lo usan se actualizan automáticamente.

Cómo crear un Text Style

1. Selecciona el texto que quieres usar como base para tu estilo. Asegúrate de que tenga todas las propiedades que deseas (fuente, tamaño, peso, color, etc.).
2. Abre el panel de Design en el lado derecho y busca la sección "Text" donde aparecen las propiedades actuales.
3. Haz clic en el icono de cuatro puntos (o el nombre del estilo actual) junto a las propiedades de texto.
4. Selecciona "Create Text Style" o el ícono de "+" para crear un nuevo estilo.
5. Nombra tu estilo siguiendo una convención consistente, como "H1 - Títulos de sección" o "Body - Texto principal".
6. Asigna el estilo a un Team Library si quieres que esté disponible para todo tu equipo (esto requiere un archivo en un workspace).

Estilos de texto locales vs. estilo local publicado

Es importante entender la diferencia entre estilos locales y estilos publicados. Los estilos locales solo existen en el archivo actual, mientras que los estilos publicados están disponibles para toda tu organización y se pueden actualizar centralmente. Si trabajas en equipo, publicar tus estilos tipográficos garantiza que todos los diseñadores utilicen las mismas definiciones.

Alineación y justificación del texto

Figma ofrece las opciones estándar de alineación de texto: izquierda, centro, derecha y justificado. Sin embargo, en diseño UI, la alineación izquierda (left-aligned) es generalmente la más recomendada para texto de lectura prolongada porque:

• Facilita la lectura al crear un borde visual consistente en el inicio de cada línea.
• Funciona mejor con idiomas que se leen de izquierda a derecha.
• Evita los espacios irregulares que genera el texto justificado en líneas cortas.

La alineación centrada es apropiada para títulos cortos, botones y elementos de navegación. La alineación derecha se usa principalmente en tablas o cuando el texto debe alinearse con otro elemento en el lado derecho.

Formato de texto avanzado

Negrita, cursiva y otras decoraciones

Aunque puedes aplicar negrita (Bold) o cursiva (Italic) directamente al texto, es importante usar estas decoraciones con moderación en diseño UI. La negrita se utiliza principalmente para enfatizar información importante, y la cursiva tiene usos muy limitados en interfaces digitales (normalmente solo para citas o términos técnicos).

Subrayado y tachado

Figma permite aplicar subrayado (underline) y tachado (strikethrough) al texto. El tachado es útil para mostrar precios antiguos con descuento o elementos eliminados en interfaces de edición. El subrayado, aunque común en documentos impresos, debe usarse con precaución en interfaces ya que puede confundirse con un enlace.

Transformaciones de texto

Figma permite transformar el texto a mayúsculas (UPPERCASE), minúsculas (lowercase) o capitalizar (Capitalize - Primera Mayúscula). Aunque estas transformaciones son útiles, considera que es mejor escribir el texto con el formato correcto desde el principio en tu código o contenido real, ya que las transformaciones pueden afectar la accesibilidad y el comportamiento con lectores de pantalla.

Decoración de texto

Más allá de las propiedades tipográficas básicas, Figma permite aplicar efectos decorativos al texto que pueden mejorar significativamente tu diseño. El color del texto es quizás la herramienta decorativa más importante, ya que permite crear jerarquía mediante el contraste de color.

Opacidad del texto

Una técnica muy efectiva es usar diferentes niveles de opacidad para el texto. Por ejemplo, un título puede estar al 100% de opacidad mientras que el texto secundario está al 60-70%. Esto crea jerarquía sin necesidad de cambiar el tamaño o peso de la fuente, manteniendo un aspecto más sutil y sofisticado.

Auto Layout y texto

La combinación de Auto Layout con texto es fundamental en el diseño UI moderno. Auto Layout permite que los frames se ajusten automáticamente según el contenido de texto que contengan. Cuando aplicas Auto Layout a un frame con texto, puedes configurar:

• Padding: Espacio interno entre el texto y los bordes del frame.
• Direction: Horizontal o vertical, determina cómo crece el frame.
• Alignment: Cómo se alinea el texto dentro del espacio disponible.
• Resize behavior: Controla si el frame se adapta al texto o viceversa.

Mejores prácticas para tipografía en interfaces

1. Limita el número de fuentes: Usa máximo 2 familias de fuente en tu diseño: una para títulos y otra para texto de cuerpo. Esto mantiene la coherencia visual y evita la sobrecarga visual.
2. Mantén consistente el espaciado: Utiliza múltiplos de 4px o 8px para todos los espaciados, incluyendo el interlineado y el espaciado entre letras.
3. Prioriza la legibilidad: Para texto de cuerpo, usa tamaños entre 14px y 18px con una altura de línea entre 1.4 y 1.6 veces el tamaño de fuente.
4. Considera el contraste: Asegúrate de que el texto tenga suficiente contraste con el fondo. La recomendación WCAG sugiere un ratio mínimo de 4.5:1 para texto normal.
5. Prueba en diferentes tamaños: Verifica cómo se ve tu tipografía en diferentes resoluciones y tamaños de pantalla. Lo que funciona en desktop puede no funcionar en móvil.
6. Documenta tu sistema: Crea una página de documentación con todos tus estilos tipográficos para que todo tu equipo pueda consultarla y mantener la consistencia.

Errores tipográficos comunes en diseño UI

• Usar太多的 tamaños diferentes: Cada tamaño adicional en tu escala rompe la armonía visual. Mantén tu escala simple y consistente.
• Ignorar la legibilidad en móviles: Textos de 12px que podrían funcionar en desktop son ilegibles en pantallas de móvil. Adapta tus tamaños para cada plataforma.
• No considerar el idioma: Si diseñas para varios idiomas, recuerda que el mismo texto puede ser mucho más largo en algunos idiomas. Diseña con flexibilidad.
• Usar fuentes decorativas para texto funcional: Las fuentes muy ornamentadas o manuscritas son difíciles de leer en párrafos. Resérvalas para elementos decorativos o títulos cortos.
• Olvidar los estados de hover: El texto debe mantener su legibilidad cuando el usuario pasa el cursor sobre él, especialmente si está dentro de un botón o enlace.
• No probar con usuarios reales: La mejor manera de saber si tu tipografía funciona es observarla en uso real. Realiza pruebas de usabilidad para validar tus elecciones.

Ejemplo práctico: Diseñando un botón tipográfico

Veamos cómo aplicar todo lo aprendido en un ejemplo práctico: diseñar un botón con texto. Este es uno de los elementos más comunes en cualquier interfaz y demuestra perfectamente la aplicación de los principios tipográficos.

1. Crea un frame: Dibuja un rectángulo que servirá como fondo del botón. Un tamaño típico para botones es 120px de ancho por 44px de alto, que cumple con las guías de accesibilidad táctil.
2. Añade texto: Usa la herramienta Text (T) y escribe el label del botón. Centra el texto dentro del frame.
3. Aplica Auto Layout: Selecciona el frame y añade Auto Layout. Configura el padding horizontal a 24px y el vertical a 12px para crear espacio uniforme alrededor del texto.
4. Configura las propiedades: Establece el tamaño de fuente a 14px, peso Semi-Bold, alineación centrada, y altura de línea a 1.0 o 20px según el tamaño.
5. Crea variantes: Si tu diseño requiere diferentes estados del botón, crea variantes con diferentes colores de fondo y texto (default, hover, active, disabled).
6. Documenta: Crea un Text Style llamado "Button Label" con todas estas propiedades para reutilizarlo consistentemente.

La tipografía en el diseño de interfaces no se trata solo de cómo se ven las letras, sino de cómo guían, comunican y mejoran la experiencia del usuario. Cada decisión tipográfica es una decisión de diseño.

Herramientas complementarias

Además de las herramientas nativas de Figma, existen recursos externos que pueden ayudarte a mejorar tu tipografía:

Resumen de conceptos clave

Antes de pasar a la práctica, repasemos los conceptos fundamentales que debes recordar de esta lección:

• La jerarquía tipográfica es esencial para guiar al usuario a través de la interfaz.
• Los Text Styles permiten mantener consistencia y actualizar cambios globalmente.
• La escala tipográfica debe ser coherente y basada en múltiplos de 4 u 8px.
• Limita las fuentes a 2 familias máximo para mantener la cohesión visual.
• El Auto Layout combina perfectamente con texto para crear interfaces responsivas.
• La documentación de tus estilos facilita el trabajo en equipo y la escalabilidad.

Próximos pasos

Ahora que has aprendido los fundamentos de texto y tipografía en Figma, estás listo para explorar temas más avanzados. En las siguientes lecciones cubriremos cómo crear Sistemas de Diseño completos que integren tipografía, color, espaciado y componentes de manera coherente. También aprenderás sobre Auto Layout avanzado y cómo crear interfaces verdaderamente responsivas que se adapten a cualquier tamaño de pantalla.