Cómo usar todos los modos de fusión de Figma

Así como los pintores pueden mezclar pinturas para crear un nuevo color, los modos de fusión permiten a los artistas digitales crear diferentes efectos fusionando capas de diversas maneras. Cada modo de fusión define cómo interactúan las capas entre sí al combinar sus colores, lo que afecta la apariencia final.

Como herramienta de diseño de interfaces, Figma ofrece una gama de modos de fusión que los diseñadores pueden aplicar a sus capas y rellenos. En este artículo, analizaremos cada uno de los diferentes modos de fusión de Figma y cómo usarlos en tus diseños.

Cómo funcionan los modos de fusión en Figma

Un modo de fusión define cómo se fusionan dos o más capas, como imágenes, colores o texto, aplicando cálculos matemáticos a los píxeles de cada capa. Al aplicar un modo de fusión a una capa, se afectan las capas subyacentes. Con los modos de fusión, puedes aplicar superposiciones a imágenes, fusionar dos capas a la perfección o incluso cambiar los colores de una capa.

En Figma, se pueden ajustar los modos de fusión para una capa o el relleno de un objeto. En la configuración de Capas , puedes seleccionar un modo de fusión para aplicarlo a tu capa. También puedes aplicar un modo de fusión a un marco, grupo o sección, que se fusionará con las capas anidadas en él:

De forma similar, para aplicar un modo de fusión a una capa de relleno, seleccione el color de relleno y haga clic en el botón “Modo de fusión” en el selector de color. Se abrirá un menú desplegable con los modos de fusión disponibles:

Normalmente, es necesario ajustar la opacidad de la capa de fusión o del relleno para perfeccionar el efecto de fusión. Puede ajustar estas opacidades en la configuración del panel Diseño:

Tipos de modos de fusión en Figma

Ahora que hemos hablado sobre cómo funcionan los modos de fusión, exploremos los 19 modos de fusión diferentes que Figma tiene para ofrecer.

Paso a través y normal

El modo de fusión predeterminado para capas en Figma es “Pasar a través” , que se comporta como su nombre indica. Permite que la capa posterior pase a través de ella, lo que permite que se fusione según el modo de fusión de la capa superior.

Pero ¿en qué se diferencia el modo Pasar a través del modo de fusión Normal?

El modo de fusión Normal impide que la capa inferior se fusione con la superior. Puedes ajustar la opacidad de la capa del modo de fusión Normal , lo que fusionará ligeramente ambas capas. Sin embargo, si el relleno del objeto de esa capa tiene un modo de fusión diferente, no tendrá ningún efecto.

De manera similar, si la capa superior usa el modo de fusión Normal pero tiene objetos agrupados dentro de ella que tienen diferentes modos de fusión, estos tampoco tendrán ningún efecto.

Si aplicas “Pasar a través” a tu capa, el fondo podrá atravesarla y fusionarse según el modo de fusión de cada objeto. En este ejemplo, cada círculo tiene aplicado un modo de fusión de capa y un modo de fusión de relleno.

Cuando los círculos utilizan “Pasar a través” como modo de fusión de capa, cada círculo se fusionará con el fondo según su modo de fusión de relleno. El círculo con el modo de fusión Normal aplicado se verá normal, lo que resulta útil si se desea evitar que un objeto específico se fusione con el fondo mientras otros se fusionan:

Modos de fusión más oscuros

La siguiente sección de modos de fusión incluye Oscurecer,Multiplicar,Más oscuro y Color subexponente . Estos modos de fusión se utilizan para oscurecer la capa posterior a la capa de fusión. A continuación, se muestra cómo funciona cada uno en comparación con el modo de fusión Normal:

El modo Oscurecer compara los colores de la capa de fusión con los de la capa subyacente y genera el mínimo de dos valores. En otras palabras, conserva los colores más oscuros.

El modo Multiplicar conserva los colores más oscuros de la capa de fusión y hace que los colores más claros sean más transparentes. Esto produce colores más oscuros, excepto cuando la capa es blanca pura.

Si conoce el modo de fusión Subexposición linealel Adobe Photoshop,el modo Más oscuro funciona de la misma manera. Es similar a Oscurecer , pero se centra más en los medios tonos.

Por último, el modo Subexposición de color aumenta el contraste entre la capa de fusión y la capa detrás de ella.

Aquí hay otro ejemplo de cómo funcionan estos diferentes modos de fusión más oscuros, esta vez con una imagen que contiene una persona:

Modos de fusión más claros

A continuación, tenemos los modos de fusión más claros, que incluyen Aclarar,Pantalla,Más claroySobreexponer color . A diferencia de los modos de fusión más oscuros, estos modos de fusión más claros se utilizan para aclarar la capa posterior a la capa de fusión en Figma:

Al igual que el modo Oscurecer , el modo Aclarar compara los colores de la capa de fusión y la capa detrás de ella, pero en cambio mantiene los colores más claros.

La pantalla invierte los colores de cada capa, los multiplica y luego invierte el resultado. Esto funciona como lo opuesto a Multiplicar e ilumina las áreas donde alguna capa era más oscura que el blanco.

Además, el modo de fusión Más claro imita el modo de fusión Sobreexposición lineal de Photoshop , que suma los valores de ambas capas.

La sobreexposición de color aclara la capa inferior en función del brillo de la capa de fusión.

A continuación, puedes ver cómo la misma imagen de antes cambia según los diferentes modos de fusión más claros que le apliques:

Modos de fusión de contraste

A continuación, analizaremos los modos de fusión de contraste, que incluyen Superposición,Luz suaveyLuz intensa . Estos modos de fusión son eficaces para mejorar el contraste entre capas, tanto para aclarar como para oscurecer:

El modo Superposición combina el efecto de los modos de fusión MultiplicaryTrama . La capa de fusión se aclara o se oscurece según el brillo de la capa base.

Con el modo Luz suave , la claridad u oscuridad de la capa de fusión creará colores más claros o más oscuros. Si la capa base es blanca, la capa de fusión también aparecerá blanca.

Al igual que Superposición , el modo Luz intensa también combina los efectos de los modos de fusión MultiplicaryTrama . Sin embargo, la luminosidad u oscuridad de la capa de fusión determina el efecto en la capa base, creando una relación inversa entre ambos.

Observa cómo se ve la imagen que usamos anteriormente con estos modos de fusión de contraste aplicados:

Modos de mezcla comparativos

Los modos de fusión comparativos incluyen DiferenciayExclusión . Podemos usarlos para invertir colores o excluir la fusión cancelando los colores según la capa base. Aquí tienes una vista previa rápida:

El modo Diferencia toma la diferencia entre la capa de fusión y la capa base. Fusionar con blanco invierte el color, mientras que fusionar con negro no produce cambios.

El modo de exclusión es similar a Diferencia , pero reduce el contraste, lo que hace que la imagen resultante sea más clara en general.

Observa cómo la diferenciayla exclusión afectan la imagen que hemos estado usando:

Modos de fusión compuestos

Por último, pero no menos importante, tenemos los modos de fusión compuestos, que incluyen Orden,Saturación,ColoryLuminosidad . Estos modos de fusión modifican la calidad del color de la capa de fusión. Podemos usarlos para corregir el color o enfocar la imagen:

Cada uno de estos modos de fusión utiliza una combinación diferente de los valores de tono, saturación y color de la capa base y la capa de fusión. Su nombre se basa en los valores que toman de la capa de fusión.

El modo Tono vuelve a colorear la capa base con el tono de la capa de fusión mientras conserva el brillo y la saturación de la capa base.

El modo de saturación conserva el brillo y el tono de la capa base, pero utiliza el valor de saturación de la capa de fusión.

El modo de color utiliza el brillo de la capa base mientras combina el tono y la saturación de la capa de fusión.

Luminosidad toma el color y la saturación de la capa base y agrega el brillo de la capa de fusión.

Si aplicamos estos modos de fusión a nuestra imagen anterior, veremos algo como esto:

Cómo aplicar los modos de fusión de Figma a tus diseños

Hemos visto cómo cada modo de fusión de Figma puede afectar tus diseños, pero ¿cómo aplicarlos en la práctica? Veamos un ejemplo del uso de los modos de fusión en Figma para crear efectos que realzarán tus interfaces de usuario.

Al diseñar interfaces que requieren fondos dinámicos, como imágenes, patrones o movimiento, es posible que desee que los elementos de la interfaz se integren de diferentes maneras para que sean visibles y accesibles en todo momento. Por ejemplo, aquí tenemos la interfaz móvil de un reproductor de música que usa una imagen como fondo:

Oscurezcamos la capa de fondo para que el título de la canción y los controles multimedia destaquen sobre la imagen. Para lograr este efecto, añadiremos un segundo relleno a la capa de la imagen y lo configuraremos en gris:

Usamos gris porque los modos de fusión más oscuros comparan los colores entre la capa de fusión y la capa base y conservan los más oscuros. Usar negro puro dará como resultado una capa negra una vez aplicado el modo de fusión. Puedes ajustar el tono de gris más adelante para perfeccionar el efecto.

A continuación, cambia el modo de fusión de relleno a uno de los más oscuros . En este ejemplo, Multiplicar parece ser el más efectivo, pero puedes pasar el cursor sobre los diferentes modos de fusión para previsualizar el resultado en tus diseños.

Ahora, el fondo de nuestra imagen es más oscuro, pero aún visible, y el título de la canción y los controles multimedia se ven mucho mejor. Como se mencionó anteriormente, puedes ajustar el tono de gris para lograr la oscuridad deseada:

Al aplicar este modo de fusión, podemos crear suficiente contraste para que los usuarios puedan ver contenido importante mientras disfrutan del fondo dinámico.

Por último, agreguemos un modo de fusión de capas al grupo de controles de medios para darle un efecto transparente. Para ello, el modo de fusión Luminosidad es eficaz, ya que permite conservar el color y la saturación del fondo mientras se ajusta el brillo según la capa de fusión. Como resultado, los controles tendrán un efecto vitrófilo.

Como antes, puedes ajustar el tono de gris para lograr el resultado deseado.

En nuestro reproductor de música hipotético, la imagen cambiará según la canción que se esté reproduciendo. Por lo tanto, asegúrese de probar su diseño con diferentes imágenes de fondo para garantizar que los modos de fusión funcionen en todos los casos.

Dado que usamos gris para oscurecer y aclarar ciertos aspectos de nuestro diseño, el resultado combinado debería funcionar para todas las imágenes:

Conclusión

Los modos de fusión son una herramienta poderosa en Figma que puede mejorar tus interfaces de usuario. Con 19 modos de fusión disponibles, comprender las diferencias entre ellos te ayudará a aplicarlos a tus diseños para crear los efectos deseados.

Se pueden lograr innumerables resultados al combinar diferentes modos de fusión, como oscurecer, aclarar o aumentar el contraste entre capas. Los modos de fusión de Figma son una excelente manera de adaptar los elementos de diseño a fondos dinámicos y añadir interés visual a los diseños.

Puede que tengas que experimentar un poco para encontrar el modo de fusión más adecuado para tu caso, ¡pero eso es parte de la diversión del diseño! Con la posibilidad de pasar el cursor sobre cada modo de fusión para previsualizarlo, Figma te permite convertir fácilmente tus diseños planos en algo más impactante.

Si quieres conocer otros artículos parecidos a Cómo usar todos los modos de fusión de Figma puedes visitar la categoría Guias.