No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de Figma

Curso de Figma

Santiago Camargo

Santiago Camargo

Simetría rotacional

20/22
Recursos

¿Cómo crear una base para simetrías rotacionales en Figma?

En el fascinante mundo del diseño gráfico, la simetría rotacional puede ser una herramienta poderosa para crear patrones hipnóticos y visualmente atractivos. En Figma, puedes llevar tu creatividad al siguiente nivel mediante el uso de simetrías rotacionales. Comenzaremos esta aventura creativa desde cero, aprovechando la simplicidad y flexibilidad que ofrece esta herramienta.

Para iniciar, creamos un "frame" que será la base de todo nuestro trabajo. Sigue estos pasos:

  1. Crea un frame:
  • Usa la tecla F, haz clic y arrastra con Shift hasta obtener un tamaño de 500x500.
  • Ajusta manualmente su tamaño a 500x500 en la pestaña de diseño.
  • Añade un "stroke" blanco y renómbralo como base.
  1. Crea el componente base:
  • Crea un componente del frame usando Command Option K.
  • Añade un polígono dentro para marcar la parte superior y céntralo usando las guías inteligentes.

¿Cómo aprovechar la simetría de componentes en Figma?

Ahora que tenemos la base, exploraremos cómo podemos utilizar copias de este componente con simetrías reflejadas para crear patrones complejos.

  1. Duplica y refleja la instancia:
  • Duplica la instancia y ubícala debajo de la original.
  • Voltéala horizontal y verticalmente con Shift H y Shift V.
  1. Rota y duplica más instancias:
  • Duplica y rota las instancias sobre el eje central.
  • Gira usando Shift para asegurar simetría.
  • Repite el proceso hasta que obtengas un patrón de ocho instancias formando una estrella.

¿Cómo jugar y experimentar con formas en Figma?

Ahora que nuestra estructura está lista, es momento de divertirnos agregando formas y experimentando con los diferentes elementos que podemos incluir para darle vida al diseño.

  1. Experimenta con diferentes formas:
  • Cambia el polígono a un hexágono, sin relleno pero con un "stroke" blanco grueso.
  • Duplica y mueve esos hexágonos fuera del frame para ver cómo interactúan.
  1. Juega con la herramienta de dibujo a mano alzada:
  • Usa Shift P para dibujar con un esfero.
  • Escoge un color como verde biche y empieza a dibujar desde el centro, aplicando la simetría a todo el diseño.

Recuerda, lo más importante es dejar volar tu imaginación. No importa si las primeras veces no sale a la perfección; el objetivo es experimentar y aprender en el proceso. 

Aportes 24

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

mi resultado :) ![](https://static.platzi.com/media/user_upload/Screenshot%202024-12-13%20at%209.51.39PM-8b7bfb0e-f6ea-4ce0-8b27-b801cb822d18.jpg)
Mi experimento: ![](https://static.platzi.com/media/user_upload/ejercicio-b4d6e88e-944d-4cb8-8599-b7b9855385f7.jpg)
![](https://static.platzi.com/media/user_upload/Frame%2040-dffc5393-434c-4792-b244-17879e82d76b.jpg)
![](https://static.platzi.com/media/user_upload/image-4c78bf91-4496-48b4-89f5-daf34882c07f.jpg)
![](https://static.platzi.com/media/user_upload/image-57c339bf-719a-497b-affe-a3a02786316c.jpg)![]() ```js ```
Esto fue lo que me salió ![](https://static.platzi.com/media/user_upload/image-667cdd4d-33e7-406a-8418-3d62ecb97396.jpg)
Representacion abstracta poligonal propia ![](https://static.platzi.com/media/user_upload/image-4997b650-e28c-49f1-9ad7-2b61874915cf.jpg)
hola, es un conejo.![](https://static.platzi.com/media/user_upload/image-58707356-9b27-4d91-8f37-c65bb53ebaeb.jpg)
no conocía find and replace, uffff full útil muchas veces
![](https://static.platzi.com/media/user_upload/image-1f39fbf7-fa9c-4f36-93ed-7e5c9f5efed3.jpg)
![](https://static.platzi.com/media/user_upload/image-84609251-f0bb-4c24-a353-69ac0f898cbc.jpg)
![](https://static.platzi.com/media/user_upload/image-11937cff-ae1c-4b81-8eda-735fca2c68af.jpg)
Esta clase me ha encantado 💖 ![](https://static.platzi.com/media/user_upload/image-5e14d967-99c2-4182-b764-0fb3f5609d73.jpg)
Yo lo animé y algunas de sus vistas son estas: ![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202025-01-08%20212052-cdb2f92f-c311-4dfb-a9ec-9795dab978c1.jpg) ![](https://static.platzi.com/media/user_upload/image-2711e1ec-de3a-4425-9f7a-cbd15c4501fd.jpg) ![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202025-01-08%20212107-98d2e59e-b786-4968-a7f6-c1382e185d89.jpg) Prototipo: <https://www.figma.com/proto/rqc9q0FCTX0Skalv686l9F/Espacio-de-Trabajo-%7C-Curso-Figma-2024-(Community)?page-id=264%3A2226&node-id=40002151-1642&viewport=-863%2C-1027%2C0.52&t=SsmFquaMVFA58CCS-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=40002151%3A1642&show-proto-sidebar=1>
Para abrir el panel de Componentes en Windows, el comando equivalente sería Ctrl + Alt + K
El resultado de la experimentación 😜 ![](file:///C:/Users/claud/Downloads/Captura%20de%20pantalla%202024-12-06%20113906.png)![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-12-06%20113906-f63dfff2-1a26-4dd5-95d0-e0f7ac85860d.jpg)![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-12-06%20113932-142280bf-67d3-476a-9636-0b569b2c3974.jpg) ![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-12-06%20113932-e2793d19-8c29-4cf9-9ee5-350248f96df9.jpg)
Comparto :D![](https://static.platzi.com/media/user_upload/upload-4d2ff054-b567-4fb5-b706-6e69f9097759.png)
Mi aporte ![](https://static.platzi.com/media/user_upload/upload-c0b4f7f4-5148-4c86-9b83-d15dfbd1e019.png)
### 🎮 **Jugar es aprender** * Figma es una herramienta para crear y experimentar. En esta clase se explora la **simetría rotacional**, como en los bloques de LEGO, para estimular la imaginación. ### 🧱 **Paso a paso: Crear desde cero** 1. **Crear un frame base** * Atajo: `F` + arrastrar con `Shift` → tamaño: 500x500 px. * También puedes ajustar las medidas manualmente desde la pestaña “Diseño”. * Quita el *relleno*, agrega un *borde blanco* (`#FFFFFF`). * Renómbralo: `BASE`. 2. **Convertir en componente** * Atajo: `Cmd + Opt + K` → se vuelve púrpura (componente principal). 3. **Agregar forma guía** * Inserta un polígono (ej. triángulo) centrado para indicar la parte superior. * Útil para no perder la orientación con múltiples instancias. ### 🔄 **Simetría rotacional** 1. **Crear instancia y reflejarla** * Copia una instancia hacia abajo. * Presiona: `Shift + H` (horizontal) y `Shift + V` (vertical) para reflejarla. 2. **Duplicar y rotar** * Selecciona ambas → `Cmd + D` (duplicar). * Rota 90° con `Shift` para mantener simetría. * Repite el proceso para formar una estrella de 8 formas. * Usa rotación de 45° para crear patrones tipo *mandala*. ### 🎨 **Empezar a jugar** 1. **Modificar la figura base** * Cambia el triángulo por otra figura como un hexágono. * Dale *stroke blanco* y aumenta el grosor (ej. 4 px). 2. **Expandir fuera del frame** * Duplica figuras a izquierda y derecha. * Desactiva la opción **Clip content** para que no se corten fuera del frame. 3. **Agregar elementos decorativos** * Usa `Shift + P` para insertar una elipse/esfera. * Elige colores llamativos. * Dibuja dentro del componente: rayos, líneas, decoraciones… * Todas las instancias reaccionan automáticamente a los cambios. ### 🌟 **Mensaje final** > “Suelta tu imaginación. Llena el espacio, crea formas, prueba colores y compártelo.”
![](https://static.platzi.com/media/user_upload/Screenshot%202025-04-09%20at%2010.56.12AM-d1e8021b-e953-43fb-a7f5-d228f79b0874.jpg)
Mi resultado <3 ![](https://static.platzi.com/media/user_upload/image-cd42bc35-c93c-45fb-83cf-7e5573a49e69.jpg)
Así ha quedado ![](https://static.platzi.com/media/user_upload/simetria-rotacional-bcdf32d4-34b9-4c2f-83f2-bc5cac8d7295.jpg)
Comparto mi aporte ![](https://static.platzi.com/media/user_upload/image-38f24dad-7715-4bbd-a29c-8280a7659cc7.jpg) ![](https://static.platzi.com/media/user_upload/image-15b029db-865e-4403-921b-7eceb57f411c.jpg)
mi ejercicio```js ```![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-12-21%20122019-ea7d425d-eee4-4049-a99d-ddd6e074b447.jpg)