Diseñar una pantalla de exploración en Figma se vuelve mucho más rápido cuando dominas la duplicación de elementos, la creación de estrellas vectoriales y el agrupamiento con Command G. Aquí aprenderás a construir tarjetas de senderos con calificación, una barra de menú inferior y a replicar componentes manteniendo distancias exactas, ideal si estás empezando en diseño de interfaces.

Cómo construir la tarjeta de un sendero en Figma

La tarjeta combina imagen, título, ubicación y calificación. Cada bloque se construye duplicando rectángulos para mantener consistencia visual.

Después de tener el rectángulo de la galería, duplica con option + clic y arrastra hacia abajo dejando una distancia de 16 píxeles. Ese segundo rectángulo se convierte en el contenedor del título, y un tercero más corto funciona como locación. La idea es trabajar siempre por jerarquía: primero la imagen, luego el texto, al final la calificación.

¿Qué es duplicar con option en Figma? Es mantener presionada la tecla option mientras arrastras un elemento. Figma crea una copia exacta sin alterar el original y te muestra la distancia entre ambos en tiempo real.

Por qué usar una estrella vectorial para la calificación

En diseño de interfaces, las estrellas son el indicador visual estándar para calificaciones, igual que en Google Maps o Waze. Figma trae una herramienta nativa que evita dibujar puntos manualmente.

Desde la barra de herramientas seleccionas Star, haces clic donde quieres ubicarla y mantienes shift para conservar la proporción. Una altura de 24 píxeles funciona bien para tarjetas. Puedes ajustar el radio para suavizar los bordes y, aunque Figma permite estrellas con lados casi infinitos, las de cinco puntas son las que el usuario reconoce de inmediato.

El color verde prominente de la marca resalta la calificación y crea contraste con el fondo. Junto a la estrella va un pequeño rectángulo vertical centrado que separa el ícono del valor numérico. Aquí entran las líneas rojas inteligentes de Figma, que aparecen al mover objetos y muestran las distancias exactas entre elementos para alinear con precisión.

Cómo duplicar elementos en Figma con Command D

Una vez lista la primera tarjeta, agrúpala con Command G. Eso convierte todos los elementos en un solo Group dentro de la capa de layers, y a partir de ahí puedes manipularlos como una sola unidad.

Para duplicar el grupo, arrastra con option + clic manteniendo shift presionado. El shift fuerza que la copia mantenga la alineación vertical exacta, evitando desviaciones. Una distancia de 32 píxeles entre tarjetas suele funcionar bien para listas con scroll.

¿Qué hace Command D en Figma? Duplica el último elemento copiado y recuerda la distancia y dirección del movimiento anterior. Si presionas Command D varias veces, Figma replica el mismo patrón en secuencia automáticamente.

El truco de la duplicación en secuencia

Este comportamiento es el verdadero superpoder. Si duplicas un rectángulo de 50x50 con option y lo mueves 8 píxeles a la derecha, al presionar Command D Figma seguirá creando copias con esa misma separación. Funciona en cualquier eje: horizontal, vertical o diagonal.

Esto es clave cuando construyes:

• Listas largas de tarjetas dentro de un frame con scroll.
• Cuadrículas de íconos o imágenes uniformes.
• Barras de navegación con secciones equidistantes.

Las copias que quedan fuera del frame siguen existiendo en la capa, solo que no se visualizan hasta que se hace scroll.

Cómo diseñar la barra de menú inferior

La barra inferior indica en qué sección de la app está el usuario. Cuatro recuadros con fondo verde oscuro funcionan como contenedores para los íconos de navegación.

Dentro de cada recuadro va un círculo de 24x24 píxeles que sirve como base para el ícono. Si tu círculo quedó en 23x23, puedes usar el atajo Command + flechas para ajustar dimensiones de a un píxel: flecha abajo aumenta altura, flecha derecha aumenta longitud. Los valores pares facilitan el centrado perfecto, porque la mitad cae en un píxel exacto.

Cómo aplicar estados visuales con color

En una barra de navegación solo una sección puede estar activa a la vez. Los círculos inactivos llevan un color neutral más claro, mientras que el seleccionado usa el verde prominente de la marca.

Si el verde inicial se confunde con el fondo verde oscuro, sube la luminosidad para mejorar el contraste. La regla práctica: el estado seleccionado debe ser inmediatamente visible sin que el usuario tenga que comparar.

Con esto la pantalla queda con una lista de senderos scrolleable, calificaciones legibles y una barra inferior con la sección Explorar marcada como activa. Te invito a explorar otros formatos: tarjetas tipo Tinder con foto a pantalla completa, vista de mapa con pines, o tarjetas más compactas. Comparte tus exploraciones en los comentarios antes de pasar a integrar tipografía.