Si eres nuevo en este campo de la interfaz de usuario y buscas cómo crear un degradado de color lineal en Figma para tu botón o cualquier otro diseño, entonces estás en el lugar correcto.
Aquí, en esta breve publicación, vamos a aprender cómo crear colores degradados para nuestro objeto, digamos Botón, así que comencemos.
Lo primero es abrir el archivo Figma en blanco y agregar un marco de escritorio simple. Después de eso, agregue el rectángulo de estas propiedades.
Ups… ¿lees esto por primera vez? No te preocupes, ya hice una publicación de introducción para Figma. Simplemente haga clic a continuación para conocer Figma.
Después de esto, tu diseño se verá así.
Ahora haz que las esquinas de nuestro rectángulo sean circulares para que se vea más atractivo. El valor 25 es suficiente para el botón. Ahora agregue un campo de texto en el botón (presionando T) y agregue el texto “Iniciar sesión” para que nuestro botón se vea así.
Ahora la parte importante. Seleccione el botón y haga clic en el color debajo de la sección Relleno. Aparecerá un mensaje de selección de color.
Como puede ver, la selección predeterminada es Sólida. Cámbielo a Lineal. Ahora aparecerán dos cuadros en nuestro botón. Como puede observar, el color predeterminado de nuestro botón cambia a tonos.
Ahora haga clic en el cuadro superior y establezca el color en #F6734A y para el rectángulo inferior establezca el color en #FDAC14 y cambie la visibilidad al 75% para que nuestro diseño se vea así
Si desea aplicar el degradado horizontalmente, simplemente lleve el cuadro superior al lado izquierdo del botón horizontalmente y el cuadro inferior al lado derecho del botón. Así como esto.
Eso es todo. Ahora el consejo extra. Si desea agregar más degradado para el mismo botón, simplemente haga clic en la línea entre dos cuadros de degradado y agregará tantos cuadros como desee. Aquí estoy agregando el tercer degradado a nuestro botón de color #CC6AFA y se verá así.
Del mismo modo, puedes aplicar esta técnica a cualquier forma como lo hice yo.
Eso es todo. Ahora ya sabes cómo aplicar un color degradado en Figma. ¿Te gustó lo que acabas de leer o aprender? Déjamelo saber en la sección de comentarios. Además, conectémonos en Linkedin.
Volveremos con algunos trucos interesantes hasta entonces. Mantente conectado. Manténte feliz. Mantenerse seguro. Sigue aprendiendo.