Diseñar interfaces atractivas no depende solo de buenos íconos o colores bien elegidos. Si la etiqueta de texto se corta, todo el diseño se rompe. Entender cómo se comportan las cajas de texto en Figma y cómo controlar su crecimiento es fundamental para construir componentes robustos que funcionen con cualquier contenido, en cualquier idioma y en cualquier dispositivo.
¿Cómo se crea y configura texto en Figma?
Para crear texto basta con seleccionar la herramienta de texto desde el toolbar o presionar la tecla T [0:44]. Al empezar a escribir, la caja de texto crece automáticamente conforme añades caracteres. Este comportamiento se conoce como auto width, y es el modo por defecto.
En el panel derecho encontrarás todas las propiedades editables de la tipografía [1:16]:
- Fuente tipográfica: selecciona entre las fuentes disponibles; en el ejemplo se usa Inter.
- Peso de la fuente: varía según la familia tipográfica instalada. Las fuentes con variables ofrecen un control más fino.
- Tamaño de fuente e interlineado: el line height define la separación vertical entre líneas.
- Espaciado entre caracteres: ajusta la distancia horizontal entre letras.
- Alineación horizontal: izquierda, centro o derecha.
- Alineación vertical: arriba, centro o abajo, según el tamaño del rectángulo de texto.
Dentro de los type settings avanzados [2:06] también puedes aplicar decoraciones como subrayado o tachado, forzar mayúsculas o minúsculas, crear listas con o sin numeración y controlar el espacio entre párrafos.
¿Qué modos de caja de texto existen y cuándo usar cada uno?
Este es el punto donde muchos diseños fallan. Figma ofrece tres modos de layout para las cajas de texto, y elegir el correcto evita que el contenido se corte o desborde [2:48].
¿Qué es auto width?
Es el comportamiento por defecto: el ancho crece con cada carácter que escribes. Funciona bien para etiquetas cortas, pero pierde control en textos largos.
¿Qué es auto height?
Tú defines el ancho fijo y la altura se adapta dinámicamente al contenido [3:08]. Al pegar un párrafo descriptivo dentro de una caja de 300 píxeles de ancho, el texto genera saltos de línea automáticos y la altura crece según sea necesario. Es ideal para descripciones y notas.
¿Qué ocurre con ancho y altura fijos?
Cuando ambas dimensiones están definidas, el texto puede quedar oculto fuera de la caja. Aquí entra en juego el truncado de texto (truncate text) [4:05]. Al activarlo en los type settings, Figma recorta el contenido visible según las líneas que caben. Si tu line height es de 20 píxeles y la altura de la caja es 80, caben exactamente cuatro líneas.
También puedes combinar auto height con un límite de líneas máximas [4:37]. Por ejemplo, si defines un máximo de tres líneas, la caja nunca superará los 60 píxeles de alto, pero si el texto es más corto, la caja se reduce automáticamente.
¿Cómo construir una escala tipográfica reutilizable?
Revisar las pantallas del proyecto revela que muchos textos comparten las mismas propiedades: tamaño, peso, fuente e interlineado [5:06]. Extraer esas combinaciones repetidas permite crear una escala tipográfica, un conjunto organizado de estilos como display large para montos destacados o heading para encabezados.
Con esta escala evitas crear variaciones nuevas cada vez y mantienes la consistencia visual en todo el proyecto.
¿Cómo aplicar estos ajustes a un componente real?
El ejemplo práctico se aplica a una tab bar con estados activo e inactivo [5:40]. Cada tab item contiene un ícono y un texto. Al cambiar la etiqueta por palabras más largas como "transacciones", el diseño puede romperse si no hay control.
Los pasos para solucionarlo son:
- Delimitar el ancho de la caja con un margen de 14 píxeles a cada lado [6:14].
- Centrar el texto horizontalmente.
- Activar truncate text con máximo de una línea [6:24].
Esto garantiza que, sin importar el idioma o la longitud del label, el componente se mantenga estable. Para reemplazar el elemento original se usa paste to replace con el atajo Comando + Shift + R [7:04].
Antes de cerrar cualquier pantalla, selecciona tus capas de texto y hazte la pregunta clave: si este texto se duplica en extensión, ¿hacia dónde crece y qué empuja? Esa simple verificación te ahorrará horas de correcciones y producirá componentes preparados para escalar.
