Autor: Cristina García
Figma es un software de creación de gráficos vectoriales para diseñar productos interactivos aptos para cualquier pantalla: páginas web, aplicaciones para móvil, tabletas, relojes, presentaciones o publicaciones en redes sociales.
La Escuela de Arte Superior de Diseño de Soria apuesta por el uso de todo tipo de software: tanto de propietario, como Adobe, como otros de open source; Figma ofrece la posibilidad de uso de sus productos con cuentas gratuitas para la comunidad educativa.
Empezamos a conocer Figma en esta Escuela hace cuatro años, cuando aún estaba en su infancia. Ahora ha crecido y destaca en el mercado profesional desbancando a otros programas como el Sketch o el Adobe XD.
La #EASDSoria lo enseña en dos asignaturas:
• UX / UI Diseño de Experiencia de Usuario e Interfaces, del Ciclo de Grado Superior de Diseño Gráfico. #GradoDiseñoGráfico
• Edición Web, que forma parte del Ciclo de Grado Medio de Diseño Web. #CicloGráficaInteractiva
Una de nuestras guías principales cuando navegamos son los iconos. Siempre deben ser claros, sencillos y fáciles de interpretar por el usuario, en esto se parecen a las señales de tráfico, pues tienen algo de código convencional; por otro lado, hay en su diseño una parte creativa que depende de las decisiones del diseñador y de la estética de la página o aplicación en la que se incluyen.
Este tutorial es una introducción, un simple aperitivo que muestra cómo crear iconos con las herramientas de dibujo de Figma.
Puedes hacerlo de varias formas, pero esta es mi receta.
La primera imagen muestra iconos que hemos trabajado en clase y son reconocibles, además, por cualquier usuario. Haremos el corazón, que es el que más gusta.
Ingredientes:
• Un ordenador personal o tableta.
• Conexión a internet
• Una cuenta en Figma. Puedes trabajar en la red o descargarte el programa en el ordenador.
• Una pizca de paciencia.
• Una cuchara sopera de creatividad.
Elaboración:
Esta es una receta para trabajar online. Fíjate siempre en donde está mi cursor y sigue los pasos:
1. Entra en Figma con tu cuenta de la Escuela. Fig. 1.
2. Clic en el botón New design file, si trabajas online. Fig. 2. Clic en el icono de Figma / File / New design file, si trabajas en la versión de escritorio. Fig. 3.
3. Presiona la tecla A para acceder a las mesas de trabajo estándar (panel de la derecha) y escoge una tablet ipod mini 8.3. Cuando salga el frame (mesa de trabajo) que has escogido, haz clic en el rectángulo de orientación horizontal, en la ventana Frame del panel de la derecha. En la barra de herramientas superior, en el centro, haz clic donde pone untitled, y escribe el nombre de tu proyecto. Fig. 4.
Si trabajas sobre una plantilla, bloquea la capa haciendo clic sobre el candado en el panel de layers (capas), a la izquierda.
Ahora que ya tienes la mesa despejada y las herramientas a la vista vamos a mezclar los ingredientes.
4. Presiona la tecla O para sacar la herramienta Ellipse.
5. Presiona la tecla Shift + clic sostenido del botón derecho del ratón. Arrastra el ratón hasta obtener una circunferencia de 22 x 22 px.
6. Presiona la tecla R para sacar la herramienta Rectangle.
7. Presiona la tecla Shift + clic sostenido del botón derecho del ratón. Arrastra el ratón hasta obtener un cuadrado de 22 x 22px.
Con la herramienta Move (flecha) lleva el cuadrado junto al círculo como muestra la Fig. 5.
Observa que en el panel de layers aparecen las figuras que estás dibujando en el frame ipod mini 8.3. Te aconsejo que le cambies el nombre de ese frame por uno que te recuerde rápidamente a lo que estés creando. Serás más eficaz y rápido en tu trabajo, y tu equipo de diseño te lo agradecerá.
8. Selecciona las dos figuras presionando la tecla Shift + clic sobre una y otra figura. Aparecerá una línea azul bordeando ambas figuras.
9. Haz clic en el 3 icono de Boolean Groups, en la barra de herramientas, arriba, en el centro y escoge la opción unión selección del desplegable. Fig. 6.
10. Haz clic en la ventana Stroke (trazo) en el panel derecho. Escoge un color haciendo doble clic sobre el cuadrado de muestras, o deja el color negro que sale por defecto.
11. Aumenta el grosor del trazo a 3. Deja el relleno gris de la figura. Fig. 7.
12. Presiona la tecla Ctrl + D en Windows, o Comand + D en Mac para duplicar la figura resultante de la unión. ¡Atención: la réplica se queda sobre la original!
13. Con la flecha desplaza la réplica hacia abajo. Fig. 8.
14. Selecciona la réplica, coloca el cursor del ratón en una esquina de la selección hasta que aparezca un arco con dos flechitas, y voltéala 90º a la derecha (escribe -90º en la ventana Design).
15. Mueve la figura hasta que los trazos coincidan como muestra la Fig. 8.
16. Selecciona las dos figuras y haz clic otra vez en la herramienta unión selección del desplegable. Fig. 9.
17. Desactiva el relleno en la ventana Fill (relleno) haciendo clic en el -, del panel de la derecha.
18. Selecciona el corazón. Voltéalo 90º otra vez. Mantén presiona Shift + clic del botón derecho para que los giros sean de cuarto en cuarto.
¡Ya está!, ¡ya lo tienes! Fácil ¿verdad? Ahora puedes probar a hacer el resto de los iconos de la primera imagen, ahí tienes todas las plantillas.
Haciendo clic aquí podrás ver la publicación online.
También puedes consultar la receta siguiendo el PDF interactivo, siempre que quieras.
Haz clic aquí para descargar el PDF
Si quieres saber más sobre Figma dale al “Me gusta”, suscríbete al canal de Youtube de la Escuela de Arte de Soria, o mándame un mail, y seguiré compartiendo más recetas. ¡Hasta pronto!
