Para que el contenido sea desplazable en Figma, es necesario navegar por la pestaña lateral. Lamentablemente, no aparece automáticamente en la interfaz de usuario principal. El contenido desplazable es útil cuando se desea presentar mucha información dentro de un marco de diseño. Algunos ejemplos incluyen páginas de destino, interfaces de aplicaciones o ventanas emergentes.
Este artículo te explicará cómo hacer que tus diseños de Figma sean desplazables.
Cómo ajustar un texto desplazable dentro de una forma
Comencemos creando un texto desplazable dentro de una forma sencilla. Este es el ejemplo más común de texto desplazable y, después, puedes agregarle otras propiedades como color, fuentes y contornos.
Así es como se hace:
- Crea una forma básica. Para este ejemplo, recomendamos crear un rectángulo vertical. Puedes hacerlo seleccionando la herramienta Rectángulo en la barra lateral izquierda o usando el comando “R”. Mantén presionado el botón izquierdo, haz clic en un punto del lienzo y dibuja la forma.
- En la barra lateral derecha, debajo de la pestaña de diseño, marque la opción “recortar contenido”.
- Seleccione la herramienta de texto para crear un cuadro de texto y colóquelo dentro del marco desplazable. Escriba o copie y pegue cualquier contenido que esté utilizando.
- Selecciona el marco y ve a la pestaña de prototipos en el lado derecho de tu interfaz. Luego, selecciona la opción “desplazamiento de desbordamiento” y el estilo que prefieras. Aquí elegiremos “desplazamiento vertical”.
Una vez que haces clic en la opción de desplazamiento de desbordamiento en la pestaña de prototipo, hay varios estilos. Elegimos el vertical porque estamos usando un rectángulo vertical como ejemplo. Esto te permite leer el texto de arriba a abajo. Algunos de los otros estilos incluyen:
- Desplazamiento horizontal: en algunos ejemplos, los usuarios pueden hacer que el texto se desplace de izquierda a derecha. Esta opción es preferible si está creando diseños en formato paisajístico.
- Sin desplazamiento: si desea bloquear el contenido en un lugar, elija la opción sin desplazamiento.
- Ambas direcciones: crea un diseño con mucho contenido y desplázate tanto vertical como horizontalmente.
Debes utilizar funciones de desplazamiento en tu diseño para minimizar el esfuerzo (clics) que realiza el lector al interactuar con el contenido. Pueden deslizar el dedo o usar la rueda del mouse en lugar de hacer clic o tocar en toneladas de texto.
Cómo diseñar sus componentes desplazables
Dependiendo de su producto, deberá diseñar el marco de contenido y el contenido en sí. El proceso implica agregar color, fuentes y, posiblemente, otros componentes al diseño general. Cambiar estos elementos es fácil, pero seleccionar la estética correcta requiere una consideración cuidadosa.
Cómo cambiar la fuente de tu diseño desplazable
Lo primero que deberás hacer es cambiar la fuente de tu diseño desplazable. Figma ofrece una amplia gama de estilos entre los que puedes elegir. Este es el método más sencillo:
- Seleccione el contenido en el marco desplazable que desea cambiar.
- Navega hasta el menú desplegable ubicado en la parte superior izquierda y selecciónalo.
- Desplácese por las fuentes hasta encontrar la que desea utilizar.
Si la marca para la que estás diseñando tiene una tipografía en particular, probablemente elijas la misma para que sea coherente con la imagen de la marca. Si tienes más margen de maniobra, deberías experimentar con diferentes ejemplos antes de elegir el adecuado.
Algunas consideraciones incluyen:
- Intención del diseño: la elección de una tipografía debe coincidir con la intención del diseño. Si desea transmitir mucha información con claridad, opte por fuentes menos decorativas pero elegantes.
- Otros componentes: la fuente es un elemento visual como cualquier otro del diseño. Debe combinar con el marco y los demás componentes que incluya.
- Estética general y marca: la imagen general de la marca también debería influir en la fuente que elijas. Por ejemplo, un servicio de entrega de flores no tendrá la misma fuente que una página de destino de SAAS.
Si bien elegir la fuente correcta puede requerir algo de experimentación, algunos ejemplos de fuentes concretos son las opciones más confiables:
- Roboto: si quieres ir a lo seguro, usa Roboto. Se considera una fuente versátil y neutral con muchas aplicaciones. Como es tan fácil de entender, muchas personas eligen Roboto para instrucciones y páginas de destino.
- Poppins: si buscas un estilo agradable, moderno y limpio, elige Poppins. Esta fuente es más redondeada y hace que el texto sea atractivo y fácil de leer.
- Raleway: si diseña para una marca de lujo sofisticada, es posible que desee considerar Raleway. Generalmente es delgada, pero tiene diferentes variaciones de peso y un aspecto elegante en general.
- Lato: amigable, confiable y seria son las palabras adecuadas para describir esta fuente. Los diseñadores pueden usar Lato para títulos y textos de párrafos donde la legibilidad y la claridad son preocupaciones primordiales.
También deberás tener en cuenta el tamaño de fuente y el estilo de texto que hayas elegido. Por lo general, la negrita se utiliza para titulares o para enfatizar segmentos, mientras que la cursiva se utiliza para citas.
Cambiar el color de la forma del marco
Además de cambiar la fuente, también querrás cambiar el color de la forma del marco. Una vez más, el tono exacto dependerá de la marca para la que estés diseñando o de tu estética. Afortunadamente, la interfaz de Figma facilita la selección de un color.
Aquí te explicamos cómo puedes cambiar los colores de tu marco:
- Seleccione el marco que desea editar.
- La capa aparecerá en la barra lateral derecha. Navega hasta la sección “relleno”.
- Seleccione el “+” para agregar un relleno.
- Se abrirá una ventana de selección de color. Seleccione el color de relleno y el degradado. También puede escribir un código hexadecimal si conoce el tono exacto.
Al igual que con otros elementos de diseño, es posible que necesites experimentar con diferentes colores y cómo se ven con la fuente elegida.
Preguntas frecuentes
¿Existe un comando de texto desplazable en Figma?
Lamentablemente, no existe ningún comando para hacer que un texto sea desplazable dentro de Figma. Sin embargo, puedes completar el proceso con solo unos clics utilizando el método mencionado anteriormente.
¿Cómo decido qué opción de desbordamiento quiero?
Eso depende del tipo de texto que uses, del diseño general y de su función. El estilo vertical suele ser bueno para leer textos extensos.
¿Qué interfaz de dispositivo normalmente necesitará un diseño de texto desplazable?
Un buen ejemplo serían las maquetas de diseño para una aplicación. Los usuarios pueden crear un teléfono como marco general, mientras que el texto desplazable puede ser la interfaz de la aplicación.
¿Es Figma la mejor opción para hacer diseños desplazables?
Figma es una de las mejores herramientas para crear una amplia gama de formas, incluidos diseños desplazables. Y lo que es mejor, Figma es gratis. Sin embargo, es posible que tengas ciertas preferencias personales. Prueba a experimentar con algunas plataformas, como Adobe Illustrator, hasta que encuentres la herramienta que mejor se adapte a ti.
Haga que sus diseños sean fáciles de navegar y usar
Hacer que cualquier texto se inserte en un marco en Figma es fácil. Simplemente selecciona el marco y luego pasa a la opción de recortar contenido. Una vez que hayas terminado, puedes elegir las opciones de desplazamiento de desbordamiento. Asimismo, no debes descuidar otros elementos de diseño cruciales, como el color y la forma del marco y la fuente del texto. Hacer que tu diseño sea desplazable es una excelente opción para páginas de destino, interfaces de aplicaciones y ventanas emergentes. Hace que sea más fácil hojear los textos en lugar de hacer clic, lo que en última instancia mejora la experiencia del usuario.
¿Te resultó fácil hacer que tu contenido se pueda desplazar en Figma? ¿Y qué tal seleccionar la fuente correcta? Cuéntanoslo en la sección de comentarios a continuación.
