Cómo crear un scroll en Figma

En este post voy a compartir un tutorial para que aprendas cómo crear un scroll en Figma. Será la primera clase para montar un slider, porque en la app que estamos diseñando desde hace semanas encontraremos más de uno, con lo cual tu dominio para crear un carrusel en Figma está asegurado.

El scroll que voy a diseñar en esta clase es una lista de chips que se mostrará en la pantalla que encontrará el usuario después de iniciar sesión en la app de yoga.

Pasos para crear el carrusel

Ten en cuenta que esta explicación describe los pasos para hacer un tipo de scroll. Hay otras maneras de diseñar un carrusel automático en Figma, pero los principios son siempre los mismos, sólo cambian algunos detalles. Como te dije antes, a lo largo de todo el curso de Figma vamos a crear scrolls verticales y horizontales.

Dicho esto voy a detallar todos los pasos que explico en el vídeo que acompaña este tutorial.

Crear el slider

• Antes de comenzar es fundamental saber con qué elementos voy a crear el scroll. En este caso utilizaré los chips que he montado dentro del DSM de la app de yoga con la que trabajamos en los últimos directos.
• Lo primero que debo hacer es montar una lista de elementos con instancias del componente chip incluido en el sistema de diseño.
• Luego tengo que seleccionar en el canvas todos los elementos y crear un Auto Layout utilizando la combinación de teclas Shift + A o Mayúsculas + A.
• Para terminar la lista de chips tengo que configurar el comportamiento de los elementos que están dentro del Auto Layout y la separación entre los mismos.
• ¡El carrusel de chips está listo!

Crear el contenedor

• Ahora tengo que crear el contenedor de scroll, el bloque donde voy a colocar el slider creado en los pasos anteriores. Para ello debo crear un Frame con las dimensiones necesarias en el canvas de Figma pulsando la Tecla F.
• Luego tengo que colocar el carrusel dentro del contenedor y ajustar su posición, lo hago utilizando la herramienta Constraints. Si en algún momento cambio el tamaño del Frame definir las restricciones del slider me permitirá entender su comportamiento dentro del Frame contenedor.
• Con el Frame contenedor pincho la pestaña Prototype del sidebar derecho de Figma para desplegar el menú del módulo Overflow scrolling.
• Hecho el paso anterior toca ejecutar el prototipo para probar el funcionamiento del slider.
• Debo ajustar el padding derecho del Auto Layout, el margen o espacio que aparecerá al final del carrusel, en el extremo derecho del mismo. Recordemos que el izquierdo lo “ajustamos” ubicando el carrusel dentro del Frame contenedor.
• Por último tengo que editar el contenido de los chips, lo hago con la herramienta de Texto, la invoco pulsando la Tecla T, cambio el copy de todos los chips y elimino uno de ellos que en principio no voy a utilizar. Si el proyecto lo necesita podré añadir o quitar chips sin que el scroll deje de funcionar. Esta “magia” la consigo gracias al Auto Layout, la herramienta con la que monté el contenido del slider.
• ¡El scroll creado con Figma ya funciona!

Tutorial en vídeo para crear un scroll

Aquí te dejo el vídeo del tutorial que compartí en mi canal de YouTube, reprodúcelo y sigue mis indicaciones para crear tu scroll.

Ya tenemos el primer carrusel de nuestra app de yoga, en clases siguientes cambiaremos su aspecto y lo implementaremos dentro del diseño.

Si tienes alguna duda por favor deja un comentario, te responderé rápidamente, muchas gracias.

Scroll en Figma Community

Si deseas utilizar el componente de scroll en tus proyectos te dejo un enlace a mi perfil de Figma Community para que lo puedas duplicar.

Más temas en este tutorial

Durante este tutorial para crear un scroll en Figma vimos otros temas que te pueden interesar:

• Cómo crear un Frame en el canvas de Figma.
• Algunas de las opciones del módulo Constraints.
• Cómo ajustar el comportamiento scroll desde el módulo Overflow scrolling.
• Editar textos dentro de un Auto Layout.