El último método que compartiré aquí implica la codificación en CSS. Si no estás familiarizado con él en absoluto y/o no deseas aprenderlo, está bien, solo debes saber que es una buena manera de ampliar tus habilidades.
Dicho esto, creo que todos los diseñadores digitales deberían aprender a codificar en su plataforma preferida, creo que CSS para diseñadores de productos o diseñadores de UX es lo mínimo, porque al final afecta su diseño en el nivel de píxeles y la subestimación. cómo funciona puede brindarle los conocimientos técnicos necesarios para crear diseños más adecuados.
Figma es una gran herramienta para diseñar, pero las herramientas de animación que analizamos hasta ahora (métodos 1 a 4) faltan un poco; por ejemplo, no puedo ver mi animación con cierta aceleración personalizada y no solo con facilidad o facilidad. -afuera.
Una forma bastante sencilla de hacerlo es simplemente exportar su marco como archivo SVG. Los SVG son geniales, mantienen todos los vectores y todos los objetos separados, y también pueden convertirse en un SVG animado con solo unas pocas líneas de código.
Para realizar cambios en el archivo SVG que exportó desde Figma, ábralo con algún editor de código como Visual Studio Code, Brackets, Atom, Sublime Text o cualquier otro que resalte su código.
SVG exportado de Figma, izquierda: como se ve en mi editor de código, derecha: abierto en Chrome
En primer lugar, después de abrir el archivo SVG dos veces (una en su navegador y otra en su editor de código), necesitamos averiguar qué es lo que queremos mover. La forma más sencilla de lograrlo es en el navegador, simplemente coloque el cursor sobre el archivo SVG. objeto que desea animar (la pupila en mi caso), haga clic derecho sobre él y seleccione Inspeccionar.
Ahora debería resaltar automáticamente la línea en su código donde se encuentra este elemento, esta línea puede buscarla en su editor de código, una vez que la encuentre debe agregar un identificación a tu elemento, entonces en mi caso es esta línea:
y se convirtió en esto:
Después de eso, deberás ir a la parte superior de tu código y justo después de la apertura. svg los extremos de la etiqueta necesitan agregar un estilo etiqueta para que su código se vea muy similar a este (al menos en estructura):
Si conoce CSS, entonces probablemente ya esté escribiendo dentro de esas etiquetas de estilo, pero solo para verificar si todo funciona, agregue su objeto dentro de esas etiquetas con un relleno o trazo de prueba, así:
#micírculo{
relleno: rojo;
}
Esto debería darle una idea si algo salió mal. Si guarda su código y actualiza su navegador, su elemento de elección ahora debería estar pintado de rojo, si su objeto no tiene relleno, puede intentar lo mismo con trazo: rojo; en lugar de un relleno, si no se cambia nada, asegúrese de que la identificación que proporcionó a su elemento y el código anterior coincidan. En CSS necesitas insertar # firmar antes de cualquier identificación, por lo que en mi ejemplo anterior la identificación es miCírculo. Por último, asegúrese de tener los corchetes de apertura y cierre, normalmente olvido los } al final.
Nuestro archivo SVG antes y después de agregar nuestro código
Ya basta de este trabajo estructural, es hora de animar nuestro elemento, así que de vuelta en nuestra parte CSS (la etiqueta de estilo) necesitamos agregar algunas propiedades de animación y algunos fotogramas clave.
En el siguiente ejemplo, todas las propiedades dentro #micírculo son propiedades de animación (puedes eliminar las relleno: rojo; de antes) y todas las propiedades dentro @keyframes miAnim son fotogramas clave:
#micírculo{
nombre-animación: miAnim;
duración de la animación: 1500 ms;
función de sincronización de animación: cúbica-bezier (.21, -0.44, .79,1.45);
animación-iteración-recuento: infinito;
}
@fotogramas clave miAnim{
0%{transformar: traducir(0,0);}
20%{transformar: traducir(0,0);}
30%{transformar: traducir(-10px,-5px);}
50%{transformar: traducir(-10px,-5px);}
60%{transformar: traducir(8px,2px);}
90%{transformar: traducir(8px,2px);}
100% {transformar: traducir (0,0);}
}
Así es como funcionan las animaciones CSS, agregas propiedades al objeto como la duración de la animación, 1500 ms (un segundo y medio) en este caso, agregas el nombre de la animación, que es algo que inventamos, similar a su identificación de elemento pero es la identificación de los fotogramas clave de la animación.
Luego agrega sus fotogramas clave que coloca en una línea de tiempo predefinida de 1500 ms de duración, porque esa es la duración de la animación que agregamos a nuestro elemento, los fotogramas clave que agregamos ahora se referirán a esta línea de tiempo, por lo que el 50% significa el fotograma clave. Estará a 750ms del punto de partida.
Algunas propiedades más importantes son el recuento de iteraciones de animación, que le brinda una forma de realizar un bucle en su animación, infinito significa que se repetirá para siempre y un número como 3 significa que se repetirá 3 veces y luego la animación se detendrá.
Otra es la función de sincronización de animación que le brinda la posibilidad de personalizar su sincronización (aceleración), puede especificar entrada, salida, entrada, lineal y más, pero la verdadera diversión es la Bézier cúbico Opción, no necesita cambiar los números manualmente, puede usar la herramienta cubic-bezier para hacer el trabajo pesado y simplemente copiarlo y pegarlo en su propio código.
Nuestro SVG animado resultante, su kilometraje puede variar
Este método de animar SVG está bien para cosas como íconos, logotipos o emojis, pero para la mayoría de las cosas, el desarrollador construirá la pantalla completa con HTML+CSS, no con SVG, pero aun así esto te brinda una forma mucho más rica de agregar animación rápidamente. No se limite a la facilidad de entrada y salida y el desarrollador que pueda recrear esto en HTML todavía tiene una excelente guía para las animaciones porque tanto HTML como SVG pueden usar el mismo código CSS para eso.
Si deseas hacer tus prototipos en código HTML “real”, puedes comenzar copiando y pegando lo que Figma te brinda en el Código pestaña (al lado de la Prototipo pestaña), esto le mostrará todos los estilos de su objeto seleccionado actualmente y podrá aprender mucho de eso.
Ejemplo de código HTML+CSS del diseño de Figma que vimos en el método anterior
También puedes ver la animación que hice para este proyecto usando HTML+CSS para animar el botón y los parpadeos de este personaje. Puedes editar el código tanto como quieras, está disponible abiertamente en este enlace.