Efectos en Figma para mejorar el diseño UI

Si quieres mejorar tus diseños de interfaz de usuario para que resalten y sean más llamativos, para que se adapten a las tendencias de diseño actual o de alguna estética concreta, para diferenciarte de tu sector o para expresarte mejor a través del diseño, estos efectos en Figma son lo que buscas.

En esta entrada voy a explicar diferentes efectos que podemos usar para mejorar el diseño visual de aplicaciones, webs o incluso material gráfico.

Eso sí, antes que nada quiero destacar dos aspectos importantes. Lo primero es indicar que yo he diseñador estos efectos en Figma pero la mayoría también son reproducibles con cualquier otro software de diseño como Penpot, Sketch o Illustrator.

Por otra parte, quiero que comprendas que lo importante son los principios a seguir, que los valores para la intensidad del efecto dependen de tu gusto y necesidades.

Tabla de contenidos

Estos son los efectos que vamos a ver en esta entrada:

• Efecto cristal
• Efecto metal
• Efecto oro
• Efecto recorte
• Efecto aurora
• Efecto led
• Efecto neón
• Efecto 3D
• Efecto parallax

Efecto cristal

El efecto cristal es tan popular que tiene su propia corriente que se llama glassmorphism. Reproducir el efecto cristal es muy sencillo. Basta con crear un objeto superior con poca opacidad y con bastante desenfoque de la capa inferior.

¿Cómo se hace esto? Muy sencillo, creamos una forma nueva, por ejemplo el cuadrado que veis en la foto superior. Después, reducimos el color de relleno al 10% y le añadimos el efecto difuminado de fondo (Background Blur). También es importante tener en cuenta que el color de relleno tiene que ser al menos de 1% para que el difuminado de fondo funcione.

Una opción más elegante es que el relleno del elemento no sea un color sólido sino un degradado de mucha a poca opacidad.

Si queremos que el resultado sea más obvio podemos poner un trazo (stroke) como el de la imagen.

¿Quieres saber más trucos de Figma?

¡Descubre los Secretos del Diseño UX/UI! 🎨

Sigue a AprenderUXUI en LinkedIn para contenido casi casi diario sobre diseño UX / UI

¡Sígueme en LinkedIn ya! ➡

Efecto metal

El efecto metal no es otra cosa que un degradado lineal con los diferentes tonos que podría tener un metal a la luz. Por eso, yo recomiendo que este degradado sea de mínimo 5 posiciones. Siendo las posiciones 2 y 4 un color bastante cercano a blanco para crear los reflejos. Las posiciones 1, 3 y 5 deben ser colores grisáceos con un ligero toque de azul. Cuanto más claros sean estos colores, el metal más parecerá plata o acero inoxidable mientras que con grises más oscuros parecerá más hierro o acero no tratado.

Otro truco para que estéticamente quede mejor es posicionar el degradado en diagonal de una esquina a otra. Así parece que el reflejo es más real y por tanto el resultado también.

Efecto oro

El efecto oro es igual que el efecto metal pero utilizando tonos amarillentos / anaranjados en lugar de grises azulados. Nuevamente, recomiendo un degradado lineal de al menos 5 posiciones. En este caso las posiciones 2 y 4 volverían a estar cerca del blanco. Las posiciones 1 y 5 yo las pongo del mismo color y la posición 3 la hago de un tono más intenso y algo más oscuro. En el ejemplo todos los tonos están muy cercanos al grado 47 del círculo cromático al diseñar en HSL

Algo notable con este efecto es que cansa con facilidad. Por lo tanto buscaría que los colores no sean demasiado intensos y dejar estos efectos de metal y oro para detalles o trazados.

Efecto recorte

El efecto recorte consiste en dar una sensación de pequeña tridimensionalidad porque hay objetos recortados y superpuestos. Lo más común para este efecto es buscar el efecto de papel o cartón recortado.

Como los anteriores, el efecto recorte también es muy rápido de hacer. Concretamente de 3 maneras:

Opción 1. Poniendo el efecto de sombra interior (inner shadow) al objeto del frente.

Opción 2. Recortando la forma sobre el fondo y poniendo sombra exterior (drop shadow).

Opción 3. Poniendo capas superiores con poca sombra exterior (drop shadow) sin desenfoque.

Para dar más notoriedad a este efecto se puede zigzagar la forma y así conseguiremos el efecto de papel recortado. Si además lo hacemos en varias capas, más realista será el efecto. 

Efecto aurora

El efecto aurora son luces desenfocadas. Por lo tanto también es súper rápido y sencillo conseguir este efecto. Cogemos un grupo de formas, les ponemos colores muy saturados como turquesas y magentas y difuminamos las formas con el efecto Layer Blur. 

Es recomendable que las formas sean círculos para que la masa de color sea la más grande posible. Pero también podemos hacer que algunas sean más alargadas para jugar con la relación y espacio que ocupa cada una. Si las formas están juntas, parecerán más las auroras boreales. Si están separadas, parecerán más luces desenfocadas. 

Efecto LED

El efecto LED consiste en aplicar una capa de luz resplandeciente para dar la sensación de que hay unas tiras o focos LEDs camuflados en el diseño. 

Este efecto es fácil de hacer pero no tan sencillo de que quede bien. Para que funcione, el fondo tiene que ser oscuro y por mi experiencia diría que no queda bien en todas las formas. Por eso, mi consejo sería limitarlo a formas básicas como cuadrados, círculos, etc. 

Conseguir este efecto es tan fácil como poner una sombra exterior (drop shadow) de color claro sobre fondo oscuro. 

Efecto neón

Conseguir el efecto neón no es demasiado complicado pero sí más elaborado que los anteriores. Para realizar este efecto vamos a necesitar tres capas de la misma forma. La capa de fondo para la luz exterior, la capa intermedia para el blanco de la luz del neón y la capa superior para la luz interior.

Capa de fondo: le ponemos el color que queramos que tenga la luz y le aplicamos un efecto de desenfoque de capa (layer blur)

Capa intermedia: la capa normal en color blanco

Capa superior: la capa normal pero con los bordes traídos hacia el centro para que se pueda ver la capa intermedia. A la superior, finalmente le tenemos que poner un poco de desenfoque de capa y reducir la opacidad.

Efecto 3D

El efecto 3D consiste en que los objetos parezcan tener volumen, que rompan lo plano de la interfaz y definan una perspectiva con el espacio para separarse del resto de objetos y acercarse al espectador.

La complejidad de este efecto va a depender de lo lejos que lo queramos llevar. No es lo mismo un objeto simple que uno complejo. Para formas simples, la complejidad será como para el efecto neón. Nada que nos lleve más de 5 minutos si todo está claro. También hay plugins que nos pueden ayudar a conseguir este efecto. Incluso si tienes una versión moderna de Illustrator, su opción 3D funciona muy bien para crear gráficos 3D. 

Sin embargo, si como yo quieres dar efecto 3D a tus diseños a tu manera, debes seguir estos paso:

1. Crear una forma que sirva de estructura al diseño. Las formas redondeadas facilitan la sensación de tridimensionalidad. 
2. Añadir los reflejos de luz. Quizá la opción con menos riesgo es luz al centro. Para conseguir este reflejo, hacemos un trazado o forma mucho más ligero que el original en color blanco y le aplicamos el efecto desenfoque de capa (layer blur).
3. Marcar las sombras. Las sombras siempre tienen que ir en dirección opuesta a la luz. Es decir, si la luz se refleja arriba, las sombras se reflejan abajo y si la luz se refleja al centro, las sombras se reflejan en el exterior. Para reflejar la sombra, añadimremos otro objeto con la forma original pero más ligero al que le adjudicaremos un color negro con poca opacidad y un desenfoque de capa  (layer blur).
4. Añadir una sombra exterior (drop shadow) que separe el objeto del fondo.

Importante es saber que para que el 3D se vea más real, ayuda mucho mostrar la perspectiva. Por lo tanto, si apostamos por complicarnos, conseguiremos mayor sensación de tridimensionalidad.

Efecto Parallax

El efecto parallax consiste en mostrar profundidad entre los objetos de la imagen a través del movimiento. Por ello, este efecto lo construiremos al prototipar, no al diseñar.  

Las claves para que funcione bien este efecto, son primero que las capas inferiores cubran también el espacio de las superiores y segundo, pero no menos importante, que las diferentes capas se muevan a diferentes velocidades. Esto es algo complicado de conseguir en Figma, la verdad. Pero se puede conseguir con paso intermedios o como veis en la animación de arriba, de forma discreta para indicar a desarrolladores.

Los pasos a seguir para crear el efecto parallax en Figma son los siguientes:

Primero, crear la composición final con los objetos colocados donde van a terminar.

Segundo, crear la composición inicial con los objetos colocados donde van a empezar. Recuerda que para que la velocidad de movimiento sea diferente, la posición inicial no debe ser proporcional. Es decir, unos objetos deben estar más lejos que otros respecto al punto en el que van a terminar.

Tercero, vincular la composición inicial a la final en prototipar con Smart Animate.