EJERCICIO: Figma Kata

Learning Goals

Este ejercicio te ayudará a sentirte más cómodo con las herramientas de Figma. Además, aprenderás nuevas funcionalidades.

¿Por qué Figma?

Figma es una aplicación de dibujo vectorial para diseñar pantallas que ha ganado mucha popularidad en el diseño de UI.

Su popularidad se debe a varias prestaciones que ofrece:

• Se puede diseñar wireframes y sus interacciones en la misma herramienta
• Permite la colaboración en tiempo real con control de versiones
• Todos los archivos habitan en la nube, con lo cual, los archivos están disponibles donde quiera que tengas conexión a Internet
• Además de sus versiones de escritorio para iOS y para Windows, funciona en navegadores, así que es agnóstico del SO
• Facilita la transferencia de archivos desde el equipo de diseño al equipo de desarrollo, gracias al inspector de código que da pistas de cómo tiene que hacerse el CSS

Interfaz de Figma

Antes de comenzar con el ejercicio, refresca tus conocimientos sobre la interfaz de Figma viendo este tutorial.

Usando Frames

Los Frames te ayudan a crear componentes. SIrven para definir vistas y componentes internos

Recuerda que al tipear la letra F tendrás en el panel de la derecha los diferentes tamaños predeterminados de diferentes soportes.

Trabajando con Layers y Grupos

Piensa en la Home de tu aplicación favorita. ¿Cuántos elementos tiene la pantalla?

Las interfaces son conjuntos de botones, iconos, imágenes y otros elementos agrupados en artefactos interactivos. En Figma, vas a diseñar múltiples pantallas con muchas agrupaciones de elementos.

Es muy importante, por esto, que seas sumamente ordenado al nombrar y agrupar tus elementos y capas, así facilitarás la navegación y manipulación de tus diseños.

¿Grupos o Frames?
Ambos son contenedores de objetos, pero cada uno tiene sus propiedades y casos de uso.
Los grupos te permiten combinar varios elementos y su tamaño está definido por el tamaño de los elementos que contiene. Cambiar el tamaño o posición de sus hijos cambiará el tamaño del grupo.

Para agrupar elementos seleccionados, usa: ⌘ + G (Mac) or Ctrl + G (Win).
Para desagrupar elementos en un grupo, usa: ⌘ + Shift + G (Mac) or Ctrl + Shift G (Win).

Los frames pueden cambiar su tamaño independientemente de los hijos que tengan, a partir de ellos se pueden crear componentes que se pueden replicar y redimensionarlos afecta a sus hijos. Para controlar cómo afecta el redimensionamiento, tendremos que ajustar limitaciones (Constrains) a los hijos para que escalen o se mantengan fijos. Por defecto, se mantienen fijos arriba y a la izquierda

Crea un frame seleccionando elementos y tecleando: ⌘ + Opt + G (Mac) or Ctrl + Alt + G (Win).
Para quitar un frame: ⌘ + Shift + G (Mac) or Ctrl + Shift G (Win)

Aprenderemos mucho más de frames y grupos en la medida en la que avanzamos el curso

Figma Intro Exercises

Instrucciones

El objetivo de este ejercicio es que te sientas cómodo con la interfaz de Figma y sus herramientas. Siéntete libre de seguir los ejercicios a tu ritmo y experimentar con las herramientas de Figma para obtener diferentes efectos.

Interactuando con Objetos

YOUR TURN

• En el canvas infinito, teclea la letra R en tu teclado.

  • Recuerda que también puedes utilizar el menú de herramientas arriba a la izquierda. En el menú podrás ver los shortcuts para otras figuras.
    

• Tras seleccionar la R, haz click y arrastra el ratón sin soltar para crear un rectángulo.

• Para crear un cuadrado presiona la letra shift mientras arrastras para limitar que todos los lados midan lo mismo.

• Al seleccionar el elemento, verás los selectores para escalar el elemento, puedes entonces cambiar su posición, transformarlo, rotarlo o escalarlo.

• Cambia las propiedades del elemento con estos ejercicios:

  • Mantén presionada la tecla shift para limitar el movimiento del ratón al cambiar las propiedades
  • Presiona alt y arrastra para duplicar el elemento
  • Arrastra los círculos internos del rectángulo para cambiar el radio de los bordes del elemento
    
  • Puedes rotar el elemento con el cursor o en la lista de propiedades, cambiando el ángulo en las propiedades de menú
    

Editando Shapes

Para editar una forma que ya has insertado, puedes usar el botón Edit Object en la barra de herramientas para entrar en modo edición vectorial. También puedes hacer doble click sobre el elemento o presionar Enter con el elemento seleccionado.

Por ahora, juega con los puntos para crear más puntos de inflexión y arrástralos, pero no profundizaremos más en la edición vectorial. De momento, puedes hacer dos cosas:

• Crea un cuadrado y coviertelo en un triángulo
• Crea otro cuadrado y conviertelo en una figura redondeada. Tip: Utiliza la herramienta bend en la barra de herramientas o presionando la tecla ⌘ en (Mac) o Ctrl (Win)

Conseguirás algo parecido a este tipo de efectos:

A jugar con colores!

• Cambia el relleno Fill en un gradiente seleccionando la opción en el editor del relleno a la derecha, el gradiente puede ser Linear, Radial, Angular o Diamond. La opción Solid utiliza un color sólido para todo el elemento.

Masking

Las Masks (máscaras) permiten que muestres porciones específicas de otras capas. Es como utilizar una plantilla, pintar sobre ella y luego quitarla. En este caso la plantilla es la mask.

Tu turno

• Crea un círculo sobre el canvas presionando la letra O y shift.

• Conviértelo en una Mask seleccionándolo y haciendo click sobre el elemento en la barra de herramientas del objeto o usando los shortcuts

• Ya tienes tu mask. Es normal que la imagen 'desaparezca' y sólo veas el outline cuando la seleccionas, porque ahora se ha covertido en una plantilla a través de la cual se asomarán todas las capas que estén por encima de ella, dentro del Mask Group que se ha creado en la lista de capas. Inserta una imagen por encima de la mask, dento del grupo, y muevela para que veas el efecto!

De momento no puedes aplicar ningún estilo al mask. Puedes intentar cambiar la forma del mask para que veas lo que ocurre

Operaciones Booleanas

La Luna

Las operaciones booleanas son operaciones que podemos hacer con formas para crear nuevas formas. Crea la luna superponiendo dos círculos y utilizando Substract Selection

Puedes cambiar las propiedades para darle estilos a la luna:

Constryte un cohete

Te proponemos el reto de crear un icono de cohete!

• PARTE A: El cuerpo del cohete
  • Intersecta dos círculos
  • Aplana la forma usando la herramienta Flatten
  • Usa la herramienta Bend para suavizar la cola del cohete y un rectángulo para sustraer la parte final.

• PART B: Las aletas

  • Crea las aletas insertando un triángulo y suavizando los ángulos para que quede redondeado (con la herramienta Bend)

  • Copia la imagen y dale la vuelta horizontalmente tecleando shift + H
    

  • Colocalas a los lados del cuerpo del cohete

• PART C: El fuego
  • Intersecta círculos para crear las llamas
  • Haz dos copias y alinealas al final de la cola

• Dale colores y estilos. Cuando quedes satisfecho, exporta tu trabajo coo un archivo .png

Exportando tu trabajo

Puedes compartir tus diseños enviando el enlace, pero si quieres exportar una imagen, puedes ir al final del panel de diseño para ver las opciones de exportación. En la foto puedes ver cómo exportamos el objeto Rectangle 3.