Analiza cómo está construida la base
La publicación n.º 644 muestra ocho combinaciones para Figma. El principio común son varios Radial Fill, no un solo degradado con una larga lista de puntos de distintos colores. Cada relleno crea una zona suave independiente.
Para el ejercicio, utiliza un rectángulo de esquinas redondeadas y una base clara tranquila. Reproduce primero la combinación «Мятный свет» (Luz menta) y después cambia los colores. Será más fácil entender qué depende de la paleta y qué depende de la posición de los centros.
En la instrucción original, cada capa radial tiene dos puntos extremos: un color con opacidad del 100% y el mismo color con opacidad del 0%. El borde semitransparente permite que las capas se superpongan sin crear franjas duras.
Los colores del primer ejemplo
La tarjeta «Мятный свет» indica tres colores y sus posiciones aproximadas. Conserva esos valores en el primer ejercicio para comparar el resultado con el original en vez de elegir todo a la vez.
- #A4FCF5: capa menta, centro arriba a la izquierda.
- #CDAFFA: capa lila, centro arriba a la derecha.
- #F7CBBF: capa melocotón, centro abajo a la izquierda.
Primero configura la capa menta desde el color pleno hasta la transparencia. Después añade lila y melocotón con la misma lógica. Comprueba que el punto transparente conserve el color de su capa, como indica la tarjeta original.
Mueve el centro en vez de añadir colores nuevos
Si la mancha intensa queda justo en el centro y parece demasiado dura, desplázala hacia el borde de la figura. La publicación permite situar el centro ligeramente fuera del rectángulo. Así dentro queda una parte más suave de la zona de color.
Cambia un parámetro cada vez. Primero la posición del centro, después la extensión de la transición y, si hace falta, la opacidad. Mover las tres capas a la vez hace difícil entender la causa del resultado.
Si la última capa tapa por completo las demás, revisa su borde transparente y el tamaño de la zona de color. Añadir un cuarto color no arreglará un relleno que ya se ha vuelto casi uniforme.
Prueba otra combinación
Repite el procedimiento con el segundo ejemplo usando los valores de su tarjeta. Compara la posición de las manchas de color, no solo el tono general. Dos degradados pueden tener colores parecidos y una distribución de la luz completamente distinta.
Los ocho ejemplos están en la colección gratuita de degradados suaves. Aquí no hace falta un prompt de texto: el recurso muestra acciones directamente en el editor gráfico.
Usa el degradado detrás del texto
Coloca un texto corto sobre la base y compruébalo en cada zona de color. El contraste debe evaluarse donde esté realmente el texto. Que se lea bien sobre el lila no garantiza lo mismo sobre la menta más clara.
Si el fondo estorba, aleja el centro de color del texto o suaviza esa capa concreta. No necesitas oscurecer toda la base. Para una tarjeta de interfaz, guarda una versión con texto y otra sin él para ver cómo funciona el fondo en la composición.
El resultado del ejercicio es una base editable cuya construcción entiendes. Puedes adaptarla al color del proyecto sin buscar otra imagen: la estructura de capas permanece y cambian los valores y la posición de las zonas de color.
Recursos para tus próximos diseños
El Pack para diseñadores incluye fondos, texturas y otros recursos para montar diseños. Puedes abrir por separado la colección gratuita de degradados y empezar reproduciendo una de sus versiones.