Introducción a las Herramientas de Forma en Figma
Cuando着我们 начинаем nuestro viaje en el diseño de interfaces con Figma, las formas básicas se convierten en nuestros primeros aliados. A primera vista, podría parecer que crear un rectángulo o un círculo es demasiado simple para constituir una lección completa, pero la realidad es completamente distinta. Las herramientas de forma en Figma son extraordinariamente potentes y versátiles, permitiendo crear desde elementos UI fundamentales hasta ilustraciones complejas, todo зависит от nuestra comprensión profunda de sus capacidades.
Figma ha diseñado estas herramientas pensando específicamente en el flujo de trabajo de diseño de interfaces. Cada forma viene con propiedades inteligentes que facilitan el trabajo colaborativo y la consistencia visual. Desde ajustar bordes redondeados hasta crear sombras precisas, cada herramienta ofrece un nivel de control que tradicionalmente requería software de edición de imágenes más complejo.
En esta lección, exploraremos cada herramienta de forma en detalle, entenderemos sus propiedades únicas y aprenderemos los atajos de teclado que acelerarán significativamente nuestro flujo de trabajo. El objetivo es que al finalizar, puedas crear cualquier elemento de interfaz utilizando únicamente las herramientas de forma básicas, combinándolas y modificándolas según sea necesario.
La Herramienta Rectángulo (R)
El rectángulo es, sin lugar a dudas, la herramienta más utilizada en el diseño de interfaces. Desde botones y tarjetas hasta contenedores de contenido y barras de navegación, esta forma simple es la base de prácticamente todo lo que diseñamos. En Figma, crear un rectángulo es tan simple como presionar R en el teclado y hacer clic y arrastrar en el canvas.
Una vez creado, el rectángulo revela un conjunto impresionante de propiedades en el panel derecho:
- Width y Height: Dimensiones exactas del rectángulo
- Rotation: Rotación en grados para efectos creativos
- Corner Radius: El famoso radio de esquina que transforma rectángulos en rectángulos con esquinas redondeadas
- Fill: Rellenos sólidos, degradados o imágenes
- Stroke: Bordes de diferentes grosores y colores
- Effects: Sombras, desenfoques y efectos de superposición
La Herramienta Elipse (O)
Las elipses y círculos son fundamentales para crear elementos como indicadores de progreso, badges circulares, avatares, iconos redondos y elementos decorativos. La herramienta de elipse se activa con la tecla O y, al igual que el rectángulo, permite un control preciso sobre sus dimensiones.
Un aspecto fascinante de las elipses en Figma es su capacidad de crear arcos perfectos. Si seleccionas una elipse y buscas en el panel de propiedades la opción de "Arc", puedes transformar una elipse completa en un semicírculo o cualquier fracción de círculo. Esta característica es especialmente útil para diseñar:
- Gráficos circulares y diagramas
- Indicadores de progreso circulares
- Iconos de configuración estilo engranaje
- Elementos de interfaz con bordes curvos extremos
La Herramienta Línea (L)
Las líneas son aparentemente simples, pero cumplen un papel crucial en el diseño de interfaces. Se activan con la tecla L y permiten crear separadores, conexiones visuales, trayectorias de movimiento, y elementos decorativos lineales. A diferencia de los trazos de un rectángulo o elipse, una línea en Figma es un objeto independiente que puede manipularse como cualquier otra forma.
La Herramienta Polígono
El polígono es una herramienta que muchos diseñadores pasan por alto, pero que ofrece posibilidades creativas interesantes. Al hacer clic en el ícono de forma en la barra de herramientas y seleccionar polígono, puedes crear formas con cualquier número de lados, desde triángulos hasta hexágonos y más allá.
Las propiedades específicas del polígono incluyen:
- Point Count: Número de lados del polígono (mínimo 3 para un triángulo)
- Corner Radius: Radio de esquina para cada vértice
- Star count: Si lo conviertes en estrella, el número de puntas
La Herramienta Lápiz (P)
La herramienta Lápiz (activada con P) es la entrada al dibujo libre en Figma. A diferencia de las formas predefinidas, el lápiz te permite trazar cualquier ruta arbitraria, creando líneas y curvas personalizadas. Esta herramienta es particularmente útil para:
- Crear iconos drawn a mano alzada
- Marcar o anotar directamente en el diseño
- Dibujar formas orgánicas que no se pueden crear con herramientas geométricas
- Crear paths que luego se convertirán en componentes más complejos
Creando tu Primera Forma: Tutorial Práctico
Vamos a poner en práctica lo aprendido creando un botón de interfaz desde cero. Este ejercicio simple te ayudará a dominar las herramientas de forma en un contexto real de diseño UI.
- Selecciona la herramienta Rectángulo (R): Presiona R en tu teclado. Verás que el cursor cambia a una cruz con un pequeño rectángulo.
- Dibuja el cuerpo del botón: Haz clic y arrastra en el canvas para crear un rectángulo de aproximadamente 120x40 píxeles. Para dimensiones precisas, después de crear la forma, escribe los valores exactos en el panel de propiedades.
- Aplica bordes redondeados: En el panel derecho, busca la propiedad "Corner Radius" y establece un valor de 8. Esto le dará al botón una apariencia moderna y amigable.
- Agrega color de fondo: En la sección Fill, haz clic en el ícono + y selecciona un color sólido. Para un botón primario, un azul como #3B82F6 es una elección clásica.
- Añade un stroke: En la sección Stroke, agrega un borde de 2 píxeles en un tono más oscuro (#2563EB) para definir mejor el botón.
- Agrega una sombra: En Effects, añade un Drop Shadow con los siguientes valores: X: 0, Y: 2, Blur: 4, Spread: 0, Color: negro al 20% de opacidad.
- Crea el texto del botón: Selecciona la herramienta Texto (T) y haz clic dentro del rectángulo. Escribe "Aceptar", selecciona la fuente, tamaño (14px) y color (blanco), y centra el texto horizontal y verticalmente.
Atajos de Teclado Esenciales
Los atajos de teclado son fundamentales para la productividad en Figma. Aquí tienes los más importantes relacionados con las herramientas de forma:
| Atajo | Herramienta | Descripción |
|---|---|---|
| R | Rectángulo | Activa la herramienta rectángulo |
| O | Elipse | Activa la herramienta elipse/círculo |
| L | Línea | Activa la herramienta línea |
| P | Lápiz | Activa la herramienta lápiz |
| Shift + R | Rectángulo | Crea un rectángulo con esquinas perfectamente cuadradas |
| Shift + O | Elipse | Fuerza la creación de un círculo perfecto |
| Alt + arrastrar | Cualquiera | Duplica la forma mientras arrastras |
| Shift + arrastrar | Cualquiera | Restringe el movimiento a ángulos de 45° |
| Ctrl + D | General | Duplica la selección actual |
| Ctrl + Alt + K | General | Crea componente desde selección |
Trabajando con Múltiples Formas
En el diseño de interfaces real, rara vez trabajarás con formas individuales. La magia ocurre cuando combinamos múltiples formas para crear elementos más complejos. Figma ofrece varias opciones para trabajar con múltiples formas:
Selección Múltiple
Para seleccionar múltiples formas, puedes:
- Mantener Shift y hacer clic en cada forma que quieras seleccionar
- Usar la herramienta de selección (V) para arrastrar un cuadro de selección alrededor de varias formas
- Presionar Ctrl + A para seleccionar todos los objetos en el frame actual
Alineación y Distribución
Cuando tienes múltiples formas seleccionadas, aparecen opciones de alineación en la barra de herramientas superior:
- Alinear a la izquierda/derecha/centro: Alinea las formas horizontalmente
- Alinear arriba/abajo/centro: Alinea las formas verticalmente
- Distribución horizontal: Espacia las formas uniformemente en el eje X
- Distribución vertical: Espacia las formas uniformemente en el eje Y
Boolean Operations: Combinando Formas
Las Boolean Operations (Operaciones Booleanas) son una de las características más poderosas de Figma para crear formas complejas. Se encuentran en la barra de herramientas superior y ofrecen cuatro operaciones fundamentales:
- Union (Unión): Combina todas las formas seleccionadas en una sola forma, fusionando sus áreas.
- Subtract (Sustracción): La primera forma seleccionada resta las formas siguientes de su área.
- Intersect (Intersección): Mantiene únicamente el área donde todas las formas se superponen.
- Flatten (Aplanar): Convierte un grupo de formas con operaciones booleanas en una única forma vectorial simple.
Propiedades Avanzadas de Formas
Más allá de las propiedades básicas, las formas en Figma ofrecen características avanzadas que merecen nuestra atención:
Expandir: Propiedades de esquina individualUna de las características más subutilizadas es la posibilidad de establecer radios de esquina diferentes para cada esquina del rectángulo. En el inspector de Corner Radius, haz clic en el ícono de enlace para desvincular los valores:
- Puedes establecer valores diferentes para cada esquina: arriba-izquierda, arriba-derecha, abajo-derecha, abajo-izquierda.
- Esta característica es útil para crear formas con diseños específicos como:
- Botones con esquinas superiores redondeadas pero inferiores cuadradas
- Tarjetas con una esquina cortada (común en diseño de material design)
- Formas orgánicas que requieren variabilidad en los bordes
Figma permite agregar múltiples rellenos a una misma forma. Esto significa que puedes crear efectos complejos sin necesidad de crear formas adicionales:
- Degradados: Desde simples degradados de dos colores hasta degradados complejos con múltiples paradas de color.
- Capas de color: Superponer múltiples rellenos semitransparentes para crear efectos de profundidad.
- Imágenes como relleno: Usar una imagen para llenar completamente una forma, útil para avatares y fondos.
Creando un Card de Producto Completo
Vamos a aplicar todo lo aprendido creando un card de producto real, paso a paso:
- Crea el contenedor: Dibuja un rectángulo de 300x400 píxeles con corner radius de 16px.
- Añade la imagen: Dibuja otro rectángulo de 300x200 píxeles dentro del card, en la parte superior. Este será el contenedor de la imagen del producto. Establece el corner radius superior a 16 y el inferior a 0.
- Crea la información: Añade rectángulos redondeados que servirán como placeholders para el título, precio y descripción.
- Agrega el botón: Crea un rectángulo redondeado de 120x40px para el botón de "Comprar" con un fill de color primario.
- Añade sombras: Aplica un shadow sutil al card completo para darle profundidad sobre el fondo.
Errores Comunes y Cómo Evitarlos
Resumen de Herramientas de Dibujo
| Herramienta | Atajo | Uso Principal | Propiedad Única |
|---|---|---|---|
| Rectángulo | R | Botones, cards, contenedores | Corner Radius |
| Elipse | O | Avatares, badges, indicadores | Arc/Sector |
| Línea | L | Separadores, conectores | Punto de inicio/fin |
| Polígono | - | Iconos, formas decorativas | Point Count |
| Estrella | - | Iconos, ratings, elementos decorativos | Puntas y radio |
| Lápiz | P | Dibujo libre, paths personalizados | Edición de puntos Bezier |
Próximos Pasos en tu Aprendizaje
Has completado el aprendizaje de las herramientas de forma básicas en Figma. Ahora tienes las bases necesarias para:
- Crear cualquier elemento de interfaz utilizando formas primitivas
- Aplicar propiedades avanzadas como corner radius individual y múltiples rellenos
- Combinar formas usando operaciones booleanas
- Organizar tu trabajo de manera profesional y colaborativa
- Utilizar atajos de teclado para maximizar tu productividad
En las próximas lecciones exploraremos cómo convertir estas formas en componentes reutilizables, dominar el sistema de Auto Layout, y crear variantes que faciliten el diseño de sistemas de diseño completos.
1. ¿Qué atajo de teclado activa la herramienta Rectángulo en Figma?
- A) Ctrl + R
- B) Shift + R
- C) R
- D) Alt + R
2. ¿Cuál de las siguientes NO es una operación booleana disponible en Figma?
- A) Union (Unión)
- B) Subtract (Sustracción)
- C) Multiply (Multiplicación)
- D) Intersect (Intersección)