Componentes en Figma

Hoy estamos entusiasmados de lanzar Componentes en Figma. Al incorporar conceptos como composición, herencia y anulaciones ilimitadas de la ingeniería al diseño, los Componentes nos acercan a un mundo donde podemos razonar fácilmente sobre los sistemas de diseño a medida que avanzamos en nuestro trabajo diario.

Solo dos semanas después de que comencé a trabajar en Figma, hace casi un año, iniciamos el proyecto de construcción de componentes. Como alguien con experiencia tanto en diseño como en ingeniería, he notado que la forma en que diseñamos es muy diferente a la forma en que construimos software. La gente espera interfaces de usuario complejas que estén vivas, conectadas y siempre mejorando. ¿Cómo podemos mantenernos como diseñadores? Los ingenieros ya han descubierto esto.

Los componentes son un concepto popular en ingeniería utilizado en todo, desde iOS, Android, macOS, Windows, Unity, HTML y otras tecnologías utilizadas para construir interfaces de usuario y juegos. Reaccionar, por ejemplo, es una forma de construir grandes sistemas de interfaz de usuario sin el dolor de cabeza de tener que entender todo de una vez, a través de la composición de partes más pequeñas en un comportamiento más complejo.

¿Qué pasa si aplicamos este concepto a las herramientas de diseño?

Retroceso a los viejos tiempos; Componentes en acción - Abrir en Figma

Diseñando con Componentes

La composición es una parte fundamental del diseño. Nos permite razonar sobre una parte más pequeña de un sistema mayor y nos permite reutilizar las piezas existentes, lo que nos ahorra tiempo en trabajos repetitivos y tediosos. Agregar el concepto de componentes a una herramienta de diseño hace que la composición de diseños complejos sea más consistente y más eficiente.

Por ejemplo, una aplicación de libreta de direcciones podría tener una tabla que enumera un contacto por fila. Diseñar una buena vista de lista requiere encontrar el tamaño de letra, el espacio, los iconos y otros gráficos correctos. El mismo componente se puede usar en muchos lugares a la vez, cada uno de un tamaño diferente con modificaciones y diferencias locales:

Esto no solo facilita la reutilización rápida de las piezas existentes, sino que los componentes también ayudan con la consistencia. Y dado que los componentes reutilizados no son copias, sino instancias del mismo componente, cualquier cambio aplicado más tarde se refleja inmediatamente en su diseño.

Nuestro enfoque a los componentes

En Figma, creemos que las herramientas de diseño no deben interferir con su trabajo creativo. Muchas herramientas han tratado de abordar el problema del diseño reutilizable, pero creemos que nuestra implementación es diferente.

Al diseñar componentes, nuestro objetivo era hacerlos:

  • fácil de aprender para que cualquiera pueda comenzar
  • lo suficientemente potente para usuarios avanzados
  • lo suficientemente flexible como para funcionar durante todo el proceso de diseño

Diseñar sistemáticamente no debería ralentizarlo, no debería requerir más gastos generales. Debería permitirte construir cosas más rápido y de manera más consistente, sin bloquear tu capacidad de ser creativo y resolver nuevos problemas.

Cómo funciona

En Figma, Componentes funciona igual que los Marcos, con el giro de que los duplicados de un componente crean nuevas instancias en lugar de copias. Comenzamos seleccionando algo que queremos convertir en un componente y hacemos clic en la acción "Crear componente" en la barra de herramientas:

En este punto, es solo un marco con un elegante contorno púrpura. Bueno, hasta que creamos algunas instancias.

Podemos mantener presionada la tecla Alt y arrastrar, usar la acción "Duplicar", o simplemente copiar y pegar un Componente para crear instancias:

Con dos instancias, ahora tenemos tres de lo mismo. Cada uno tiene una posición independiente en el lienzo, pero por lo demás son idénticos.

Cualquier cambio que realicemos en nuestro Componente se refleja inmediatamente en sus instancias:

Hay un aspecto importante que hace que las instancias sean especiales: son reflejos del componente que representan y permiten anulaciones a varias propiedades, pero restringen algunas propiedades como la posición y el tamaño de los objetos en el interior, todo para que sea lo más fácil posible administrar y mantener Componentes. .

Dado que cualquier cambio en un Componente se refleja en una instancia, ¿qué sucede si cambiamos algo dentro de una instancia? ¿Ese cambio simplemente desaparece cuando se modifica el componente? No, eso sería una locura.

Estilo y anulaciones de propiedad

Los cambios realizados en las instancias pueden considerarse como anulaciones del estilo y las propiedades del componente original. Veamos qué sucede si anulamos el color y el trazo en nuestras instancias, y luego cambiamos el Componente original:

Lo que sucede aquí es que dijimos "para esta instancia en particular, deje que el color de relleno sea gris oscuro, y para esta, deje que el color y el ancho del trazo sean rojos y 6px, sin importar cuáles sean los valores para el componente original". Cuando luego realizamos cambios en el Componente, nuestras anulaciones permanecen, pero otras propiedades que no anulamos se reflejan literalmente.

Se puede anular cualquier propiedad de cualquier parte de una instancia, incluidas las subcapas y sus propiedades. Esto hace que las posibilidades sean prácticamente infinitas.

Cuando cambiamos de opinión y queremos eliminar las anulaciones de nuestras instancias, simplemente podemos seleccionar las cosas que queremos restablecer y elegir "Restablecer instancia".

Componentes complejos

Anteriormente en este artículo, hablamos sobre la creación de sistemas a partir de componentes fácilmente comprensibles y que los componentes pueden contener otras instancias para formar un comportamiento más complejo. Tales "componentes anidados" son tan fáciles de crear y trabajar con cualquier otro objeto en Figma. Simplemente agregue una instancia a un componente o cree un nuevo componente a partir de una o más instancias seleccionadas:

Restricciones

Figma es poderosa en la forma en que podemos combinar varias características juntas. Las restricciones son una de estas características que, cuando se agregan a un diseño, permiten una dimensión completamente nueva de expresión creativa, especialmente en cómo las cosas reaccionan a varios tamaños y posiciones:

Abrir en Figma

Lea más sobre Restricciones en los sistemas de cuadrícula para el diseño de pantalla

Esta versión de Componentes es solo el comienzo para nosotros, pero es la base de una serie de pasos que estamos tomando para acercar el diseño a la ingeniería. A medida que el diseño se vuelve más complejo y más personas se involucran en el proceso de diseño, será aún más esencial que nuestras herramientas se vuelvan más inteligentes y nos ayuden a hacer un trabajo que pueda automatizarse para que podamos centrarnos en resolver problemas de diseño. ¡Pruébalo y dinos lo que piensas!