Tutorial figma no 2

 TUTORIAL FIGMA NO. 2

Crear componentes y ligar páginas

1. Para crear un botón animado o cualquier otro elemento que requiera una pequeña animación, crearemos una página nueva.

2. La nueva página la renombramos como componentes (hacemos doble click para renombrarla).

 

3. Con la herramienta de rectángulo creo el botón, redondeo las esquinas, cambio el color y agrego texto.

 

4. Selecciono el rectángulo y el texto y los agrupo con ctrl+g.

 

5. Seleccionamos el grupo y hacemos click en create component.

 

6. Volvemos a hacer click en el mismo botón que ahora dice add variant.

 

7. Nos creará una copia del botón justo abajo, la copia tiene abajo un signo de más por si necesitamos agregar más copias.

 

8. En la copia vamos a cambiar un poco los colores para poder crear la animación al dar click sobre el botón.

 

9. Vamos a crear la animación dando click en prototype.

 

10. Cuando pasamos el cursor sobre los botones aparece un nuevo nodo con un signo de + en el cual hago click y arrastro hasta el otro botón, nos aparecerá una pequeña ventana para poder animar el botón, nos aseguramos que diga on click, seleccionamos smart animate y lo de más lo dejamos como esta.

 

11. Regresamos a la page 1 para probar el botón.

 

 

12. En la parte de assets quedó guardado el botón que hicimos, lo seleccionamos y arrastramos hacia donde queremos que esté.

 

13. Vamos a probar el botón llendo a present para que nos haga la vista preliminar de nuestra página y cuando cargue hacemos click en el botón que creamos para ver como se ve.

 

14. Este botón ya podríamos enlazarlo a la página que se supone que nos va a dirigir, lo que hay que hacer el ir a prototype y enlazar el botón a la siguiente página.

 

15. Ahora vamos otra vez a present para ver si quedó bien ligado.

 

16. Como se pierde un poco la animación del botón vamos a volver a componentes y modificar la animación para que en vez de on click sea while pressing.