Jugar también es aprender, y en Figma puedes comprobarlo creando simetrías rotacionales que parten de un solo componente base y se expanden por toda la pantalla. Esta técnica es ideal para diseñadores que quieren explorar patrones tipo mandala o geometría islámica sin partir de plantillas.

La idea es construir un frame maestro, convertirlo en componente y multiplicarlo girando sus instancias alrededor de un eje central. A partir de ahí, cualquier forma que dibujes dentro se replica de manera infinita.

¿Cómo configurar el frame base para una simetría rotacional?

Todo arranca con un lienzo limpio y un frame cuadrado que servirá como bloque de Lego para el resto del ejercicio [00:30].

• Presiona F y arrastra con shift hasta lograr un cuadrado.
• Ajusta las dimensiones manualmente a 500 por 500 desde la pestaña de diseño.
• Quita el relleno y aplica un stroke blanco con color FF para ver el borde.
• Renombra el frame como Base, porque será la referencia de todo lo que sigue.

Este paso parece menor, pero te da el eje principal sobre el que girarán las instancias. Sin una base clara, el patrón se desordena rápido.

¿Qué es un frame en Figma? Es un contenedor que agrupa elementos y define un área de trabajo. A diferencia de un grupo, tiene propiedades propias como recorte de contenido y restricciones.

¿Cómo convertir el frame en componente y duplicarlo con rotación?

Una vez tienes la base, conviértela en componente con Command Option K. Verás cómo el frame cambia a color púrpura, señal de que ahora es un componente maestro [01:30].

Para orientarte dentro del patrón, agrega un polígono en la parte superior del frame. Haz clic dentro y arrastra con shift para mantenerlo simétrico, y céntralo con las guías inteligentes de Figma. Ese triángulo te dirá siempre dónde está el norte de la composición.

¿Por qué usar Shift H y Shift V al duplicar?

Aquí está el truco que hace que todo funcione. Duplica la instancia con Command D y colócala justo debajo de la original. Luego presiona Shift H para voltearla horizontalmente y Shift V para voltearla verticalmente [02:35].

Si te saltas esta parte, la simetría no se alinea y el patrón se rompe. Lo que estás logrando es que cada instancia sea el espejo perfecto de la otra respecto al eje central.

¿Cómo completar las ocho instancias del patrón?

Con dos instancias opuestas listas, duplícalas y rótalas para que queden horizontales, sosteniendo shift mientras giras para fijar el ángulo. Ya tienes cuatro formas concéntricas.

Ahora selecciona las cuatro, duplícalas con Command D y rota la copia 45 grados para generar el patrón de estrella de ocho puntas [04:05]. Todos los bordes convergen sobre el mismo punto de simetría, y cada instancia sigue conectada al componente maestro.

¿Qué es la simetría rotacional? Es la propiedad de una figura que se ve igual después de rotar cierto ángulo alrededor de un punto central. En este ejercicio el ángulo base es 45 grados.

¿Cómo jugar con formas dentro del componente maestro?

Esta es la parte divertida. Cualquier cambio que hagas en el componente maestro se replica al instante en las ocho instancias [04:30]. Rota el triángulo y verás cómo todo el mandala se mueve contigo.

Cuando confirmes que el componente funciona, quita el stroke blanco del borde. Ya no necesitas la referencia visual y el resultado se ve más limpio.

Prueba reemplazar el triángulo por un hexágono, una figura con simetría natural muy expresiva. Quítale el relleno, dale un stroke blanco y aumenta el grosor a 4 arrastrando el control hacia la derecha. El patrón empieza a sentirse como un mosaico geométrico.

¿Qué hace el clip content y por qué desactivarlo?

Los frames en Figma tienen una casilla llamada clip content que recorta lo que sale de los bordes. Si la dejas activa, las formas se cortan y pierdes la sensación de expansión infinita [05:45].

Desactívala para que los hexágonos puedan crecer fuera del frame y sigan siendo parte del componente. Duplica el hexágono hacia la izquierda y la derecha desde el centro, y agranda el del medio hasta donde tu composición lo pida.

¿Cómo dibujar a mano alzada para llenar el espacio?

Presiona Shift P para activar el lápiz y elige un color que te inspire, como un verde biche tipo Apata [06:40]. Desde el centro del componente empieza a dibujar trazos que se extiendan hacia afuera.

Cada línea se replica en las ocho direcciones al mismo tiempo, así que con pocos movimientos llenas el lienzo completo. Si tienes iPad, el proceso se vuelve mucho más fluido porque puedes trazar con mayor control.

Al soltar el trazo, Figma suaviza las curvas automáticamente y el resultado final se ve más pulido de lo que parecía mientras dibujabas. Prueba con diferentes rellenos, formas y colores dentro de la base, y comparte tus resultados en los comentarios.