Creación de Prototipos en Figma: Elementos Básicos y Diseño de Interfaces

Curso de Figma

Clase 3 de 22

Clase 3 / 22

Recursos

Construir la primera vista de una aplicación dentro de Figma requiere dominar las herramientas básicas de forma, color y composición. Aquí se recorre paso a paso cómo poblar un frame con rectángulos, polígonos, círculos y trazos a mano alzada para armar un wireframe funcional de la app Apata, una plataforma de senderos.

¿Cómo se organiza el espacio de trabajo antes de diseñar?

Antes de colocar cualquier objeto, conviene tener claras las decisiones visuales previas. El brand book ya contiene la paleta de color, la tipografía y los lineamientos generales. Con esa referencia a la vista, se trabaja sobre frames específicos dentro del canvas infinito de Figma [0:10].

El objetivo inicial es bocetar tres zonas de la pantalla:

Barra de exploración: campo de búsqueda en la parte superior.
Chips de filtro rápido: botones pequeños que permiten filtrar por categorías como pet friendly, paisajes o actividades familiares.
Galería de senderos: tarjetas con imagen, mapa de ruta, nombre y calificación.

¿Cómo crear y ajustar la barra de exploración?

Presionando la tecla R se activa la herramienta de rectángulo [3:08]. Al hacer clic dentro del frame de destino se genera la forma. Lo siguiente es verificar las distancias con la tecla Option (Mac) o Alt (Windows): al pasar el cursor entre el objeto y los bordes del frame, Figma muestra los píxeles de separación en tiempo real.

Mover el objeto con las flechas del teclado ajusta de uno en uno.
Agregar Shift a la flecha desplaza de ocho en ocho píxeles.
El objetivo es conseguir márgenes consistentes —en este caso, veinticuatro píxeles a cada lado— [3:30].

Para tomar un color existente se presiona la tecla I, que activa el eyedropper (cuentagotas). Se hace clic sobre el color de referencia del brand book y el rectángulo adopta ese tono al instante [4:03]. Después, arrastrando el control de radio de borde directamente sobre la figura, se redondean las esquinas hasta lograr una apariencia de pastilla, reduciendo la altura a sesenta y cuatro píxeles.

¿Cómo se construyen chips, tarjetas y rutas con formas inteligentes?

¿Qué es el stroke y cómo se usa en los chips de filtro?

Los chips se crean con rectángulos sin relleno. En el panel derecho se localiza la propiedad llamada stroke y se le asigna el color primario de la interfaz [5:15]. Se elimina el fill (relleno) blanco y se aplica un radio de borde de ocho para mantener coherencia visual.

Para duplicar un chip basta con mantener Option (o Alt) y arrastrar el objeto. Figma genera una copia con nombre secuencial en el panel de capas. Los chips pueden variar en ancho porque representan etiquetas de distinta longitud. Solo el chip activo conserva el color primario; los demás llevan un tono de stroke más tenue para indicar que no están seleccionados [6:20].

¿Cómo representar una galería de imágenes con el lápiz?

La tarjeta del sendero ocupa más espacio vertical porque la imagen tiene mayor peso visual. Se crea un rectángulo amplio, se le aplica radio y el color de fondo tomado con el cuentagotas [7:25].

Para insinuar que hay varias fotos dentro, se usa la herramienta Pencil (atajo Shift + P) [8:05]. Al dibujar a mano alzada, Figma suaviza la línea automáticamente. Presionando Shift mientras se traza, la línea se mantiene recta. El grosor del trazo se ajusta a ocho píxeles desde el panel lateral para que sea visible.

¿Cómo crear un hexágono para representar la ruta del sendero?

Desde la barra de herramientas se selecciona Polygon [9:00]. Por defecto aparece un triángulo, pero al pasar el cursor sobre la esquina inferior aparece la propiedad count. Incrementándola se pasa de tres lados a seis, obteniendo un hexágono. Se le aplica un radio de ocho, se elimina el relleno y se agrega un stroke con el color de resalte.

Para indicar inicio y fin del recorrido se crean dos círculos con la tecla O [10:10]. Manteniendo Shift al arrastrar, el óvalo se convierte en un círculo perfecto. El punto de inicio recibe el color claro F8F4ED y el de llegada el verde brillante 65F6, generando contraste inmediato.

Con estos elementos —barra de búsqueda, chips, tarjeta con imagen, hexágono de ruta y puntos de inicio y fin— el wireframe comunica con claridad la estructura de la primera pantalla. Si quieres practicar, intenta replicar esta composición ajustando tus propios márgenes y colores, y comparte tu resultado en los comentarios.