¿Cómo usar las herramientas básicas de Figma para dibujar formas y texto?

Las herramientas básicas de Figma son los instrumentos de selección, formas vectoriales y texto que usas para construir cualquier pantalla de diseño.

Dominar estas herramientas es el primer paso real para diseñar apps, sitios web o cualquier interfaz digital. En esta lección las conocerás una por una y las aplicarás en ejemplos concretos.

La barra de herramientas de Figma

La barra de herramientas está en la parte superior de tu pantalla. Contiene todos los instrumentos que necesitas para dibujar, escribir y seleccionar elementos.

Cada herramienta tiene un atajo de teclado. Usar atajos te hace más rápido desde el primer día.

Memoriza al menos los cinco primeros. Los usarás en cada proyecto.

Herramienta de selección

La herramienta de selección (V) te permite hacer clic sobre cualquier elemento del canvas para seleccionarlo, moverlo o redimensionarlo.

Cuando seleccionas un elemento, aparecen ocho puntos de control alrededor de él. Arrastra cualquier punto para cambiar el tamaño. Mantén presionada la tecla Shift mientras arrastras para mantener las proporciones originales.

Ejemplo práctico: Dibuja un rectángulo en el canvas. Presiona V y haz clic sobre él. Ahora arrástralo a otra posición. Así de simple es mover elementos en Figma.

Herramienta de rectángulo

El rectángulo (R) es la forma más usada en diseño de interfaces. Botones, tarjetas de producto, imágenes de fondo y barras de navegación son, en su base, rectángulos.

Cómo dibujar un rectángulo:

1. Presiona R.
2. Haz clic en el canvas y arrastra sin soltar el mouse.
3. Suelta el mouse cuando tengas el tamaño deseado.

En el panel derecho verás las propiedades del rectángulo: ancho (W), alto (H), posición en X e Y, y el radio de esquinas. El radio de esquinas convierte ángulos rectos en bordes redondeados.

Ejemplo — Tarjeta de producto para Mercado Libre:

• Dibuja un rectángulo de W: 320 y H: 200.
• En el panel derecho, cambia el radio de esquinas a 12.
• Cambia el color de relleno a blanco (#FFFFFF).
• Agrega una sombra desde la sección "Effects" → "Drop Shadow".

Ya tienes la base de una tarjeta de producto.

Herramienta de elipse

La elipse (O) dibuja círculos y óvalos. Se usa para fotos de perfil, iconos circulares y elementos decorativos.

Cómo dibujar un círculo perfecto:

1. Presiona O.
2. Haz clic y arrastra en el canvas.
3. Mantén presionada la tecla Shift mientras arrastras.

Mantener Shift fuerza proporciones iguales en ancho y alto, resultando en un círculo perfecto.

Ejemplo — Foto de perfil para una app de Liverpool:

• Dibuja una elipse de W: 64 y H: 64 (círculo perfecto).
• Rellénala con el color gris claro #D9D9D9 como placeholder.
• Colócala en la esquina superior izquierda de tu Frame.

Este círculo representará la foto de perfil del usuario en la barra superior.

Herramienta de línea

La línea (L) se usa para separadores, divisores entre secciones y detalles visuales. Es un elemento sencillo pero muy útil en interfaces reales.

Cómo dibujar una línea horizontal:

1. Presiona L.
2. Haz clic en el canvas y arrastra horizontalmente.
3. Mantén Shift para que la línea quede perfectamente horizontal.

En el panel derecho puedes cambiar el grosor (Stroke Weight) y el color de la línea.

Ejemplo — Separador de secciones en una app de FEMSA:

• Dibuja una línea horizontal de W: 375.
• Cambia el grosor a 1.
• Cambia el color a gris claro #E0E0E0.

Este separador divide visualmente las secciones de contenido dentro de una pantalla.

Herramienta de texto

La herramienta de texto (T) te permite escribir títulos, párrafos, etiquetas y cualquier contenido textual en tu diseño.

Cómo agregar texto:

1. Presiona T.
2. Haz clic en el canvas para crear un campo de texto de ancho libre.
3. Escribe tu texto.
4. Presiona Escape para salir del modo edición.

Alternativamente, haz clic y arrastra para crear un cuadro de texto con ancho fijo. El texto se ajustará automáticamente dentro de ese cuadro.

Propiedades clave del texto en el panel derecho:

Ejemplo — Pantalla de inicio para app de Bimbo:

Crea tres elementos de texto dentro de un Frame:

• Título: "Bienvenido" → Tamaño 28, peso Bold, color #1A1A1A.
• Subtítulo: "Encuentra tus productos favoritos" → Tamaño 16, peso Regular, color #666666.
• Etiqueta de precio: "$18,500 en crédito disponible" → Tamaño 14, peso Medium, color #E30613.

Esta jerarquía tipográfica guía la atención del usuario de arriba hacia abajo.

Cómo combinar formas y texto en una pantalla real

El diseño profesional combina todas estas herramientas juntas. Aquí tienes un ejercicio completo:

Ejercicio — Pantalla de confirmación de pago:

1. Presiona F y dibuja un Frame de W: 375 y H: 812 (tamaño iPhone estándar).
2. Rellena el Frame con color de fondo #F5F5F5.
3. Dibuja un rectángulo de W: 335 y H: 180 con radio 16 y relleno blanco. Será la tarjeta de confirmación.
4. Dentro de la tarjeta, agrega un círculo de W: 48 y H: 48 con color verde #4CAF50.
5. Agrega texto "Pago exitoso" en tamaño 20, Bold.
6. Agrega texto "Tu orden fue procesada correctamente" en tamaño 14, Regular, color #666666.
7. Dibuja un rectángulo de W: 335 y H: 52 con radio 8 y relleno #E30613. Será el botón principal.
8. Agrega texto "Ver mi pedido" dentro del botón: tamaño 16, Bold, color blanco.

En menos de diez minutos construiste una pantalla funcional usando solo las herramientas básicas.

Errores comunes

Error 1: No usar atajos de teclado. Cambiar herramientas con el mouse es lento. Desde el primer día usa V, R, O, T. Tu velocidad mejorará notablemente en pocos días.

Error 2: No mantener Shift al redimensionar. Arrastrar un círculo sin Shift lo convierte en un óvalo irregular. Siempre mantén Shift para conservar proporciones cuando lo necesites.

Error 3: Escribir texto fuera de un Frame. El texto flotante en el canvas no pertenece a ninguna pantalla. Siempre crea primero tu Frame y luego agrega elementos dentro. Esto mantiene tu archivo organizado.

Error 4: Mezclar demasiados tamaños de texto sin jerarquía. Usar cinco tamaños distintos sin un criterio claro confunde al usuario. Define solo tres niveles: título (24–28px), subtítulo (16–18px) y cuerpo (12–14px).

Resumen de herramientas

Puntos clave de esta lección

• Usa atajos desde el primer día. V, R, O, T y L son los cinco atajos que más usarás en cualquier proyecto.
• El rectángulo es la forma base. Botones, tarjetas y fondos son casi siempre rectángulos con propiedades modificadas.
• Shift es tu aliado. Mantenerlo al arrastrar te da proporciones perfectas; mantenerlo al dibujar te da líneas y círculos exactos.
• Jerarquía tipográfica desde el inicio. Define título, subtítulo y cuerpo con tamaños y pesos distintos para guiar la lectura del usuario.
• Siempre trabaja dentro de un Frame. Los elementos sueltos en el canvas no representan pantallas reales y generan desorden en archivos colaborativos.