Hápticos: cómo crear una solución multiplataforma consistente y alinear su código con Figma
Cómo tradujimos la semántica háptica de Apple en tres parámetros numéricos que funcionan igualmente bien en iOS, Android y la web, y reflejan nuestros componentes Figma.
Actualmente estoy trabajando en un gran sistema de diseño. SDUI proyecto, en este artículo quiero compartir mi experiencia implementando hápticos en aplicaciones: explore los desafíos que puede encontrar y llegue a una solución consistente en tres plataformas: iOS, Android y web móvil.
En este artículo, haré un viaje paso a paso desde el caos (“cada plataforma hace lo suyo”) hasta un sistema unificado de ajustes preestablecidos hápticos configurados por diseñadores en Figma y entregados a los desarrolladores como JSON.
Pero primero, definamos brevemente qué es el tacto.
Haptics es una tecnología de retroalimentación táctil utilizada en dispositivos móviles, controladores de juegos y dispositivos electrónicos portátiles para mejorar la experiencia del usuario a través del tacto. Esta interfaz ya no se basa únicamente en señales visuales o sonoras, sino que “responde” al usuario mediante retroalimentación física (ligeras vibraciones, pulsos o micromovimientos).
Esto se ha convertido en la norma en las aplicaciones modernas y es una parte integral de la experiencia diaria de los usuarios. Pero cuando profundiza, encontrará que las plataformas adoptan enfoques muy diferentes para la retroalimentación háptica y no existe una solución multiplataforma lista para usar.
No voy a reafirmar los principios básicos aquí – Avinash Bussa “Las tácticas mejoran la experiencia del usuario” Si es nuevo en el tema, UX Collective en UX Collective es un sólido libro introductorio. En este artículo, me centraré en cuestiones prácticas: cómo hacer que los hápticos sean consistentes en iOS, Android y la web móvil, y cómo hacer que los componentes de Figma sean consistentes con su código.
Dónde y por qué se necesita el tacto
Antes de elegir un ajuste preestablecido, es importante determinar en qué escenarios entrarán en juego los hápticos. Utilicé Mobbin para recopilar materiales de referencia y agrupar casos de uso por tipo de interacción; esta agrupación luego ayudó a mapear ajustes preestablecidos específicos.
hacer clic/presionar— Botones, celdas, pancartas. La sensación táctil confirma la acción y crea la sensación de un botón “físico”. Los usuarios no tienen que adivinar si hicieron clic: lo sienten. Por ejemplo, envía un mensaje en Telegram o dale me gusta a una publicación en Instagram.
deslizar— Gestos en tarjetas, hojas, pestañas. La señal táctil alcanza un umbral: “Un poco más y la tarjeta saldrá volando”. Ayuda a controlar los gestos sin mirar la pantalla. Un ejemplo clásico es deslizar el dedo por Tinder.
arrastrar y soltar— Ordenar listas, mover elementos. El sentido del tacto crea la ilusión de peso y resistencia, confirmando que el objeto está fijo en su nueva posición. Por ejemplo, reorganice los widgets en la pantalla de inicio de iOS.
Errores y limitaciones— Ingrese contenido no válido o envíe un formulario no válido. Comentarios instantáneos sin tener que leer el texto: los usuarios sabrán que algo salió mal incluso antes de ver el mensaje. Este patrón es universal y reduce la carga cognitiva.
Éxito/Confirmación— Completa pagos, envía formularios, logra ciertos objetivos en el juego. Proporcionar refuerzo emocional y un punto final claro para la acción.
Límites de desplazamiento y contenido— Efecto rebote al llegar al final de la lista. Los usuarios pueden sentir los límites incluso sin mirar.
Pulsación larga— Llame al menú contextual para mostrar acciones adicionales. Se registra una pulsación larga de confirmación táctil.
Juegos y gamificación— Una sensación de inmersión más profunda, reemplazando la retroalimentación visual por el tacto para mejorar la emoción durante el proceso de logro.
animaciones y transiciones— Hacer que la animación sea “tangible” y resaltar los momentos clave. Comúnmente utilizado en el proceso de incorporación.
¿Qué servicios ofrece la plataforma?
Este es un punto clave que define toda la arquitectura.
Google no tiene una filosofía unificada sobre la retroalimentación táctil. Hay un conjunto de constantes (KEYBOARD_TAP, LONG_PRESS, CLOCK_TICK, etc.), pero no hay ningún modelo semántico detrás de ellas; es más bien una lista de funciones de hardware.
Apple adopta un enfoque diferente. Hay tres tipos semánticos de contacto, que se distinguen no por la intensidad sino por el significado del evento:
- Influencia— Interacción física con elementos de la interfaz de usuario (hacer clic, deslizar, ajustar)
- elegir— Cambiar entre valores discretos (selector, segmento)
- notificar— Resultados de eventos que no requieren contacto (éxito, error, advertencia)
Usamos este modelo semántico como base. De ahora en adelante, uso los nombres de Apple; esto es importante para el mapeo multiplataforma.
Influencia: interacción física con elementos.
Los hápticos de impacto se utilizan durante las interacciones físicas con elementos de la interfaz de usuario, como cuando un usuario toca un elemento, una tarjeta encaja en su lugar o un gesto alcanza su umbral. Esta retroalimentación simula la sensación de contacto y hace que la interfaz parezca más tangible.
Preajustes disponibles:
Luz— Pulsos cortos y de baja intensidad.
medio— Pulsos cortos y de intensidad media.
pesado— Pulsos cortos y de alta intensidad
suave— Baja amplitud, inicio suave
rígido— alta amplitud, comienzo brusco
Seleccionar – cambiar el valor actual
Utilice hápticos de selección al cambiar entre valores discretos, por ejemplo, desplazarse por un selector o cambiar de segmento. Cada cambio va acompañado de un breve “tic” táctil para ayudar a los usuarios a sentir cada paso de la interfaz.
Apple proporciona un ajuste preestablecido:
Selección cambiada— Un único pulso corto para confirmar un cambio de valor
Notificación: resultados del evento
Los hápticos de notificación indican el resultado de un evento: éxito, advertencia o error. Esta retroalimentación refuerza el estado del mensaje y ayuda a los usuarios a identificar rápidamente lo que sucedió. No requiere interacción física.
Apple ofrece tres ajustes preestablecidos:
éxito— Indica la finalización exitosa de una secuencia de 2 pulsos
advertir— Una secuencia de 2 pulsos de intensidad media que indican una advertencia.
error— Una secuencia de 4 pulsos enfatizados que indican errores.
Toque personalizado
Para nuestra aplicación, también necesitábamos hápticos personalizables con configuración flexible, por ejemplo, para animaciones complejas de Lottie.
Importante: La retroalimentación táctil la genera el motor de vibración del dispositivo. Los motores de Apple están estandarizados, mientras que los dispositivos Android pueden tener motores muy diferentes, algunos de los cuales no admiten control de intensidad. Para las pruebas, es mejor utilizar un dispositivo en el que confíe: lo probamos en un OnePlus 15 y los resultados fueron casi idénticos a los del iPhone.
Para obtener información detallada sobre los parámetros completos del motor de vibración, consulte manzana y Google Documentación. Para simplificar el esquema JSON (importante para aplicaciones SDUI), reducimos los parámetros de vibración a tres parámetros principales:
- Demora— Retraso antes de que comience la vibración (milisegundos, base cero)
- período— Duración de la vibración (milisegundos)
- fortaleza— Intensidad de vibración (de 0 a 1)
Este nombre no es casualidad: lo comparamos con Soluciones de redes móviles existentes.
Plataforma topográfica y cartográfica
Inicialmente, planeé asignar los ajustes preestablecidos de Apple directamente a los ajustes preestablecidos de Google:
https://medium.com/media/6ad45f39291619f5333168fca52015d9/href
Sin embargo, las pruebas demostraron que el mapeo directo no funcionó: las constantes de Google coincidían por similitud de nombres, pero las sensaciones táctiles reales no coincidían: la intensidad, la duración y el “carácter” diferían tanto que los usuarios obtendrían experiencias completamente diferentes en iOS y Android.
Por lo tanto, decidimos redefinir los valores predeterminados de Android con parámetros personalizados.
Apple no expone los valores preestablecidos exactos, pero proporciona una visualización clara que los convierte en valores numéricos relacionados con nuestros parámetros (retraso, duración, intensidad).
Como resultado, llegamos a valores consistentes:
Afectar preestablecido
https://medium.com/media/bc1720cd6ab5796bae7c20c477b488a0/href
elegir
https://medium.com/media/e5b2ae22ca24941e4eac8d7181fdc92c/href
Ajustes preestablecidos de notificación (compuestos)
Éxito (2 pulsos)
https://medium.com/media/4193f9bcc68e7a8c416cf9507669c15f/href
Advertencia (2 pulsos)
https://medium.com/media/e8ecbdd3ee4c8e6828eafe8a570f3349/href
Error (4 pulsos)
https://medium.com/media/37d9362b5bdd00bb1f27b56c9fdd7509/href
Alinear el código con los componentes de Figma
Es importante mantener el código y la estructura de los componentes en Figma lo más fielmente posible. Esto es especialmente útil si desea optimizar la colaboración entre diseñador y desarrollador, como por ejemplo utilizando un complemento que lea símbolos y los convierta en un esquema JSON.
En nuestro código, la estructura háptica es un parámetro OneOf que consta de un conjunto predeterminado y una háptica personalizada. En Figma, logro esto a través de parámetros de intercambio de instancias, donde el diseñador puede elegir el tipo háptico.
Si eliges un preset, todo es sencillo. Si elige Personalizado, aparecerán parámetros adicionales:
patrón: matriz {patrón}
Una gama de modos hápticos para crear comentarios más complejos. En Figma, esto se logra mediante Variantes:
Cada modo contiene tres parámetros (implementados como atributos de texto ocultos):
- Retraso: entero— Retraso antes de la vibración
- Duración: entero— Duración de la vibración
- Fuerza: Cantidad— de 0 a 1
En Figma, se ve así:
generalizar
Terminamos con un sistema táctil preestablecido unificado:
- Semántica— Basado en el modelo de Apple (afectar/seleccionar/notificar) en lugar de constantes de hardware
- Multiplataforma— Se siente consistente en iOS y Android a través de parámetros personalizados en lugar de mapeo API directo
- Ampliable— Táctiles personalizables (retraso/duración/intensidad) que cubren situaciones no estándar (animaciones de Lottie, mecánicas de juego)
- Sincronización de diseño— El componente Figma refleja la estructura del código y la convierte a JSON.
Limitaciones: la compatibilidad táctil en los navegadores móviles todavía está por detrás de las plataformas nativas. Para la red, utilizamos un conjunto simplificado de patrones con los mismos parámetros pero sin fuerza. Es un compromiso más que una equivalencia total, pero la estructura preestablecida compartida al menos conserva una lógica y una denominación consistentes.
¡Disfruta de la retroalimentación táctil!
lectura adicional
Conceptos básicos táctiles:
- Táctiles que mejoran la experiencia del usuario: Diseñados para todos—Avinash Bussa, Colectivo UX
- Dark Touch: explorando el diseño háptico controlado— Estudio CHI 2025 sobre cómo se utiliza el tacto para influir en la toma de decisiones (una comparación útil: cuando el tacto se convierte en un patrón oscuro)
Documentación de la plataforma:
- jugar con el tacto — Directrices de interfaz humana de Apple
- Diseño de experiencia de usuario táctil. — Proyecto de código abierto de Android
Arquitectura SDUI:
- Una mirada en profundidad al sistema de interfaz de usuario basado en servidor de Airbnb— Ryan Brooks, Ingeniería de Airbnb (referencia SDUI estándar que describe la plataforma Ghost que admite búsquedas, listados y pago)
Flujo de trabajo de diseño a código:
- De Figma a la producción: cómo finalmente sincronicé mis sistemas de diseño— Alexander Burgos (Una guía práctica para Figma → Sincronización de código con tokens W3C y PR generados automáticamente)
herramienta:
- sentido de internet— La solución táctil web que inspiró la denominación de nuestros parámetros
Hápticos: cómo crear una solución multiplataforma consistente y alinear su código con FigmaPublicado originalmente en colectivo de experiencia de usuarioEn Medium, la gente continúa la conversación destacando y respondiendo a esta historia.
