Protipado 3

¿Cómo crear acciones múltiples en Figma?

¡Bienvenido al mundo del prototipado avanzado en Figma! Si ya estás aquí, es porque dominas los fundamentos básicos y estás listo para subir de nivel. En esta lección, exploraremos cómo utilizar componentes, variantes y variables para crear acciones múltiples en un prototipo. Prepárate para llevar tus habilidades de diseño a alturas sorprendentes y experimentar interacciones más fluidas y naturales.

¿Cómo configurar interacciones múltiples en un botón?

Un caso común al diseñar interfaces es querer que un solo clic desencadene múltiples acciones. Imagina que tienes un botón que no solo guarda un sendero, sino que también muestra una notificación de confirmación.

// Suponiendo que tienes un componente con dos variantes: 'guardado' y 'no guardado'
const botonGuardar = document.getElementById('botonGuardar');

// Primer acción: pasar de 'no guardado' a 'guardado'
botonGuardar.addEventListener('click', () => {
  cambiarEstadoBoton('guardado');
  mostrarToast('Sendero guardado');
});

function mostrarToast(mensaje) {
  const toast = document.createElement('div');
  toast.innerText = mensaje;
  document.body.appendChild(toast);
  setTimeout(() => {
    toast.remove();
  }, 1200); // Tiempo para que el mensaje desaparezca
}

En este ejemplo, el botón desencadena un cambio de estado y muestra un mensaje Toast, todo con un solo clic. Ten en cuenta que el tiempo de aparición del Toast se puede ajustar para ofrecer una mejor experiencia de usuario.

¿Cómo aplicar variables y estados a los componentes?

Las variables te permiten manejar dinámicamente el estado de los elementos del prototipo. Supongamos que estás trabajando con un filtro que muestra u oculta senderos que tienen o no árboles.

// Uso de variables booleanas para cambiar la visibilidad
let mostrarSoloConArboles = true;

function toggleFiltroArboles() {
  mostrarSoloConArboles = !mostrarSoloConArboles;
  actualizarVisibilidadSenderos();
}

function actualizarVisibilidadSenderos() {
  const senderos = document.querySelectorAll('.sendero');
  senderos.forEach((sendero) => {
    if (sendero.classList.contains('sinArboles') && !mostrarSoloConArboles) {
      sendero.style.display = 'none';
    } else {
      sendero.style.display = 'block';
    }
  });
}

Así, puedes manejar la visibilidad de senderos al alternar entre mostrar todos o solo aquellos con árboles, mejorando la interactividad y usabilidad de tu aplicación.

¿Cómo integrar estados y variables para una experiencia más dinámica?

Al fusionar estados de componentes con variables, puedes alcanzar un nivel elevado de control sobre las interacciones. Considera un escenario donde al hacer clic en un filtro, no solo se cambie su estado gráfico, sino que también modifique una variable que controla qué elementos son visibles.

// Generalizando una función que cambie el estado y ajuste una variable
function cambiarEstadoYVariable(boton, variable, valor) {
  boton.addEventListener('click', () => {
    variable = valor;
    actualizarInterfaz();
  });
}

const filtroArbolesBtn = document.getElementById('filtroArboles');
cambiarEstadoYVariable(filtroArbolesBtn, mostrarSoloConArboles, true);

function actualizarInterfaz() {
  // Actualiza elementos de acuerdo al nuevo valor de las variables
  // Aquí se incluyen las funciones que actualizan la visibilidad de los senderos y cambian el estado gráfico del filtro
  actualizarVisibilidadSenderos();
}

Este código implementa interacciones complejas que brindan realismo a la simulación interactiva. Con cada clic, el prototipo responde otorgan mayor veracidad a la experiencia del usuario, simulando el funcionamiento de una aplicación real.

Figma se convierte, en tus manos, en una poderosa herramienta que trasciende del diseño estático al dinámico, haciendo tangible cualquier idea interactiva que puedas imaginar.