En la tercera clase del curso de iniciación a Figma, vamos a aprender a utilizar las herramientas de creación de formas.
Antes de ponernos a crear formas como locos, vamos a aprender la diferencia entre un grupo y un frame. Los grupos nos van a permitir tratar varias capas como si fueran una sola. Los frames son marcos y tienen características especiales en Figma.
Aunque no es necesario crear un frame para poder diseñar en Figma, nos será muy útil cuando queramos que nuestro diseño tenga un formato específico, para móviles, tablets, escritorio o relojes inteligentes. Incluso disponemos de formatos para papel y para redes sociales. Vamos a ver cómo funcionan. ¡Vamos a ello!
Ya lo véis, los frames y los grupos nos van a ser muy útiles en nuestro trabajo con Figma. Ahora vamos a aprender que hay seis herramientas para crear formas en Figma:
- Rectángulo
- Línea
- Flecha
- Elipse
- Polígono
- Estrella
Cada herramienta tiene sus peculiaridades: con el rectángulo podemos crear cuadrados y rectángulos, con la línea podemos dividir contenidos o crear trazos diferentes en las formas; con la flecha crearemos flechas de una o dos direcciones; con la elipse crearemos círculos y óvalos, con el polígono crearemos formas cerradas de varios lados y con la estrella, crearemos formas de estrella de varias puntas.
Además cada herramienta tiene sus atajos de teclado:
- Crear formas proporcionales pulsando la tecla Shift en el teclado.
- Crear formas desde el centro pulsando Alt.
- Hacer las dos cosas, pulsando Shift + Alt.
Y una vez creadas las formas, podemos variar sus características y podemos:
- Redondear las esquinas, Corner Radius (podemos redondear todas a la vez o solo algunas de las esquinas de la capa).
- Entrar al modo edición y crear nuevos nodos.
- Acceder a las opciones de trazo avanzado (Advanced Stroke) y cambiar la terminación del trazo (Cap), la unión (Join) o crear líneas con guiones (Dashes).
- En la elipse y en la estrella, cambiar la Ratio, que es la distancia porcentual que hay desde el centro hasta los límites de la capa.
Vamos a verlo, porque un vídeo vale más que mil palabras:
Además de crear las formas con estas herramientas, podemos usar la pluma (Pen) y el lápiz (Pencil) para diseñar nuestros dibujos vectoriales personalizados. Esto se conoce en Figma como redes de vectores o Vector Networks.
En esta ocasión, vamos a ver lo fácil que es dibujar un prisma con la herramienta pluma (Pen) y una flecha a mano alzada con la herramienta lápiz (Pencil). ¡Vamos a ello!
Habéis visto qué sencillo es dibujar y cómo Figma nos ayuda a que el resultado sea óptimo, ¡es casi magia!
Os invito a que realicéis los siguientes ejercicios:
- Crea un triángulo y un círculo y agrúpalos con el atajo de teclado CTRL+G en Windows o CMD+G en Mac. Después, crea una estrella y haz que forme parte de ese mismo grupo, arrastrando la capa desde el panel de capas (Layers). Asegúrate de que no has creado un nuevo grupo que contiene el grupo del triángulo y la estrella, sino que se trata de un único grupo que contiene las tres capas.
- Crea un Frame con las dimensiones del último modelo de iPhone.
- Crea un cuadrado con la herramienta rectángulo (Rectangle) y añádele un borde superior de 1px, de color rojo. Para crear el borde, utiliza la herramienta línea (Line).
- Crea una forma con la herramienta estrella (Star), que tenga 9 puntas (Count), con las esquinas redondeadas con un Corner Radius de 16 píxeles y una Ratio del 40%. Entra al modo edición, selecciona una única punta y cambia su Corner Radius, solo de esa punta, a 4 píxeles.
- Dibuja un cubo con la herramienta pluma (Pen) y redondea todas sus esquinas. Para ello, además de modificar el Corner Radius, tendrás que utilizar las opciones de Advanced Stroke y seleccionar Round en la unión (Join).
¿Habéis visto todo lo que habéis conseguido? ¡Y esto es solo un curso de iniciación! ¡Bravo! Figma es genial.
Os recuerdo que estoy disponible para contestar a vuestras preguntas en el formulario de soporte de la Intranet. ¡Nos vemos en el siguiente tema!
Todos los capítulos de este curso:
- Curso Figma #1. Introducción
- Curso Figma #2. Entorno de trabajo
- Curso Figma #3. Formas y herramientas
- Curso Figma #4. Textos e imágenes
- Curso Figma #5. Capas
- Curso Figma #6. Auto Layout, Constraints y Layout Grids
- Curso Figma #7. Componentes y estilos
- Curso Figma #8. Prototipado y exportar
- Curso Figma #9. Team Library
- Curso Figma #10. La comunidad de Figma