A continuación vamos a ver los principales componentes de Motion UI con algunos ejemplos de cómo los usamos en Chispa:

## Animaciones
Con esto nos referimos a elementos que cambian su forma o tamaño, que se desplazan por la pantalla, o modificaciones de los mismos cuando pasamos el cursor sobre ellos.

Algunos ejemplos de esto:  

- Cuando usamos botones es importante que se note que lo son ya desde su estética, pero que también generen alguna sensación más al posarnos sobre ellos.
 ![buttons.gif](https://chispa-strapi-assets.s3.amazonaws.com/buttons_f7763ff580.gif)
- Un componente con video de fondo en movimiento para captar la atención del usuario.
![banner.gif](https://chispa-strapi-assets.s3.amazonaws.com/banner_eea64e9693.gif)
- Cards que modifican su información, colores y otros aspectos del sitio, como el color del fondo, para potenciar el interés del usuario.
![card.gif](https://chispa-strapi-assets.s3.amazonaws.com/card_4834b35140.gif)
- Portadas que aparecen con alguna animación para incentivar al usuario a recorrer la página.
![hero.gif](https://chispa-strapi-assets.s3.amazonaws.com/hero_1d012a0df1.gif)
- Marquesinas para que se vuelva más ameno e interesante leer la información, las listas de texto son aburridas.
![marquee.gif](https://chispa-strapi-assets.s3.amazonaws.com/marquee_740e6ad568.gif)  

\
&nbsp;

## Efectos de scroll
Nuestra interacción favorita en Chispa se basa en animar distintos elementos del sitio a medida que el usuario lo recorre. Esto da sentido de profundidad e interacción, que mejora la experiencia e incentiva a continuar desplazándose o prestarle más atención a un elemento que está siendo animado por el scroll.

Les dejamos algunos ejemplos a continuación:  

- Las distintas animaciones que van sucediendo son en pos de tener un impacto positivo y un incentivo en continuar desplazándose por el contenido del sitio.
![scroll.gif](https://chispa-strapi-assets.s3.amazonaws.com/scroll_3d1979b637.gif)
- Títulos grandes que aparecen con un efecto elegante para reforzar su lectura.
![scroll2.gif](https://chispa-strapi-assets.s3.amazonaws.com/scroll2_67de6abc08.gif)
- Para un bloque de información importante que quieres asegurarte que sea leído, la sección se fija y nos va revelando el texto a medida que nos desplazamos.
![scroll3.gif](https://chispa-strapi-assets.s3.amazonaws.com/scroll3_941233a555.gif)
- Otro ejemplo de cómo reforzar y destacar una idea o concepto.
![scroll4.gif](https://chispa-strapi-assets.s3.amazonaws.com/scroll4_f6caf6a171.gif)  

\
&nbsp;

## Feedback
Reacciones a las interacciones con el sitio web. Por ejemplo, un icono de notificación rebota ligeramente para llamar la atención, un mensaje que aparece con algún efecto para indicar un error cuando queremos enviar un formulario, o uno de éxito cuando pudimos enviarlo satisfactoriamente.

Veamos algunas:  

- Aquí podemos ver cómo aparece un tooltip en la parte inferior derecha de la pantalla para indicarnos que el formulario no se pudo enviar.
![feedback.gif](https://chispa-strapi-assets.s3.amazonaws.com/feedback_aa1cd55830.gif)
- En cambio, en este caso vemos un mensaje de éxito cuando pudimos enviar el formulario satisfactoriamente.
![feedback2.gif](https://chispa-strapi-assets.s3.amazonaws.com/feedback2_f52c9a2fb3.gif)  

\
&nbsp;

## Tecnologías

Hay distintas formas de hacer Motion UI en la web, desde animar con CSS hasta librerías de JavaScript. En Chispa utilizamos ambos métodos, pero los más complejos los hacemos con JavaScript, principalmente con GSAP (GreenSock Animation Platform) y Framer Motion, dos de las mejores herramientas para animar.

Para cerrar, les dejo un ejemplo de código de GSAP para hacer los círculos de colores que van apareciendo con el scroll y el link al [demo](https://codepen.io/juciccio/pen/PoxjdoG):  


```
gsap.registerPlugin(ScrollTrigger);
gsap.set('.container', { autoAlpha: 1 });

const targets = gsap.utils.toArray('.item');
const timeline = gsap.timeline({
  defaults: {
    overwrite: 'auto'
  },
  scrollTrigger: {
    end: '+=1000',
    pin: true,
    pinSpacing: true,
    scrub: 1,
    start: 'top top',
    trigger: '.container'
  }
});
const stagger = 0.3;
const duration = 2;

timeline.set(targets, { transformOrigin: 'center center' });

timeline
  .from(targets, {
    duration: duration,
    stagger: stagger,
    scale: function (index, target, list) {
      if (index === 0) {
        return 0.2;
      }
      return 0;
    }
  })
  .to(
    targets,
    {
      duration: duration,
      stagger: stagger
    },
    0
  );
```

large_motion-hero.png

medium_motion-hero.png

small_motion-hero.png

thumbnail_motion-hero.png

motion-hero.png

small_motion-hero-mob.png

thumbnail_motion-hero-mob.png

motion-hero-mob.png

Aspectos y beneficios claves de Motion UI en la web.

Motion UI: Qué es y como lo usamos en Chispa

![sustentabilidad-blog-1.png](https://chispa-strapi-assets.s3.amazonaws.com/sustentabilidad_blog_1_d10c8a7ba2.png)

## ¿Qué es el UX Sustentable?

El UX Sustentable, o Sustainable UX, es la práctica de diseñar experiencias digitales que sean eficientes, accesibles, éticas y sostenibles desde una perspectiva medioambiental y social. A través de este enfoque, se busca reducir el impacto negativo en el medio ambiente, garantizar la inclusión de todas las personas, y tomar decisiones éticas en el diseño. La sostenibilidad se ha convertido en un elemento fundamental en el diseño de UX que no debe pasarse por alto.  
\
&nbsp;

**El Vínculo Inquebrantable**

La relación entre sostenibilidad y UX es más profunda de lo que parece a simple vista. Cuando hablamos de una experiencia de usuario excepcional, no solo nos referimos a la facilidad de uso y atractivo visual, sino también a la eficiencia y a cómo esa experiencia afecta al mundo que nos rodea.

1. **Eficiencia Energética**: La sostenibilidad en el diseño implica crear aplicaciones y sitios web que consuman la menor cantidad de energía posible. Esto no solo es beneficioso para el medio ambiente, sino que también se traduce en tiempos de carga más rápidos, una experiencia más fluida y dispositivos que duran más tiempo con una sola carga.
2. **Accesibilidad Universal**: Diseñar para la accesibilidad es un pilar del UX Sustentable. Al hacer que las experiencias sean accesibles para todas las personas, incluidas aquellas con discapacidades, se cumple con un principio fundamental de inclusión, al tiempo que se aumenta el público potencial y se promueve la igualdad.
3. **Durabilidad**: La sostenibilidad implica la creación de productos digitales que tengan una vida útil prolongada, reduciendo así la necesidad de reemplazar dispositivos con frecuencia y disminuyendo la generación de residuos electrónicos. Un producto digital que dura más tiempo es, en última instancia, un mejor producto para el usuario y para el planeta.
4. **Ética y Responsabilidad Social**: Tomar decisiones éticas en el diseño, respetar la privacidad de los usuarios y promover prácticas comerciales responsables son aspectos fundamentales de la sostenibilidad. Las empresas que se adhieren a estos principios generan confianza y construyen relaciones sólidas con sus usuarios.

\
&nbsp;

>"Una interfaz de usuario desordenada aumenta el tiempo de toma de decisiones y la frustración, lo que conduce a un mayor consumo de energía"  
>**Grupo Norman Nielsen**

\
&nbsp;

![sustentabilidad-blog-2.png](https://chispa-strapi-assets.s3.amazonaws.com/sustentabilidad_blog_2_2d1fa66374.png)

## Beneficios Claros

El UX Sustentable no solo es una elección ética, sino que también conlleva beneficios tangibles para las empresas y los usuarios. Al adoptar este enfoque:

- Las empresas mejoran su reputación y atraen a consumidores conscientes de la sostenibilidad.
- Pueden ahorrar costos a largo plazo gracias a la eficiencia energética y la durabilidad de los productos.
- Los usuarios disfrutan de experiencias más eficientes y éticas.

\
&nbsp;

![sustentabilidad-blog-3.png](https://chispa-strapi-assets.s3.amazonaws.com/sustentabilidad_blog_3_a13b9638c0.png)

## El Futuro de UX Sustentable

El futuro del UX Sustentable es prometedor. A medida que la conciencia medioambiental y la demanda de productos y servicios éticos continúan creciendo, las empresas y diseñadores se verán impulsados a adoptar prácticas de Sustainable UX. Este enfoque se convertirá en una parte ineludible del diseño de experiencias de usuario, ayudando a construir un mundo digital más sostenible y ético.
En resumen, la sostenibilidad y el UX son inseparables. Para lograr una experiencia de usuario verdaderamente excepcional, debemos abrazar la sostenibilidad en cada paso del proceso de diseño. La próxima vez que desarrollemos una aplicación o sitio web, recordemos que "Sin Sustentabilidad no hay buen UX". Es un compromiso que beneficia a usuarios, empresas y al planeta que todos compartimos.

large_sustentabilidad-ux.png

medium_sustentabilidad-ux.png

small_sustentabilidad-ux.png

thumbnail_sustentabilidad-ux.png

sustentabilidad-ux.png

small_ux-sust-mob-hero.png

thumbnail_ux-sust-mob-hero.png

ux-sust-mob-hero.png

Sin sustantabilidad no hay UX

![sda-blog-2.png](https://chispa-strapi-assets.s3.amazonaws.com/sda_blog_2_d66755f581.png)

Para empezar desde el principio y para los que no están familiarizados con este proceso, voy a comenzar con la pregunta básica.

**¿Qué es Software Development Automation?**

Software Development Automation se refiere al uso de herramientas y tecnologías para automatizar diferentes aspectos del proceso de desarrollo de software. Esta automatización se aplica en varias etapas del ciclo de vida del desarrollo para mejorar la eficiencia, reducir los errores y acelerar el tiempo de entrega del producto final. 

Este proceso no es solo una tendencia, sino una necesidad creciente en la industria tecnológica. En Chispa, entendemos que el tiempo es esencial, y cada línea de código que escribimos cuenta. Es por eso que hemos adoptado la Automatización del Desarrollo de Software en todos los aspectos de nuestro trabajo.

\
&nbsp;

Ahora bien, estas son las cosas que hacemos para automatizar que ayudan en cada etapa del proceso:

## 1. Alcance y requerimientos
En primer lugar, tenemos que empezar con los requerimientos, todo desarrollo en su comienzo tiene ciertos requerimientos y objetivos a cumplir. En este punto del proceso es fundamental utilizar herramientas de gestión, tales como **Jira**, **Trello**, **Assana**, etc. Estas herramientas proporcionan un repositorio centralizado para todos los requisitos y permiten a las partes interesadas colaborar en tiempo real. De esta manera podremos hacer un seguimiento organizado y óptimo del equipo productivo.

## 2. Coding
Una vez tengamos claros los requisitos, comenzaremos a escribir código. Aquí es fundamental utilizar una herramienta de control de versiones como **GitHub**, que nos va a permitir automatizar la gestión del código fuente, facilitando la colaboración entre los desarrolladores y el seguimiento de los cambios en el código. Otra de las herramientas que nos ayuda en esta parte del proceso es el editor de texto, en Chispa somos partidarios de utilizar **Visual Studio Code**. El editor nos va a ayudar a escribir código para ganar tiempo y además es una buena práctica compartir un estándar de configuración para que todos los desarrolladores sigan ciertos lineamientos.

## 3. Testing
Una forma de ser más eficientes y evitar errores es con la automatización del análisis de calidad. Esto lo podemos lograr implementando herramientas de testeo tales como **Jest** y **Cypress**, para ejecutar pruebas de regresión, pruebas unitarias y pruebas funcionales de forma automática, lo que garantiza que el software funcione según lo esperado.

## 4. Deployment
Las herramientas de automatización pueden ayudar a implementar nuestro software en diversos entornos, como desarrollo, staging y producción. En esta etapa, las prácticas y herramientas más populares incluyen:

- **Integración continua y despliegue continuo (CI/CD)**: son prácticas esenciales en nuestro enfoque. Cada modificación pasa por un riguroso proceso de pruebas y se integra automáticamente con nuestro código existente. Esto no solo acelera nuestros tiempos de entrega, sino que también garantiza la calidad del producto final. Para estos procesos utilizamos herramientas como GitHub Actions y AWS CodePipeline.
- **Containerization**: herramientas como Docker y AWS ECS, nos permiten reducir el tiempo y el esfuerzo necesarios para implementar una aplicación en contenedores y garantizar que la aplicación siempre se ejecute en un entorno coherente.
- **Infraestructura como código (IaC)**: utilizamos Terraform para reducir el tiempo y el esfuerzo para implementar los recursos de infraestructura, garantizar que la infraestructura siempre esté configurada correctamente y tener la misma en forma de código versionada en un repositorio, permitiendo una mejor forma de colaborar.

## 5. Mantenimiento
La automatización nos puede ayudar a monitorear cómo se comporta nuestro producto después de la implementación e identificar errores antes de que se conviertan en problemas. En Chispa utilizamos herramientas como Datadog, New Relic, Sentry, CloudWatch, entre otras, para monitorear los servicios y alertarnos cuando surjan problemas de rendimiento o riesgos de falla.

large_sda-blog.png

medium_sda-blog.png

small_sda-blog.png

thumbnail_sda-blog.png

sda-blog.png

small_sda-hero-mob.png

thumbnail_sda-hero-mob.png

sda-hero-mob.png

La calidad, eficiencia y productividad son parte de nuestra esencia como equipo

Software Development Automation

![figma-tips-1.png](https://chispa-strapi-assets.s3.amazonaws.com/figma_tips_1_1d0c644745.png)

## 1. Tutoriales para todo

Siento que para aprender Figma, no es necesario hacer un curso. En parte porque la herramienta se actualiza todo el tiempo (o sea que es posible que los cursos queden desfasados), y en otra parte, porque hay demasiado material en internet, así que sería un poco tirar la plata. Mi filosofía siempre autodidacta es aprender a base de tutoriales. 
Hay algunas cuentas que están buenas y que valen la pena seguir: 
- En primer lugar, el canal de YouTube de Figma es el mejor de todos. Nadie mejor que ellos te explican y te enseñan como usarlo. De hecho te arman archivos para que vos pongas en práctica las nuevas actualizaciones. Personalmente, los videos que más me gustan son los Figma tips. 
- El influencer Zander: @Zanderwhitehurs en Instagram o @zander_supafast en Twitter. Te enseña a hacer cosas muy copadas en cuestión de segundos. Más que nada explica prototipado, y efectos, pero sirve mucho para inspiración.  
- Miggi  professorfigma en tiktok: Más que nada te enseña a dibujar en Figma y olvidarte de Illustrator para siempre. 

\
&nbsp;

![figma-tips-2.png](https://chispa-strapi-assets.s3.amazonaws.com/figma_tips_2_2b625f7b3b.png)

## 2. Los shortcuts: un camino de ida

Después de 10 años de usar psd o Illustrator, memorizar nuevos shortcuts (atajos del teclado) costó bastante.  Por suerte algunos los heredamos, como Option para duplicar objetos o T para insertar texto. 
Con el tiempo aprendí otros que realmente me hicieron ganar varias horas de productividad y se los quiero compartir: 
- Pegar y reemplazar contenido →  Cmd + Shift + R
- Copiar propiedades → Option + cmd + C
- Pegar propiedades → Option + cmd + V
- Intercambiar relleno y trazo → Shift + X
- Zoom al objeto seleccionado →  Shift + 2
- Ir seleccionando hijos dentro de un frame → Enter 
- Regresar y seleccionar padres de un frame → Shift + Enter 
- Escalar desde el centro (mientras estiras)  → Option

Tip: Podés encontrar la lista completa de atajos de teclado yendo a la sección "Ayuda" en la esquina superior derecha de la ventana de Figma.

\
&nbsp;

## 3. Mi atajo preferido: Shift+A

Pensar que el autolayout (shift+a) me cambió la vida, suena exagerado (y lo es). Pero sí puedo afirmar que me ahorró muchas horas de trabajo minucioso.  Me acuerdo cuando no lo usaba. Tenía que acomodar todos los espaciados manualmente, y si decidía modificar algo como achicar el texto o cambiar un elemento de lugar, tenía que corregir todos esos espaciados uno por uno (y obviamente nunca quedaba pixel perfect). 
Al principio, puede parecer un poco abrumador, pero una vez que le agarras la mano, se vuelve fácil e intuitivo de usar, y hasta una necesidad.  ¿Para qué sirve? Ayuda a mantener los diseños consistentes, y además es clave para establecer parámetros en los diseños responsive.
Para entenderlo y no volverse loco, mi sugerencia es ir de menos a más: primero aplicarlo a un botón, después a un navbar, más tarde hacer una card, y por último algunas pantallas más complejas. Y mirar tutoriales. Muchos tutoriales. 

\
&nbsp;

![figma-tips-3.png](https://chispa-strapi-assets.s3.amazonaws.com/figma_tips_3_94bc748e86.png)

## 4. Las ventajas de componetizar

Una de las primeras cosas que aprendí cuando arranqué a usar Figma fue a componetizar y armar distintas variantes. ¿Para qué sirve esto?  Si hay algún elemento que vas a reutilizar durante todo tu diseño, lo componetizas, de esa forma, si necesitas hacerle cambios, lo haces desde el componente madre y así se actualiza en todas las pantallas.  También es importante armar las variables de cada componente, por ejemplo, para indicar sus distintos estados. Por ejemplo, si armamos un botón, lo hacemos con todas sus variantes: idle, hover, on click, focus y disabled. De esta manera queda todo documentado. 

\
&nbsp;

## 5. Plugins: mi top 5

Un plugin de Figma es un software adicional que se integra a la plataforma y agrega funciones personalizadas. En figma hay una lista infinita de plugins y recursos para aprovechar, pero he aquí mi top 5 más usado:
Unsplash: Unsplash es un banco de imágenes gratuitas y de alta calidad. El plugin sirve para buscar y agregar imágenes directamente en tus proyectos de diseño sin tener que salir de la aplicación.
- Lorem ipsum: Este plugin te permite generar rápidamente texto de relleno en tu diseño. 
- A11 color contras checker: Clave para lograr diseños 100% accesibles. Lo que hace este plugin es justamente verificar el contraste entre el texto y el fondo, es decir, te indica si los textos cumplen con las pautas de accesibilidad web (WCAG).
- Clean document: Ayuda a mantener el archivo ordenado, organizado y sin elementos “escondidos” o inutilizados. 
- Measure: Sirve para medir elementos. Es clave para armar las especificaciones técnicas de un determinado diseño. 

\
&nbsp;

![figma-tips-4.png](https://chispa-strapi-assets.s3.amazonaws.com/figma_tips_4_0f0924a0c0.png)

## 6. Mantén el orden 

Cada uno puede tener su propio orden dentro de figma, pero les quiero contar como lo hacemos en Chispa.  En primer lugar, jerarquizamos y organizamos nuestro trabajo en 3 niveles: 
Nivel 1, teams: En este caso nuestro equipo de trabajo,  Chispa. 
Nivel 2, clientes: Para que se den una idea, son como carpetas de drive. Nosotros tenemos una carpeta por cada cliente, y dentro de cada una de ella podemos guardar distintos subproyectos o files. 
Nivel 3, files, subproyectos: Son los distintos archivos de diseño de Figma o figjam. A estos files los solemos diferenciar otorgándoles a cada uno su carátula. 

Por otro lado, dentro de cada file, podemos ir creando distintas páginas.  En Chispa, cuando hacemos una página web, por ejemplo, nos gusta ordenar las páginas así:

**Ready to Dev**: diseño listo para el desarrollador dividido en secciones.

**---**

**Style guide**: toda la guía de estilo: paleta de colores, tipografías, imágenes, sombras, iconos, etc.  
**Components**: aquí dejamos todos los componentes por separado, con sus variables.  
**Prototype**: Si es necesario, dejamos las pantallas conectadas para mostrar el flujo.  
**Playground**: Este es el file creativo, dónde los diseños surgen y cuando están listos se pasan a ready to dev. 

**---**

**Refes**: referencias, imagenes, links, moodboards y todo lo que nos sirve para encargar el diseño.  
**Trash**: diseños que ya no nos sirven (pero que no queremos borrar para siempre).

**---**

**Cover**: Acá va la carátula de este file.

A su vez, también aconsejamos nombrar las distintas capas, secciones y frames dentro de cada página. Esto es clave para poder trabajar en equipo de manera eficaz y productiva.

\
&nbsp;

![figma-tips-5.png](https://chispa-strapi-assets.s3.amazonaws.com/figma_tips_5_9303344bab.png)

## 7. Trabajo en equipo

En mi opinión, Figma fue disruptivo desde el momento cero. No se había visto antes una herramienta en la que Uxers, diseñadores, writers, devs, PO, etc., pudieran trabajar al mismo tiempo, en el mismo archivo y de manera colaborativa.  

¿Cómo optimizar el trabajo en equipo? 
- Deja comentarios dando feedback
- Deja etiquetas para que sepan el status del proyecto: ready for dev, in progress, falta contenido, etc.
- Haz llamadas de voz 
- Mantén siempre el orden, ver punto anterior :) 

our reading

Motion UI: Qué es y como lo usamos en Chispa

Sin sustantabilidad no hay UX

Software Development Automation

UX/UI Tips y tricks de Figma para mejorar tus procesos de diseño

Buenos Aires

Barcelona

Mexico City