Tipografía y texto | Figma para principiantes #5

¿Cómo agregar y editar textos en Figma? ¿En qué prestar atención al diseñar contenido? Encontrarás respuestas a estas preguntas en el siguiente artículo. Sigue leyendo.

Tipografía y texto en Figma – tabla de contenido:

1. Agregar texto
2. Propiedades del texto

Agregar texto

Puedes agregar texto a tu archivo utilizando la herramienta de Texto que encontrarás en la Barra de herramientas

Puedes crear dos tipos de cuadros de texto. Elige la herramienta de Texto, y luego:

• haz clic en el Lienzo – de esta manera crearás un cuadro de texto que se ajustará automáticamente al texto ingresado.
• haz clic y arrastra el cursor en el Lienzo, de esta manera crearás un cuadro de texto de ancho fijo. Esto significa que el texto que no quepa en el ancho del cuadro se moverá automáticamente a la siguiente línea.

Propiedades del texto

Al igual que en el caso de los marcos y formas, puedes ver las propiedades del texto en el panel de Propiedades, después de seleccionar una capa de texto. Las opciones disponibles te permiten controlar muchos aspectos de las capas de texto, entre otros, tamaño, fuente y alineación.

1. Estilos de texto – aquí puedes ver y crear estilos de texto.

2. Fuente – aquí puedes elegir un tipo de fuente que deseas usar. Después de hacer clic, se expandirá una lista desplegable. Si conoces el nombre de la fuente, simplemente ingrésalo.

Consejo útil: El texto es uno de los elementos clave de la interfaz, por lo tanto, su legibilidad es muy importante. Evita usar fuentes de script. Aunque se ven hermosas, hacen que el contenido sea menos legible. Si no tienes mucha experiencia con tipografía, utiliza las siguientes fuentes: Open Sans, Roboto o Source Sans Pro.

El plugin “Typescale” facilitará tu trabajo al seleccionar los tamaños apropiados.

3. Peso y inclinación del texto – aquí puedes personalizar la apariencia del texto seleccionando una de las variantes de fuente disponibles.

Consejo útil: algunas fuentes no tienen sus variantes, por lo que esta opción puede no estar disponible.

4. Tamaño del texto – aquí puedes cambiar el tamaño del texto.

Consejo útil: cambiar el tamaño del cuadro de texto no cambia el tamaño del texto.

5. Altura de línea – te permite ajustar la distancia vertical entre las líneas de texto.

6. Espaciado de letras – te permite ajustar la distancia horizontal entre letras.

7. Espaciado de párrafos – te ayuda a ajustar la distancia horizontal entre párrafos.

8. Ancho automático – hace que la longitud del cuadro de texto se ajuste a la longitud del texto que escribes.

9. Altura automática – habilitar esta opción te permite controlar el ancho del cuadro de texto, y su altura se ajustará automáticamente.

10. Tamaño fijo – esta opción hace que el tamaño del cuadro de texto se ajuste a su contenido.

11. Alinear texto a la izquierda / centro / derecha – te permite ajustar la alineación horizontal en el cuadro de texto.

12. Alinear arriba / medio / abajo – te permite ajustar la alineación vertical en el cuadro de texto.

Tarea. 5.1. Agrega textos a tu aplicación. Recuerda mantener los tamaños de fuente apropiados. Asegúrate de que el contenido más importante sea llamativo.

• En el caso de una aplicación de comercio electrónico, es importante que la información del precio y el nombre del producto sean claramente visibles. Usa la fuente en negrita para resaltar el texto al que deseas atraer la atención del usuario.
• Asegúrate de que los botones de CTA (llamada a la acción) sean claramente visibles y animen al usuario a hacer clic en ellos. En este caso, los botones son: “Iniciar sesión” y “Agregar al carrito”.
• El color del botón y el color del texto en él deben contrastar entre sí para que el texto sea fácil de leer.
• Agrega etiquetas a los marcadores de posición.

Acabas de aprender cómo usar tipografía y texto en Figma. Lee también: ¿Sabes qué significa el diseño UX?

Si te gusta nuestro contenido, únete a nuestra comunidad de abejas trabajadoras en Facebook, Twitter, LinkedIn, Instagram, YouTube, Pinterest.