Degradados en Figma: consejos para resultados más suaves

Para hacer un degradado en Figma, selecciona una capa, haz clic en la muestra de su relleno y cambia el tipo de relleno de Sólido a Lineal, Radial, Angular o Diamante. Aparecen tiradores en el lienzo: arrástralos para fijar la dirección y el alcance de la mezcla, y haz clic en la barra del degradado del selector para añadir paradas de color. Eso lleva segundos. Lograr que se vea suave, rico e idéntico cuando llegue al código lleva algunos hábitos más, y de eso trata esta guía.

Los cuatro tipos de degradado en Figma

El lineal sirve para la mayoría de fondos y botones. El radial, para brillos y focos. El angular dibuja ruedas de color, diales y reflejos metálicos. El diamante rara vez hace falta; da un brillo facetado en cuatro direcciones que luce distintivo en ilustración, pero que en la web tiene que convertirse en un mapa de bits. Para saber cómo se comporta cada tipo en el diseño en general, mira los tipos de degradados.

Manejar el editor de degradados

1. 1

   Fija la dirección con los tiradores

   Un tirador marca dónde está el primer color, el otro dónde está el último. Arrastra el tirador final más allá del borde del marco para una mezcla más suave, o acércalo para una más corta e inclinada.

2. 2

   Añade paradas en la barra

   Haz clic en cualquier punto de la barra del degradado del selector de color para añadir una parada y dale un color. Selecciona una parada y pulsa Suprimir para quitarla.

3. 3

   Usa la opacidad de las paradas para los desvanecidos

   Cada parada tiene su propia opacidad. Desvanecer un color hasta 0% de opacidad permite que un degradado se superponga a una foto o a otro relleno.

4. 4

   Apila rellenos

   Una capa puede tener varios rellenos. Añade un segundo degradado sobre el primero, con zonas transparentes, para superponer un brillo a una mezcla de base.

5. 5

   Guárdalo como estilo

   Guarda el relleno terminado como un estilo de color para que todo el equipo use el mismo degradado. Las variables de Figma no guardan degradados, pero los estilos sí.

Arreglar los centros grises y las mezclas turbias

Figma mezcla las paradas de color directamente, muy parecido a como lo hace CSS por defecto, y no tiene opción para mezclar en un espacio de color perceptual. Una mezcla larga entre tonos distantes, como de azul a naranja o de azul a amarillo, se hunde en gris en el centro. La solución es una parada intermedia: elige el color que quieres que tenga el punto medio, normalmente un tono intermedio más vivo, y añádelo a mano. Degradados turbios explica la teoría del color.

Degradados tipo malla en Figma

Figma no tiene una herramienta de degradado de malla, pero una versión convincente se construye rápido. Dibuja cuatro o cinco elipses en tus colores, superpuestas, dentro de un marco con fondo oscuro o claro. Agrúpalas, aplica al grupo un gran desenfoque de capa y recorta el contenido del marco. Mueve las elipses para reequilibrar el color. Es la misma idea que la técnica en capas de los degradados de malla en CSS, y degradados de malla cubre el lado de diseño.

Añadir grano para ocultar las bandas

Los degradados suaves exportados como PNG o JPEG de 8 bits pueden mostrar escalones visibles, sobre todo en desvanecidos oscuros y lentos. Una ligera capa de ruido los rompe. Las versiones recientes de Figma incluyen opciones de ruido y textura en el panel de efectos; si no, coloca sobre el degradado una imagen de ruido en mosaico con un modo de fusión como Superponer o Luz suave con poca opacidad. Bandas en degradados explica por qué funciona, y degradados con grano por qué además se ve mejor.

Exportar y hacer coincidir los degradados de Figma en CSS

En Dev Mode o en el panel Inspect, Figma muestra el CSS de los rellenos degradados. Tómalo como punto de partida y comprueba tres cosas. Primero, el ángulo: los tiradores que arrastraste en un marco no cuadrado pueden traducirse en un ángulo que no habrías elegido, así que redondéalo a un valor limpio. Segundo, el perfil de color: si tu archivo usa Display P3, los mismos valores hex pueden verse distintos en un navegador sRGB. Tercero, los rellenos apilados: se convierten en degradados separados por comas, con el relleno superior de Figma en primer lugar.

/* Figma: linear fill, #0f172a to #4338ca to #a5b4fc, top left to bottom right */
.hero {
  background-color: #0f172a;
  background-image: linear-gradient(135deg, #0f172a 0%, #4338ca 55%, #a5b4fc 100%);
}

/* Figma: angular fill */
.dial {
  background-image: conic-gradient(from 0deg, #0ea5e9, #a855f7, #f43f5e, #f59e0b, #0ea5e9);
}

Para imágenes, exporta a 2x para resultados nítidos en pantallas de alta densidad, y prefiere PNG para degradados con transparencia. Para degradados que deban seguir siendo vectoriales, la exportación SVG escribe los rellenos lineales y radiales como degradados SVG; mira degradados SVG para entender lo que obtienes. Los rellenos diamante, las mallas desenfocadas y el ruido siempre salen como píxeles.

Si haces muchos fondos degradados para publicaciones sociales, presentaciones y banners, una herramienta que renderiza el mismo material en cada tamaño te ahorra reexportar. En Gradiently, un Mark se renderiza en vivo en cada formato en lugar de recortarse de una sola exportación.