¿Cómo crear un carrusel en Figma?

DiseñoDiseño UI/UX

¿Cómo crear un carrusel en Figma?

¿Qué es Figma?

Figma es un editor de gráficos vectorial y herramienta online enfocado en realización de prototipos de páginas web y aplicaciones móviles.

¿Qué es un carrusel en Figma?

El carrusel es una presentación de contenido interactivo, como imágenes o texto, deslizable vertical u horizontalmente.

Pasos para crear un carrusel/slider

1.- Contenido del carrusel

Abriremos Figma y antes de realizar el carrusel, tenemos que crear el Frame en donde estará nuestro carrusel dando clic en la herramienta Frame o tecla F y en la barra derecha aparecerán ya medidas preestablecidas. En este caso usaremos la de Android small.

Teniendo el Frame, debemos identificar qué elementos vamos a utilizar. En este caso utilizaremos 6 imágenes como ejemplo.

Para agregar las imágenes nos vamos a la parte superior izquierda dando clic en la herramienta rectángulo o con la tecla R, una vez hecho el rectángulo nos vamos a la barra derecha en Figma en el apartado de Design/Fill/Image/Choose Image y se abrirá la biblioteca.

2.- Crear Frame

Una vez teniendo los elementos necesarios, requerimos crear el Frame principal donde estará el contenido, con lo cual para crearlo seleccionamos todas las imágenes, damos clic derecho y seleccionamos la opción Frame selection o pulsando las teclas Ctrl+Alt+G.

Teniendo el Frame creado y seleccionado vamos a arrastrar para modificar la anchura del Frame hasta la imagen principal.

Nos vamos a la barra de la derecha en el apartado design y activamos la opción Clip contect para que no sobresalgan nuestras imágenes del Frame.

Ahora arrastramos el Frame de contenido al Frame principal.

3.- Interacción scroll

Ya solo nos falta aplicar la interacción scroll, para eso nos vamos (con el frame seleccionado) a la barra de la derecha en el apartado Prototype/Overflow scrolling/Horizontal scrolling.

¡Y listo, el carrusel ya funciona!

0 Comentarios

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Últimas noticias

Consulta nuestras últimas
Noticias & Blog

crea campos personalizados cmb2 devitm

Crea campos personalizados con CMB2 en WordPress

Leer más
Categoría personalizada Gutenberg - DevITM

Crea una categoría personalizada para bloques Gutenberg

Leer más
Desarrollo bloques gutenberg - DevITM

¿Cómo desarrollar bloques Gutenberg en WordPress?

Leer más

Crear efecto hover en Figma

Leer más

¿Cómo crear un carrusel en Figma?

Leer más

Optimización de imágenes para web

Leer más