Cómo crear un degradado en Figma

Cuando no puedes decidirte por un color, los degradados son una excelente opción. En Figma, puedes crear varios fondos degradados, poner un degradado en una forma y un texto, crear degradados de trazo y mucho más. Incluso puedes crear degradados de malla con el efecto de desenfoque o con un complemento de degradado de malla de la comunidad Figma.

Dado que Figma tiene tantas formas diferentes de crear un degradado, los nuevos usuarios pueden tener dificultades para comprenderlas todas desde el principio. Por supuesto, experimentar es parte del proceso de aprendizaje, pero es mucho más fácil tener todas las instrucciones en un solo lugar. Y este artículo proporciona exactamente eso.

Cómo crear diferentes estilos de degradado en Figma

Figma ofrece varios estilos de degradado que puedes usar para rellenar fondos u objetos en el lienzo con múltiples colores.

• Lineal: los degradados lineales tienen dos colores que se combinan en una línea recta.
• Radial: con degradados radiales, el primer color comienza desde un solo punto y se mezcla con el otro en todas las direcciones.
• Angular: en gradientes angulares, puede determinar la dirección en la que se mueve el gradiente agregando ángulos. Es una excelente opción para crear imágenes en 3D.
• Diamante: como sugiere el nombre, los degradados de diamantes comienzan desde un punto y se extienden en forma de diamante.

Los pasos para crear cualquiera de estos estilos de degradado son los mismos. La única diferencia está en el estilo que selecciones. A continuación se explica cómo crear un diseño degradado en Figma:

1. Abra un archivo Figma en blanco.

   

2. Toque la «Herramienta Rectángulo» en la barra de herramientas izquierda.

   

3. Usando la herramienta, dibuje un rectángulo en el lienzo para usarlo como referencia de degradado.

   

4. Seleccione el rectángulo creado.

   

5. Haga clic en el color actual en «Relleno» en el panel derecho para abrir el selector de color.

   

6. Presione el menú desplegable y cambie el «Sólido» predeterminado al estilo de degradado que desee. Aparecerán dos paradas o cuadros de color.

   

7. Seleccione cada parada de color y elija el color que desea agregar al degradado.

   

8. Toque los cuatro puntos junto a «Rellenar» para guardar el degradado como estilo.

   

Después de eso, puede ajustar el valor de transparencia, colocar las paradas de color donde desea que termine un color y comience el segundo, agregar otra parada de color, moverlas en el lienzo o cambiar el ángulo del degradado. Cuando haya terminado de ajustar, guarde el degradado nuevamente (Paso 8).

Nota: Para eliminar una parada de color que agregó, seleccione la parada y presione «Eliminar» o «Retroceso» en su teclado.

Ahora puedes aplicar el estilo de degradado a cualquier objeto que desees.

Cómo crear un degradado de malla en Figma

Los degradados de malla son populares entre las grandes empresas y marcas. Si eres un usuario frecuente de Instagram, verás todos los días el logo de la aplicación. Por lo tanto, saber cómo crearlos puede resultar útil en situaciones en las que necesites añadir algo de interés a tus proyectos.

Como se mencionó, los degradados de malla se pueden crear con un complemento proporcionado por la comunidad Figma. Pero existe una forma más sencilla de agregar varios colores donde quieras en tu lienzo sin necesidad de herramientas externas.

A continuación se explica cómo crear un degradado de malla en Figma:

1. Ingrese un nuevo archivo Figma.

   

2. Crea un marco.

   

3. Marque la casilla «Recortar contenido» en el panel derecho para que todo lo que salga del marco se recorte.

   

4. Comienza a agregar varias formas o crea tu propio objeto con la herramienta «Pluma» dentro del marco.

   

5. Cambia el “Relleno” de cada nuevo formulario para que se diferencie del resto.

   

6. Selecciona todas las formas.

   

7. En «Efectos», presione el menú desplegable y seleccione «Desenfoque de capa».

   

8. Abra la configuración de «Desenfoque de capa» y aumente el valor hasta que ya no vea límites claros entre las formas.

   

9. Guarde el estilo como se muestra arriba y utilícelo en otros objetos.

Otra forma de crear un degradado de malla es mediante el estilo angular. Da un resultado fascinante ligeramente diferente pero igualmente interesante como el primer tutorial.

Esto es lo que debes hacer:

1. Abre un lienzo en blanco.

   

2. Utilice la forma que desee y agréguela al lienzo.
3. En «Relleno», cambie «Sólido» a «Angular».

   

4. Elige los colores para el degradado.

   

5. Ajusta el ángulo y otros aspectos del degradado.

   

6. Añade otra forma, preferiblemente «Eclipse», es decir, un círculo.

   

7. Colócalo encima de la otra forma en el lienzo.

   

8. Agrega un degradado lineal y cambia el color por uno que combine bien con el resto.

   

9. En «Efectos», utiliza el efecto «Desenfoque de capa» y difumina las líneas de la nueva forma para fusionarla con la primera.

   

Cómo degradar una imagen en Figma

Además de crear un degradado, también puedes superponer una imagen existente con un degradado para agregar algo de dimensión. Le da un efecto de «desvanecimiento» o la ilusión de una fuente de luz invisible que brilla sobre la imagen desde el exterior.

A continuación se explica cómo agregar un degradado a una imagen en Figma:

1. Abra un nuevo archivo en Figma.

   

2. Arrastre y suelte la imagen a la que desea agregar el degradado en el lienzo.

   

3. Agrega una forma que coincida con el tamaño de la imagen en la parte superior.

   

4. Seleccione un estilo de degradado en la sección «Relleno».

   

5. Elija los colores del degradado en el selector de color.

   

6. Ajusta la opacidad, el ángulo, etc.

   

También puedes usar la herramienta «Plumilla» y dibujar una forma en el área donde quieres que esté el degradado.

Cómo degradar un texto en Figma

Crear un degradado en un texto en Figma es bastante similar a cómo crear un degradado para cualquier otra forma. Aquí están los pasos:

1. Abra un nuevo lienzo en Figma.

   

2. Presione la herramienta «Texto» en la barra de herramientas de la izquierda.

   

3. Haga clic en cualquier parte del lienzo y comience a escribir.
4. Seleccione el texto y vaya a «Rellenar».

   

5. Elija el estilo de degradado.

   

6. Presione cada cuadro de color y busque el color que desea agregar al degradado.

   

Preguntas frecuentes

¿Cuántos colores puedo agregar a un degradado en Figma?

Puede agregar tantos colores como desee en los estilos de degradado Figma estándar y de malla. Pero trate de no exagerar. Dado que los degradados tienen múltiples colores de transición, más de cinco pueden ser demasiados, incluso para un degradado de malla.

¿Puedo importar un degradado a Figma?

Puedes importar cualquier degradado que quieras a Figma. Por ejemplo, puede pegar código de CSS (hojas de estilo en cascada) abriendo el panel «Código» y pegando el código. También puedes importar degradados desde Adobe Illustrator.

¿Dónde puedo encontrar degradados Figma gratuitos?

Puedes encontrar gradientes de Figma gratuitos y de pago en la comunidad de Figma . Presenta una gran cantidad de diseños magníficos y únicos creados por usuarios de Figma. Puede filtrar por complementos, archivos y widgets. Simplemente escribe «degradado» en la barra de búsqueda en la parte superior y encuentra el que te guste.

Ponte moderno con degradados coloridos

Los degradados son una excelente manera de hacer que un diseño sea distinto y personalizado. Y Figma te permite realizar una transición suave entre dos o más colores que elijas. Sin embargo, no te excedas. Mezcla colores que combinen bien y trata de permanecer dentro de la misma paleta de colores.

¿Ya has intentado hacer un degradado en Figma? Cuéntanos en los comentarios a continuación qué estilo de degradado usaste y para qué lo usaste.