Para alumnos de 8° (Uso de figma) 09-03-2024

 Uso de figma

1.- Una vez ingresamos con nuestra cuenta en figma, para crear un nuevo proyecto, hacemos clic en design file.

 

2.- Vamos a seleccionar el tamaño que tendrá nuestro proyecto con frame, elegiremos el de desktop en el lado derecho.

3.- Damos click en donde dice untitled para renombrar nuestro proyecto.

 

4.- Seleccionamos el lienzo que creamos, y del lado derecho vamos a hacer click en el más donde está el layout grid.

 

5.- Donde dice grid 10px damos click para que se despliegue otra ventana.

 

6.- En esta nueva ventana vamos a definir el número de columnas con las cuales vamos a trabajar para organizar los elementos de nuestro diseño, en donde dice grid lo cambiamos a columns, donde dice count lo cambiamos a 12 y donde dice margin le ponemos 80.

 

7.- Usando nuestras columnas podemos empezar a diseñar nuestra página, va a ser algo similar a diseño editorial, para acomodar los elementos dentro de las columnas.

 

8.- Voy a crear mi texto usando la herramienta de T o presionando en el teclado t para activar la herramienta, del lado derecho se encuentran las opciones para poder cambiar el tamaño, color y tipo de letra.

 

9.- Insertaré una imagen para acompañar mi texto, busco en una carpeta una imagen y la arrastro hasta el lienzo, con la opción de W del lado derecho puedo cambiar el tamaño de la imagen si queda demasiado grande a la hora de pasarla.

 

10.- Van a descargar unos plugins para agilizar un poco su trabajo, se irán al icono de figma>plugins>manage plugins.

 

11.- Escriben en el buscador iconify y lo seleccionan.

 

12.- Hacen click en el icono de etiqueta para guardar y luego hacen click en el botón azul de run para que se ejecute.

 

13.- Les saldrá una nueva ventana del plugin que acaban de guardar, en él pueden buscar los iconos que necesiten para su trabajo sin que tengan que crear uno ustedes, por ejemplo en el buscador pongo instragram y a la presionar enter me despliega todos los iconos del mismo tema.

 

14.- Elijo uno dando click encima y presionando import icon.

 

15.- Si quiero puedo cerrar la ventana y trabajar con el icono que elegí, le cambio el tamaño y el color, recuerden que si van a usar iconos deben ser similares para que tengan coherencia en el diseño.

 

16.- Otros plugins que pueden descargar son los que se muestran en la siguiente imagen, tal vez no los necesiten todos pero está bien que los tengan.

 

17.- Para crear otra página podemos primero alejarnos con ctrl menos, con la herramienta de frame volvemos a elegir desktop, así nos crea otra página completamente en blanco.

 

18.- Otra forma en la que lo podemos hacer es copiar la hoja anterior igual como copiamos en photoshop o ilustrator, seleccionamos la hoja y presionamos alt + click y arrastramos para crear la copia.

 

19.- Podemos eliminar lo que ya no necesitamos para crear la siguiente parte del diseño.

 

20.- Con la herramienta rectangle podemos crear diferentes formas, del lado derecho podemos cambiar el color, opacidad y trazo.

 

21.- Si agregamos una imagen y sobre ella ponemos una figura con algún color podemos hacer uso de los modos de fusión.

 

22.- Para ver la previsualización de su trabajo se van a la parte superior derecha, donde hay un icono de play, le dan click y les va a abrir en otra pestaña su trabajo para que lo puedan ver.