Blog: diseño UI, UX e IA
Artículos prácticos sobre diseño de UI, UX, IA en el diseño, movimiento y sistemas de diseño, con fuentes y respuestas rápidas.
Últimos artículos
Todas las guías
Prueba de estados de interfaz de usuario y animaciones con Playwright
Cómo escribir pruebas estables para UI animada con Playwright: controlar el tiempo con page.clock, emular movimiento reducido y modo oscuro, y capturas de pantalla con animaciones deshabilitadas.
La API View Transitions: cambios fluidos de página y estado en el navegador
Qué hace la API View Transitions, cómo funcionan las transiciones entre el mismo documento y entre documentos, cómo diseñarlas con CSS y cómo usarlas de manera responsable.
Información sobre herramientas que explican sin estorbar
Cómo diseñar información sobre herramientas que ayude: breve información complementaria, acceso mediante desplazamiento y teclado, alternativas táctiles y por qué las instrucciones esenciales nunca pertenecen a una información sobre herramientas.
Reducir el pago y el abandono de formularios: lo que dice la investigación
Por qué la gente abandona los carritos y los formularios, según la investigación de Baymard y las correcciones de diseño que ayudan: menos campos, pago como invitado, costos claros, manejo de errores y comentarios.
Botones de acción flotantes: cuándo utilizar un FAB y cómo animarlo
Cuando un botón de acción flotante ayuda, cuando duele, un FAB por pantalla, FAB extendidos y menús FAB, comportamiento de desplazamiento y movimiento.
Barras de pestañas y navegación inferior: reglas de diseño que se mantienen
Cómo diseñar barras de pestañas y navegación inferior en iOS y Android: de 3 a 5 destinos, navegación sin acciones, etiquetas, insignias, visibilidad y estados activos animados.
Retroalimentación háptica en la interfaz de usuario móvil: cuándo y cómo usarla
Cuándo los hápticos ayudan y cuándo molestan: patrones del sistema, coherencia, combinación con retroalimentación visual, hápticos claros versus zumbidos y permitir que las personas los apaguen.
Transiciones suaves de modo claro y oscuro: tokens, CSS y movimiento
Cómo crear un cambio de tema claro/oscuro que respete la configuración del sistema, evite un flash durante la carga, diseñe controles nativos y anime sin perjudicar la accesibilidad.
Diseño para objetos plegables: posturas, tamaños de ventanas y gestos
Cómo diseñar aplicaciones para teléfonos plegables: diseños plegados y desplegados, posturas de mesa y de libro, clases de tamaño de ventanas, continuidad y gestos cerca del pliegue.
Figma Auto Layout vs CSS Flexbox y Grid: cerrando la brecha entre el diseño y el código
Cómo se asigna el diseño automático de Figma al flexbox y la cuadrícula CSS (dirección, espacio, relleno, abrazo, relleno, envoltura) y dónde difieren, para que los diseños sobrevivan al traspaso.
Cómo presentar la limpieza de deudas de diseño y UX a los líderes de ingeniería y productos
Qué es la deuda de UX, cómo inventariarla y priorizarla, y cómo proponer la limpieza y el diseño de refactorizaciones del sistema en términos de financiación de los líderes: riesgo, costo e ingresos.
Medición del ROI de UX: conectando el trabajo de diseño con los resultados comerciales
Una forma práctica de estimar el retorno del trabajo de UX: comparar una métrica de UX, elegir un KPI empresarial, convertir el cambio e informarlo de manera responsable con suposiciones.
Estudios de casos de cartera de UX que se destacan (más allá de la plantilla Bootcamp)
Cómo escribir estudios de casos de UX que los gerentes de contratación quieren: el problema, su función y limitaciones, el medio desordenado, las compensaciones y los resultados, en lugar de una plantilla de pantallas finales.
Microfronteras y deriva del sistema de diseño: mantener la coherencia de la interfaz de usuario en todos los equipos
Cómo los equipos que utilizan microfrontends mantienen una interfaz de usuario coherente: tokens y componentes compartidos como paquetes versionados, aislamiento CSS, políticas de actualización y comprobaciones de regresión visual.
Sobrecarga de notificaciones: diseño de alertas que las personas no desactivan
Cómo diseñar notificaciones que la gente valore: pedir permiso en el momento adecuado, niveles de interrupción, procesamiento por lotes, centros de notificaciones en la aplicación y controles sencillos.
UX de deslizar hacia la acción: hacer que los gestos ocultos sean detectables y seguros
Cómo diseñar acciones de deslizamiento en listas: significantes, umbrales, confirmaciones de deslizamiento completo, deshacer, accesibilidad y por qué deslizar nunca debería ser la única forma.
Las mejores herramientas de animación para los equipos React Native y Flutter en 2026
Las API de animación de Reanimated, Flutter, Lottie, Rive y ExodeUI se compararon con React Native y Flutter: qué hace cada uno, quién escribe el movimiento y cuándo usarlo.
Representación nítida de Canvas en pantallas Retina y de alto DPI
Por qué los gráficos del lienzo se ven borrosos en pantallas Retina y de alto DPI, y cómo solucionarlo con devicePixelRatio, incluido el manejo de cambio de tamaño y los límites de rendimiento.
Cómo la animación afecta a los Core Web Vitals (LCP, INP y CLS)
Cómo las animaciones y los tiempos de ejecución de las animaciones afectan a LCP, INP y CLS, y formas prácticas de mantener el movimiento rico sin perjudicar a Core Web Vitals.
Medidores de seguridad de contraseñas que realmente ayudan: orientación sobre UX y NIST
Cómo diseñar campos de contraseña y medidores de intensidad que sigan las pautas actuales de NIST: longitud de los símbolos, listas de bloqueo, administradores de pegado y contraseñas, y comentarios claros.
Estados de enfoque accesibles: diseño de enfoque de teclado visible
Cómo diseñar un enfoque de teclado visible que cumpla con WCAG 2.2: qué requieren 2.4.7 y 2.4.13, cómo funciona :focus-visible y consejos de diseño para anillos de enfoque.
UX de arrastrar y soltar: significantes, comentarios y alternativas accesibles
La gente puede descubrir y usar cómo diseñar arrastrando y soltando: agarrar significantes, levantar y obtener una vista previa de comentarios, zonas de colocación, física y la alternativa sin arrastre que requiere WCAG 2.2.
Pantallas esqueléticas: cuándo usarlas en lugar de ruedas giratorias
Qué son las pantallas esqueléticas, cuándo superan a los hilanderos, cómo diseñarlas para que coincidan con el contenido real y cómo animarlas sin afectar el rendimiento o la accesibilidad.
Cómo diseñar mensajes de error que reduzcan la frustración
Cómo diseñar estados de error de los que las personas pueden recuperarse: ubicación, sincronización, redacción, preservación de la entrada, accesibilidad y movimiento, basado en investigaciones de usabilidad.
Cómo configurar el servidor ExodeUI MCP en Cursor
Configuración paso a paso para el servidor ExodeUI MCP en Cursor (y Claude Code): la entrada mcp.json, verificación de las herramientas, primeras indicaciones y revisión segura.
Control de las entradas de la máquina de estados ExodeUI desde el estado React
Una guía práctica para reproducir un archivo ExodeUI en React con el paquete exodeui: configuración de entradas booleanas, numéricas y de activación desde el estado React y manejo de eventos.
Cavalry vs ExodeUI: Motion Graphics vs tiempos de ejecución de UI de producción
Cavalry es un software de gráficos en movimiento 2D procedimentales; ExodeUI es para la interfaz de usuario interactiva que se incluye en aplicaciones. Qué hace cada uno, qué produce y cuándo utilizar ambos.
De Flash a Lottie y máquinas de estados: la evolución de la animación vectorial web
Cómo la animación vectorial web pasó de Flash y ActionScript a las exportaciones After Effects de Lottie y luego a tiempos de ejecución de máquina de estado, y qué cambió en cada paso.
Cargadores GIF frente a animación vectorial: por qué los equipos están reemplazando los GIF animados en la interfaz de usuario
Por qué los GIF animados no son adecuados para los cargadores e íconos de UI, qué usar en su lugar (CSS, SVG, Lottie, video, tiempos de ejecución basados en estado) y cómo elegir.
Flinto, Haiku y Origami: la brecha de creación de prototipos interactivos y lo que la llena
Flinto y Origami son solo para Mac, el código de Haiku Animator está en GitHub y InVision ya no está. Qué pasó con las herramientas de creación de prototipos interactivos y qué las reemplaza ahora.
InVision ya no existe: lo que reemplaza a sus prototipos, DSM y flujos de trabajo
InVision finalizó sus servicios de colaboración de diseño el 31 de diciembre de 2024. Esto es lo que reemplazó sus prototipos, el administrador del sistema de diseño y las pizarras, y cómo seguir adelante.
Alternativas Principle para usuarios de Windows y Linux en 2026
Principle solo se ejecuta en Mac. Estas son alternativas realistas para los diseñadores en Windows y Linux, desde la creación de prototipos de navegador hasta tiempos de ejecución interactivos.
Dejar obsoletos los componentes del sistema de diseño sin romper los equipos de productos
Cómo implementar cambios importantes en el sistema de diseño en aplicaciones grandes: anunciar, desaprobar, migrar con codemods y eliminar, utilizando control de versiones semántico y seguimiento de uso.
El regreso táctil: profundidad, vidrio y retroalimentación física en la interfaz de usuario moderna
Por qué la profundidad, la translucidez y el movimiento físico están de vuelta en el diseño de la interfaz de usuario tras el diseño plano, qué cambiaron Liquid Glass y Material 3 Expressive de Apple y cómo mantenerlos utilizables.
Más allá del asistente de varios pasos: incorporación con listas de verificación y ayuda contextual
Cuándo un asistente paso a paso es correcto, por qué se omiten los largos recorridos de incorporación y cómo las listas de verificación y el contexto ayudan a que las personas valoren más rápido.
Densidad de información en B2B SaaS: diseño de paneles para usuarios avanzados y principiantes
Cómo diseñar paneles y tablas B2B densos que los expertos puedan escanear rápidamente sin abrumar a los nuevos usuarios: modos de densidad, jerarquía, divulgación progresiva.
Paletas de comandos versus navegación anidada: cuando Cmd+K supera a la barra lateral
En qué son buenas las paletas de comandos, dónde fallan y cómo diseñar una junto con la navegación: búsqueda, coincidencias aproximadas, atajos y capacidad de descubrimiento.
Deshacer en lugar de cuadros de diálogo de confirmación: diseño de una interfaz de usuario menos disruptiva
¿Por qué la rutina "¿Estás seguro?" los cuadros de diálogo fallan, cuándo una confirmación aún es correcta y cómo diseñar notificaciones de deshacer que sean claras, accesibles y seguras.
Arquitectura de tokens de diseño semántico: tokens globales, semánticos y de componentes
Cómo estructurar tokens de diseño en tres niveles, admitir temas y múltiples marcas, y enviarlos a la web, iOS y Android utilizando el formato W3C DTCG.
Igualdad de IA: mantener la personalidad de la marca cuando la IA genera su interfaz de usuario
Por qué los generadores de UI de IA producen interfaces similares y formas prácticas de mantener una identidad distintiva: tipografía, color, diseño, movimiento, ilustración y voz.
Movimiento accesible: diseñar para el movimiento reducido sin perder significado
Cómo diseñar un movimiento que respete los entornos de movimiento reducido y los trastornos vestibulares: qué requiere WCAG, qué eliminar, qué conservar y cómo probar.
MCP para diseñadores: conexión de Figma, tokens y código a Claude y Cursor
Qué significa el protocolo de contexto del modelo para los diseñadores, qué herramientas de diseño tienen servidores MCP, cómo conectarlos a Claude Code y Cursor, y a qué prestar atención.
Barandillas de interfaz de usuario generativas: diseño según la intención sin romper su sistema de diseño
Cómo cambia la UX cuando la IA crea la interfaz sobre la marcha y cómo estructurar los componentes, tokens y comprobaciones para que la UI generada permanezca accesible y acorde a la marca.
Estados de la interfaz de usuario agentes: cómo mostrar el pensamiento, las llamadas de herramientas y el progreso de la IA
Cómo diseñar los estados de ejecución de un agente de IA: recibido, pensando, llamadas a herramientas, transmisión, realizado, detenido y fallido. Patrones, tiempos y ejemplos.
Respuestas rápidas
Todas las preguntas- ¿Cómo se utiliza la IA en la investigación de UX?
- ¿Cómo se diseña una interfaz de usuario de chatbot con IA?
- ¿Cómo se diseña UX para productos de IA?
- ¿Cuáles son los principios del diseño de UI?
- ¿Cuál es el proceso de diseño UX?
- ¿Cuál es la diferencia entre un wireframe, una maqueta y un prototipo?
- ¿Qué es el diseño de interacción?
- ¿Qué es un estado vacío en UX?
- ¿Cómo debería funcionar un estado de carga?
- ¿Qué son los estados de la UI?
- ¿Qué herramientas de diseño tienen un servidor MCP?
- ¿Qué es un sistema de diseño?
- ¿Cómo se diseña la interfaz de usuario con IA?
- ¿Puede la IA reemplazar a los diseñadores de UI?
- ¿Por qué es importante el diseño UX?
- ¿Qué es el diseño de interfaz de usuario?
- ¿Cuál es la diferencia entre UI y UX?
- ¿Qué software utilizan los diseñadores de UI para la animación?
- ¿Existe una herramienta de animación de UI en línea gratuita?
- ¿Cuál es la mejor alternativa Lottie para Flutter?
- ¿Adobe Animate está descontinuado?
- ¿Pueden los agentes de IA escribir animaciones de UI de nivel de producción?
- ¿Cómo se solucionan los problemas de rendimiento y el consumo de batería del Lottie en el móvil?
- ¿Rive es gratuito para uso comercial?
- ¿Por qué las animaciones primaverales son mejores que las transiciones cúbicas-bézier?
- ¿Qué es la animación Tencent PAG y cómo se compara con Lottie?
- ¿Cómo se conectan los agentes de IA al movimiento de la interfaz de usuario mediante el protocolo de contexto del modelo (MCP)?
- ¿Cuál es el mejor reemplazo moderno para Adobe Animate y Flash?
- ¿Cómo se convierten las animaciones del prototipo Figma en código de producción React?
- ¿Cuál es la diferencia entre Rive, Lottie y ExodeUI?
- ¿Cuál es la mejor alternativa a Rive en 2026?
- ¿Cómo funcionan las animaciones de primavera en SwiftUI?
- ¿Qué son los tokens de movimiento y cómo funcionan en los sistemas de diseño?
- ¿Se puede utilizar ExodeUI en React Native?
- ¿Cuál es la diferencia entre Figma Smart Animate y la física de resorte?
- ¿Es ExodeUI mejor que Rive?
- ¿Qué es un entorno de desarrollo de movimiento?