Cómo diseñar un guided tour en Figma

Hoy te traigo un tutorial para crear un componente guided tour en Figma, perfecto para mejorar la experiencia de usuario en tus proyectos. El componente incluye elementos esenciales como paginación, título, imagen, descripción, y botones Primary, Secondary y de cierre.

Voy a desglosar cada paso para que puedas seguirlo fácilmente. También te dejo el vídeo tutorial que publiqué en mi canal de YouTube.

Pasos para diseñar un guided tour

Iniciamos el tutorial con la creación de cadenas de texto para «Page», «Title», y «Content», activando luego el botón «Close». Seguimos con la configuración de un Auto Layout para nuestro encabezado y la creación de un componente de imagen a partir de un Frame, donde podremos incrustar imágenes fácilmente.

Posteriormente, arrastraremos una instancia del componente de imagen al lienzo de Figma, y añadiremos dos instancias del componente botón, «Primary» y «Secondary», agrupándolas en un Auto Layout llamado «buttons». La creación del botón «Close» se hará utilizando una instancia del componente «icon-button» con un ícono de la biblioteca de Material Design.

A continuación, generaremos un componente «arrow» a partir de un polígono y personalizaremos el componente «guided-tour» ajustando márgenes, espacios, bordes redondeados, etc. Aplicaremos estilos a todas las cadenas de texto y ajustaremos el comportamiento horizontal de los botones primario y secundario.

Incorporaremos una imagen utilizando el plugin de Freepik para Figma, ajustaremos los paddings del componente «guided-tour», aplicaremos bordes redondeados a la imagen y al componente, y ajustaremos la posición y Constraints del botón «Close» usando la función de posición absoluta (Absolute position).

Modificaremos el interlineado del texto «Content», añadiremos instancias del componente «arrow» para indicar la dirección en el «guided tour» y finalmente, crearemos propiedades booleanas para ocultar o mostrar elementos como el botón «Close», imágenes, y botones.

Este tutorial no solo te guiará en la creación de un componente «guided tour», también te brindará consejos para dar más jerarquía y contexto a las propiedades de tus componentes en Figma, asegurando una experiencia de diseño más eficiente y efectiva.

Qué es y para qué usamos un guided tour

Un guided tour es una herramienta de diseño de interfaz que guía a los usuarios a través de una aplicación, sitio web o producto digital, mostrándoles cómo usarlo de manera efectiva.

Las usamos para mejorar su experiencia, cuando lanzamos nuevas features, para ofrecer consejos útiles y para destacar funcionalidades importantes.

Implementando un componente guided tour nos aseguramos que los usuarios de nuestro producto comprendan cómo obtener el máximo provecho del mismo, de manera intuitiva y eficiente.

Descarga el componente

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