SOBRE LA TECNOLOGÍA
Tecnologias Utilizadas
Actualizaciones más rápidas, dinámicas y eficientes para las aplicaciones móviles
Diseño UX
Desarrollo
Figma
CLIENTE
Interno
INDUSTRIA
Digital
PLATAFORMA
Desktop & Mobile
LOCALIDAD
Santiago, Chile
Sobre el Proyecto
TIEMPO
2 meses
SDUI (Server Driven UI) es una técnica que permite separar la interfaz visual de una aplicación móvil de su lógica interna, enviando desde el servidor la estructura y los datos necesarios para construir cada vista. Esto elimina la necesidad de publicar nuevas versiones en la tienda de apps para realizar cambios, ya que estos se gestionan directamente desde el servidor.
Problema
Lentitud: Los cambios en la interfaz móvil tardan hasta 10 días debido al proceso de despliegue en la tienda de apps.
Falta de escalabilidad: Dificultad para adaptarse rápidamente a las necesidades de los usuarios.
Poca flexibilidad: Limitaciones para modificaciones temporales, como campañas o personalizaciones.
Duplicación de esfuerzos: Inconsistencias visuales y funcionales entre plataformas.
Solución
Implementamos Server Driven UI (SDUI) para actualizar la interfaz sin depender de la tienda de apps.
Esto incluye:- Transformar diseños de Figma en JSON estandarizado.
- Uso de un DSL para validar datos con pruebas de snapshot.
- Almacenamiento y versionado de diseños con acceso en tiempo real.
Este enfoque permite cambios rápidos, escalables y flexibles, adaptándose a campañas, tipos de clientes y ajustes temporales.
¿Cómo funciona SDUI?
Para que estos procesos sean posibles, es necesario que el trabajo del diseñador siga algunas reglas dentro de la creación de los frames y componentes, para permitir el funcionamiento del plugin.
Creación de Elementos
Tendremos 3 elementos base que usaremos para la composición de nuestro diseño. En este caso será un botón, un texto y una imagen.Cada uno de estos debe llevar dos Properties base, las cuales son: Name: state - Values: default Name: style - Values: default
Composición de pantalla
Una vez listos los pasos anteriores, procederemos a la composición de la pantalla. Para esto se debe crear un frame secundario, dentro del principal ya creado, para cada elemento que se agregara a la pantalla.
