Colores en Figma

Clase 8 de 25 • Curso Básico de Figma - 2022

Clase anteriorSiguiente clase

Yocselys Bermúdez

student•

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

ISAAC DANIEL ATAUCURI YNFANTE

student•

Te quedó super!!!

Javier Alfonso Maria Salas

student•

Me encanta 🥰

Yoyman Manuel Castellar Miranda

student•

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

Carlos Corona Pestana

student•

Está genial!

JAIRO SALAZAR CASTAÑO

student•

Esta super!

Sergio Cuevas

student•

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 :D

Josue Cerron Tuesta

student•

Gracias bro!

Luis Herrera

student•

Ufff gracias colorhunt esta groserisima :D

German Pinilla

student•

++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.

Pablo .

student•

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

Josue Cerron Tuesta

student•

Gracias bro!

Karla Lorena

student•

Muchas gracias!

Génesis Quintero

student•

poco a poco. :)

Mateo Zarate

student•

Excelente profesor y excelente curso hasta ahora, felicitaciones!

Sebastián Andrés Sanhueza Tapia

student•

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

Sebastián Andrés Sanhueza Tapia

student•

Los colores grises son Negro 100 - 37352F Negro 50 - 878682 Negro 10 - E6E6E6 Fondo - FFFFFF

Haber Alexander Barinas Vega

student•

Rubén Ernesto Aragón Gil

student•

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/

Monica Ortiz Alvarez

student•

Franco Vagni

student•

Trabajazo!!!

Rodrigo Reyes

student•

No me esta gustando este curso 😥😭

Edhu Nuñez Alvarado

student•

¿Por qué?

Xiomara Alejandra Hernández Arzola

student•

pooorqueeeee :( Ya tienes experiencia con el uso de Figma? Personalmente ando en 0 con este tema y me esta ayudando un monton

Lucemar Quintero Laguado

student•

Practicando andamos.

ISAAC DANIEL ATAUCURI YNFANTE

student•

Genial!!!

Génesis Quintero

student•

te amo, sigue asi.

Henry J. Perez

student•

Asi va quedando

Alexis Cova

student•

Miguel David Isaac Leiva Cid

student•

está preciosoooo

Daniel Andriy Carrillo Marulanda

student•

Mi proyecto so far

Mariana Gómez

student•

Jimena Haran

student•

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 😮

Joao Ivan Garduño Salgado

student•

David Valencia Naranjo

student•

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

ISAAC DANIEL ATAUCURI YNFANTE

student•

EXACTO

Colores en Figma

Introducción

¿Para qué sirve Figma y por qué elegirlo?

Interfaz en Figma

Básicos

Configuración de guías y retículas

Creación de textos y estilos

Figuras e imágenes en Figma

Efectos en Figma

Redes de Vectores

Colores en Figma

Combo

Importar y exportar

Cómo crear guías de estilo

Auto-Layout

Los 15 mejores atajos para trabajar en Figma

Creación de componentes reutilizables: clase teórica

Creación de componentes reutilizables: clase práctica

Playground: Practica la creación de componentes reutilizables

Prototipado

Prototipado simple: interacción de scroll

Prototipado simple: conexión de diferentes frames

Prototipado avanzado: smart animate y componentes Interactivos

Co-Creando

Cómo agregar comentarios a los diseños

Historial de versiones en Figma

Librerías de estilos y componentes

Superpoderes

FigJam

Uso de plugins en Figma

Community: proyectos open-source y perfiles

Cierre

Proyecto final del curso de Figma