Cómo crear degradados en Figma

 

Como ya os dijimos en el post de degradados con Photoshop los degradados siempre vuelven y son un gran recurso para diseñar tu web, tus banners o para crear publicaciones en tus redes sociales.

Por eso hoy te vamos a contar cómo conseguir degradados en Figma. Verás que son muy fáciles de hacer y quedan genial.

En este post aprenderás a crear una forma sólida y a aplicarle un degradado. En primer lugar aprenderás a utilizar el degradado lineal, que es el que más utilizamos nosotros, pero también verás que se puede hacer el degradado radial, angular o en forma de diamante.

No solo te voy a explicar cómo hacer un degradado, sino también cómo utilizarlo.

¿Estás lista para descubrir cómo hacerlo? ¡Vamos allá!

 

PASO 1: Decide el formato de trabajo

En nuestro caso queremos hacer degradados para utilizar de fondo en nuestros stories de instagram. Para eso abrimos un archivo nuevo y creamos un rectángulo de 1080px de ancho por 1920px de alto.

 

 

PASO 2: Selecciona los colores para el degradado

Para saber que colores quieres utilizar en tu degradado antes debes saber si quieres trabajar con colores del mismo tono pero pasando de un tono más claro a otro más oscuro o si lo quieres hacer con distintos colores.

 

 

Piensa que hacer un degradado es generar una transición de tonos desde un color al otro. Para que tu degradado sea agradable debes hacer una buena selección de colores. Casi todo dependerá de eso.

 

PASO 3: Hacer el degradado

Para este degradado nosotros vamos a utilizar fucsia y lila.

El primer paso para generar el degradado es hacer clic en el color del rectángulo que has generado.

 

 

Verás que arriba del recuadro que te aparece tienes un menú desplegable en el que pone “Solid”. Haz clic en la flecha hacia abajo para desplegar el menú y selecciona “Linear”, que es la forma lineal del degradado.

Una vez hayas hecho clic te aparecerá directamente un degradado con el color que tienes de fondo y transparente.

 

 

Ahora es el momento de que selecciones el cuadrado de color de arriba que quieres modificar y con el selector de colores de abajo lo escojas, o directamente introduzcas tu color hexadecimal donde pone “Hex”.

 

 

Cuando ya tienes tus colores introducidos, los puedes mover desde la barra superior para que un color ocupe más parte que el otro.

 

 

También los puedes mover desde la barra que te aparece encima del rectángulo.

 

 

En caso de querer que el degradado lineal se muestre en diagonal, de izquierda a derecha o en cualquier otra posición, puedes mover el degradado haciendo clic sobre una de sus esquinas, y manteniendo pulsado deslizas hacia donde la quieras posicionar, y lo mismo para la otra esquina.

 

 

PASO 4: Cambiar la forma del degradado

Si quieres cambiar el tipo de degradado puedes volver a hacer click en el menú desplegable superior, donde en este caso pone “Linear” y seleccionas “Radial”.

 

 

Verás que al hacer click se te cambia directamente el tipo de degradado, pero también lo puedes modificar de la misma manera que el anterior.

Si te fijas hay una bolita blanca en el centro del lateral izquierdo del rectángulo. Si la seleccionas y mantienes pulsada a la vez que deslizas hacia la izquierda o la derecha verás que el color de dentro se ensancha o se hace más pequeño.

 

 

También existen otros tipos de degradado como el angular y el degradado en forma de diamante. Nosotros en el estudio no los utilizamos mucho pero te vamos a mostrar como quedan.

 

 

Y hasta aquí llega este tutorial de degradados en Figma. Esperamos que puedas crear infinidad de degradados siguiendo los pasos que te hemos mostrado.

Aquí tienes el resultado de nuestro stories.

 

 

Ahora es tu turno, ponte a crear sin límites. 

Saber qué combinar con acierto es muy importante para que no te quede un degradado cutre. Para ayudarte te dejamos aquí un post en el que te damos ideas de cómo combinar los colores de tu marca.

No tengas miedo a probar combinaciones, seguro que sacas alguna interesante.

¡Déjanos saber que te ha parecido este post y dinos si quieres saber más sobre degradados!

Si todavía no sabes utilizar Figma aquí tienes un post de introducción. Cuando antes empieces más partido le podrás sacar a nuestra serie de posts sobre Figma. ¡Anímate!

Share on facebook
Share on twitter
Share on pinterest
Share on google
Share on linkedin
Share on whatsapp

MINICURSO GRATIS PARA CREAR TU PROPIA WEB CON WORDPRESS

Y dos ebooks para mejorar el diseño de tu identidad corporativa y lanzamiento de tu página web.

Deja tu comentario

Tu dirección de correo electrónico no será publicado. Los campos obligatorios están marcados como *



Existe un método muy sencillo para que consigas crear tu propia web sin necesidad de tener ni idea de programación, partiendo de un diseño web maquetado por diseñadoras, sin necesidad de pagar miles de euros para contratarlas.

Tenemos un minicurso para
crear tu propia web
paso a paso

En este curso gratuito explicamos una pequeña porción de todo lo que hemos aprendido durante nuestros años de experiencia.

Además, recibes dos ebooks adicionales para mejorar tu identidad corporativa y página web.

Existe un método muy sencillo para que consigas crear tu propia web sin necesidad de tener ni idea de programación, partiendo de un diseño web maquetado por diseñadoras, sin necesidad de pagar miles de euros para contratarlas.

Tenemos un minicurso para
crear tu propia web
paso a paso

En este curso gratuito explicamos una pequeña porción de todo lo que hemos aprendido durante nuestros años de experiencia.

Además, recibes dos ebooks adicionales para mejorar tu identidad corporativa y página web.