Cómo crear un activo desplazable en Figma

Hacer que su contenido sea desplazable en Figma implica navegar por la pestaña lateral. Desafortunadamente, no aparece automáticamente en la interfaz de usuario principal. El contenido desplazable es útil cuando desea presentar mucha información dentro de un marco de su diseño. Algunos ejemplos incluyen páginas de destino, interfaces de aplicaciones o ventanas emergentes.

Este artículo explicará cómo hacer que sus diseños de Figma sean desplazables.

Ajustar un texto desplazable dentro de una forma

Comencemos creando un texto desplazable dentro de una forma simple. Este es el ejemplo más común de texto desplazable y luego puede agregar otras propiedades como color, fuentes y contornos.

Así es como se hace:

1. Crea una forma básica. Para este ejemplo, recomendamos hacer un rectángulo vertical. Puede hacerlo seleccionando la herramienta rectángulo en la barra lateral izquierda o usando el comando «R». Mantén presionado hacia la izquierda, haz clic en un punto del lienzo y dibuja la forma.

   

2. En la barra lateral derecha, debajo de la pestaña de diseño, marque la opción «contenido del clip».

   

3. Seleccione la herramienta de texto para crear un cuadro de texto y colóquelo dentro del marco desplazable. Escribe o copia y pega cualquier contenido que estés utilizando.

   

4. Seleccione el marco y vaya a la pestaña de prototipo en el lado derecho de su interfaz. Luego, selecciona la opción “desplazamiento desbordado” y el estilo que prefieras. Aquí elegiremos «desplazamiento vertical».

   

Una vez que hace clic en la opción de desplazamiento desbordado en la pestaña prototipo, hay varios estilos. Elegimos el vertical ya que estamos usando un rectángulo vertical como ejemplo. Esto le permite leer el texto de arriba a abajo. Algunos de los otros estilos incluyen:

• Desplazamiento horizontal: los usuarios pueden hacer que su texto se desplace de izquierda a derecha en algunos ejemplos. Esta opción es preferible si estás creando diseños en formato de paisajismo.
• Sin desplazamiento: si desea bloquear su contenido en su lugar, elija la opción sin desplazamiento.
• Ambas direcciones: cree un diseño con mucho contenido y desplácese tanto vertical como horizontalmente.

Debe utilizar funciones desplazables dentro de su diseño para minimizar el esfuerzo (clics) que realiza su lector al interactuar con el contenido. Pueden deslizar el dedo o usar la rueda del mouse en lugar de hacer clic o tocar toneladas de texto.

Cómo diseñar sus componentes desplazables

Dependiendo de su producto, deberá diseñar su marco de contenido y el contenido en sí. El proceso implica agregar color, fuentes y potencialmente otros componentes al diseño general. Cambiar estos elementos es fácil, pero seleccionar la estética adecuada requiere una consideración cuidadosa.

Cómo cambiar la fuente de su diseño desplazable

Lo primero que deberá hacer es cambiar la fuente en su diseño desplazable. Figma ofrece una amplia gama de estilos para que elijas. Este es el método más simple:

1. Seleccione el contenido en su marco desplazable que desea cambiar.

   

2. Navegue hasta el menú desplegable ubicado en la parte superior izquierda y selecciónelo.

   

3. 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 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 correcto.

Algunas consideraciones incluyen:

• Intención del diseño: la elección de una tipografía debe coincidir con la intención de su diseño. Si desea transmitir mucha información con claridad, opte por fuentes menos decorativas pero elegantes.
• Otros componentes: tu fuente es un elemento visual como cualquier otro en tu diseño. Debe coincidir con el marco y otros componentes que incluya.
• Estética general y marca: la sensación general de la marca también debería influir en la fuente elegida. Por ejemplo, un servicio de entrega de flores no incluirá la misma fuente que una página de destino 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, utiliza Roboto. Se considera una fuente versátil y neutral con muchas aplicaciones. Como es tan fácil de entender, muchos eligen Roboto para obtener instrucciones y páginas de destino.
• Poppins: para un atractivo amigable pero moderno y limpio, elija Poppins. Esta fuente es más redondeada y hace que el texto sea atractivo y fácil de leer.
• Raleway: al diseñar para una marca de lujo sofisticada, es posible que desee considerar Raleway. Generalmente es delgado pero tiene diferentes variaciones de peso y una apariencia elegante en general.
• Lato: amigable, confiable y seria son las palabras correctas para describir esta fuente. Los diseñadores pueden utilizar Lato para títulos y textos de párrafos donde la legibilidad y la claridad son las principales preocupaciones.

También querrás considerar el tamaño de fuente y el estilo de texto que hayas elegido. Generalmente, la negrita se utiliza para titulares o segmentos de énfasis, mientras que la cursiva se utiliza para las 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.

Así es como puedes cambiar los colores de tu marco:

1. Seleccione el marco que desea editar.

   

2. La capa aparecerá en la barra lateral derecha. Navega a la sección «rellenar».

   

3. Seleccione «+» para agregar un relleno.

   

4. Se abrirá una ventana de selección de color. Seleccione el color de relleno y el degradado. También puedes escribir un código hexadecimal si conoces el tono exacto.

   

Al igual que con otros elementos de diseño, es posible que tengas que experimentar con diferentes colores y cómo se ven con la fuente elegida.

Preguntas frecuentes

¿Existe un comando de texto desplazable en Figma?

Desafortunadamente, no hay ningún comando para hacer que un texto sea desplazable dentro de Figma. Sin embargo, puede completar el proceso con sólo unos pocos clics utilizando el método mencionado anteriormente.

¿Cómo decido qué opción de desbordamiento quiero?

Eso depende del tipo de texto que estés usando, el diseño general y su función. El estilo vertical suele ser bueno para hojear textos grandes.

¿Qué interfaz de dispositivo necesitará normalmente un diseño de texto desplazable?

Un buen ejemplo sería diseñar maquetas 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 crear diseños desplazables?

Figma es una de las mejores herramientas para crear una amplia gama de formas, incluidos diseños desplazables. Mejor aún, Figma es gratis. Sin embargo, es posible que tengas ciertas preferencias personales. Intente experimentar con algunas plataformas, como Adobe Illustrator, hasta que encuentre la herramienta que mejor se adapte a sus necesidades.

Haga que sus diseños sean desplazables y fáciles de usar

Crear cualquier texto dentro de un marco en Figma es fácil. Simplemente seleccione el marco y luego vaya a la opción de contenido del clip. Una vez completado, puede elegir las opciones de desplazamiento adicional. 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 su 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.

¿Le resultó fácil hacer que su contenido sea desplazable en Figma? ¿Qué pasa con la selección de la fuente correcta? Háganos saber en la sección de comentarios.