Colores en Figma

Me adelante un poco colocando los colores, acá hice el ejercicio de extraerlos de las imagenes de inspiración.

Apropósito del mundial 😄, ahí voy poco a poco poniendo en práctica lo aprendido. Recibo cualquier tipo de feedback.

Sitios web donde encontraras una alternativa para crear e utilizar paletas de colores para tus aplicaciones:
https://colorhunt.co/
https://coolors.co/
https://color.adobe.com/pt/create/color-wheel

Espero que sea de ayuda 😄

Colores en Figma

Seleccion de colores
Como estamos trabajando sobre un espacio de digital, en lo que estamos
trabajando realmente es sobre luz, y la luz esta compuesta solamente
sobre tres colores: Rojo, azul y verde. Todos los colores que vemos son
una combinacion de esos tres colores, el negro es la ausencia de esos
colores y el blanco son todos los colores al mismo tiempo.

Seleccionar un color
La manera mas facil de seleccionar un color, es tomar una figura, un texto
o un objeto que tenga una propiedad de relleno y oprimir la tecla (i) y
desplazarnos hasta el menu de herramientas y seleccionar el color que se
desea, en algunos casos el conocido fill.

• Objeto seleccionado
• Panel de propiedades
  • Fill
  • Stroke
  • Effects
    • Detalle
• Herramienta “eye dropper”(i)

Gradientes
Es un espacio de trabajo de trabajo que no tiene un solo colo solido sino que
tiene diferentes puntos en los que varia el color en transicion de colores.
Esto es mucho mas natural para el ojo humano ya que este tipo de tranciosiones
se pueden apreciar en la naturaleza, como por ejemplo un atardecer o tambien en
alguna obra de arte que contenga este tipo de gradientes.

Creando un gradiente

• Objeto seleccionado
• Panel de proiedades
  • Fill
  • Stroke
• Seleccionar gradiente
  • Linear
  • Radial
  • Angular
  • Diamond

Crearemos la paleta de colores de nuestra aplicacion de notas, que si esta muy basada
en tonos grises ya que no queremos llamar demasiado la atencion pero si deberia tener
algunas caracteristicas:

• 3 grises para informacion
• 4 colores de resalte para diferentes estados (informacion, advertencia y exito).
• Todos organizados como estilos en nuestro archivo y aplicados a la nota creada.

Comparto esta página que indica rueda de colores, es un generador de paleta de colores que puede servirles.

poco a poco. 😃

Excelente profesor y excelente curso hasta ahora, felicitaciones!

Sí quieren usar los mismos colores que el profesor, aquí están:
Azul - 028ECB
Verde - CCEC41
Amarillo - FCDB00
Rojo - F2080B

Les recomiendo estos videos del curso de las teorías de colores para Developers.

Curso de Diseño para Developers

https://platzi.com/clases/1906-diseno-programadores/28560-teoria-del-color/

https://platzi.com/clases/1906-diseno-programadores/28561-paletas-de-color/

No me esta gustando este curso 😥😭

Practicando andamos.

Asi va quedando

Mi proyecto so far

En mi caso no usé una imagen de inspiración, usé una paleta de colores que combinaba, pero extraje los colores de mi propia creación para hacer "la tarea"
Me gustó mucho la herramienta de extracción de colores, no sabía que existía en figma 😮

Esto de seleccionar el color de la imagen es brutal, se ve cada cuadro con su color.

Mis colores pasteles

Información resumida de esta clase
#EstudiantesDePlatzi

• Aprendimos unas bases importantes en Figma

• La luz esta compuesta de rojo, verde y azul

• El negro es al ausencia de color o luz

• Para nuestros proyectos es importante definir la paleta de colores

• Ctrl + D = Repetir ultima acción

• Con la letra “i” puedo ver una herramienta llamada Eyedropper que me permite hacer un tipo de Zoom para escoger un color

• Puedo crear estilos de colores para usarlos rápidamente y así mismo agrupar en carpetas los estilos que deseamos

• Importante ser consistente con los estilos de mi proyecto

La unificación es la madre de toas las soluciones y la escalabilidada y adaptación de los diseños

Este es mi practica con Figma

Que opinan?

Una manera rápida de crear las carpetas y guardar los estilos es,

• al momento de nombrarlo primero ponemos en nombre de la carpeta, luego un slash (/) y luego el nombre del estilo, así:

• Grises/100

• Grises/50

• Grises/10

Me encanto que saco los colores de la naturaleza 😄, siempre batallaba para escoger un tono de un color

Sería una buena app 🤔😅🤭

Todavía no me he puesto a inventar porque quiero ver qué onda con lo de los colores de resalto

Este es mi clase de extracción de colores

• Colores en Figma

  Como todos los espacios digitales, estamos trabajando sobre luz, que esta compuesta en base a tres colores al azul el verde y el rojo, todo los demás es la combinación y ausencia de cada uno

  Gradientes

  Una gradiente en Figma es una transición suave entre dos o más colores.

  Se utiliza para agregar profundidad y dimensión a los objetos en un diseño.

  En Figma, puedes crear gradientes lineales o radiales y ajustar la dirección, la posición y los colores de la gradiente según tus necesidades

  Para crear una gradiente en Figma, sigue estos pasos:

  1. Selecciona el objeto al que deseas aplicar la gradiente.
  2. Haz clic en el botón “FILL” en la barra de herramientas a la derecha de la pantalla.
  3. Selecciona el tipo de gradiente que deseas crear: lineal o radial.
  4. Ajusta los colores y la posición de los puntos de la gradiente según tus necesidades.
  5. Si deseas ajustar la dirección o el ángulo de la gradiente, utiliza los controles en el panel de relleno.

  Recuerda que puedes ajustar la opacidad y el modo de fusión de la gradiente en el mismo panel de relleno.

Mi proyecto ![](

Paleta de colores:

Inspirado en el juego de cartas de digimon, en donde se pueda ver de que trata el juego y puedas armar tus decks, sus colores principales quedaría algo así c:

Me encanto esta clase!!!

Colores en Figma

Seleccionando un color

• Objeto seleccionado
• Panel de propiedades
  • Fill
  • Stroke
  • Effects
• Detalle
• Herramienta “Eyedropper” (i)
• Objeto seleccionado
• Panel de propiedades
  • Stroke
  • Diamond
• Seleccionar Color
  • Linear
  • Radial
  • Fill
  • Angular

Negro 100: 37352F
Negro 50: 878682
Negro 10: E6E6E6
Blanco: FFFFFF
Azul: 028ECB
Verde: CCEC41
Amarillo: FCDB00
Rojo: F2080B

Vamos avanzando en el proceso

El mejor experto también fue un día Aprendiz

con la letra " i " podes hacer magia

Me encantó esta clase! Una super ayuda para tener todos tus recursos de color agrupados y alineados, además que si ocupas modificar alguno, solo con editarlo se cambia a todos los elementos aplicados. Súper!

Super curso! me ha gustado mucho como explica Santi, es uno de los mejores profes sin duda!

Aplicando la extracción de colores con una imagen, que me parecio graciosa xD

Creo que voy aprendiendo XD jeje

![](

Me alegra saber que Figma es casi igual que Illustrator, así que se me está haciendo super fácil.
Que buen curso y Santiago explica súper bien.

¡Que chevere!, me gusta el curso y la forma de explicar profesor.

Anteriormente había tomado un curso de Figma donde enseñaban buenas prácticas desde el inicio, y he seguido el curso con lo que ya sabía y aprendiendo de lo nuevo. Hasta ahorita va bien.

Así mi aporte:

Un Gradiente de color es un espacio de trabajo que no tiene un color sólido, sino que tiene una transición entre dos o más colores, sin que se vea una línea de cambio entre uno y otro sino que es difuminado.
Hay que tener cuidando al utilizar gradientes y no abusar de ellos (no usar demasiados) para que nuestras interfaces se vean de alta calidad y que tengan accesibilidad (cuidando aspectos de personas con alteraciones visuales o defectos de la vista).

Que buen curso 😃

Qué genial es la opción de crear estilos de color y texto. Imagino que se ahorra mucho tiempo al momento de diseñar interfaces y tener muchas pantallas.

Excelente clase

Recomiendo esta página herramienta de Adobe para diseñar y guardar paletas de colores

Vamos bien… Muy buen curso, toca paso a paso.