Consejos sobre Componentes en Figma

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Figma nos permite diseñar con componentes; objetos repetibles que se comportan de acuerdo a conjuntos de reglas que definimos. Recorramos algunos consejos y trucos para ayudarte a sacar el mayor provecho de los componentes.

Mira los Consejos

1. Combina Componentes para Propagar Cambios Fácilmente

Un botón, por ejemplo, podría ser un componente que consiste de un objeto de forma y un objeto de texto. Podríamos tener múltiples instancias de ese botón, cada uno ligeramente diferente pero adheriéndose todo a un diseño básico y reglas de exhibición. En algunas instancias, podríamos elegir eliminar el relleno, dejando solo un contorno, en cuyo caso remplazaríamos el color de relleno. Cuando ésto sucede, si alteramos el color de relleno del componente, todas las instancias reflejarían ese cambio, excepto en la que elegimos remplazar el relleno.

Pero si alteramos una propiedad que no ha sido remplazada, esas alteraciones serían visibles en todas las instancias del botón.

Ésta manera de trabajar con instancias puede ser un enfoque realmente útil de adoptar cuando se crean diseños de IU.

Combine Components to Propagate Changes Easily

2. Crea Simetría al Voltear Componentes

Si quieres crear simetría o hacer efecto de espejo, crea un componente de una mitad de cualquier cosa que quieras usar. Crea una segunda instancia al mantener presionada la tecla ALT y arrastrando la original, luego presiona MAYÚSCULAS + H para voltear el duplicado. Ahora, cuando alteres la original, el duplicado también será alterado, pero al revés.

Create Symmetry by Flipping Components in Figma

3. Crea Motivos Repetitivos al Formar Mosaicos con los Componentes

Puedes usar componentes para crear fondos con mosaicos de manera fluida y repitiendo motivos. Comienza creando un solo componente de mosaico en el tamaño que necesites, luego crea más instancias al mantener presionada la tecla ALT y arrastrando el original, preferentemente un par de veces en cada eje. Luego, modifica el mosaico original para ver tus cambios en todos los mosaicos, hasta que los motivos embonen de manera fluída.

Posteriormente podrás exportar ese mosaico original como una imagen independiente, para usarla donde necesitas cubrir con mosaicos de manera perfecta.

Create Repeating Patterns by Tiling Components

Recursos de Aprendizaje de Figma

Esos tres consejos te deberían haber mostrado qué tan útiles puede ser los componentes en Figma. Para ayudarte a llevar las cosas al siguiente nivel tenemos una serie de cursos de Figma en Tuts+.

Agradecimiento especial a Carmel DeAmics y Valerie Veteto por sus habituales compendios de consejos de la comunidad-¡Consúltalos!
blog.figma.com
www.figma.com