En la versión 3.4 del UX fomo Design system encontrarás un nuevo componente que te ayudará a diseñar un slider con Figma.
Duplícalo para usarlo en tus proyectos UX si quieres destacar contenido relevante en páginas web o aplicaciones móviles.
Anatomía del slider diseñado con Figma
Hagamos un repaso de la estructura y todas las propiedades del slider.
Es un slider responsive
La primera versión viene con 3 variantes que se adaptan a pantallas de distintos tamaños y en diferentes dispositivos:
- desktop: tiene tiradores Previous y Next para facilitar la navegación entre los slides.
- tablet: este formato es similar a la versión desktop pero más pequeño, también cuenta con tiradores.
- mobile: no tiene tiradores y funciona con la acción swipe, permitiendo al usuario deslizar los slides hacia la derecha o izquierda.
Su estructura
El componente slider tiene 3 partes principales:
- resource: en el que puedes puedes incrustar imágenes o vídeos.
- desciption: para mostrar, ocultar o editar una cadena de texto sobre el slide.
- stepper: una lista de puntos que indican el número de slide que se está visualizando.
En próximas versiones del sistema de diseño el componente Slider recibirá una actualización que incluirá la opción de mostrar hasta 3 slides y la posibilidad de montar un prototipo funcional.
Compartido bajo licencia Creative Commons 4.0
Cómo diseñar un slider con Figma
Aquí debajo tienes el vídeo tutorial que hicimos en nuestro canal de YouTube, donde explicamos todos los pasos para construir el slider en Figma.
Si tienes dudas o quieres compartir tu opinión utiliza la caja de comentarios.
Muchas gracias.
Aprende sobre UX/UI + IA, Figma y Product Design
📣 Apúntate a mi newsletter semanal
