No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Guía de Colores en Figma

11/26
Recursos

Aportes 17

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

La página que Teff nos recomienda en el curso al parecer ya no existe. Les comparto este otro recurso: Customizing Colors - Tailwind

Esta clase se base en una herramienta que ya no esta disponible y por ello les traigo algunas alternativas:

Color shades - figma plugin: ideal para crear las variaciones de color con solo seleccionar un color base, yo termine usando este en lugar del de material design cuando estaba disponible (era muy compleja y necesitaba algo mas rapido)

Color mind - generador de paletas de colores para UI y web design, lo uso bastante aunque algunas veces recomienda variaciones de colores de las que no te da información, muy buena para comenzar (Búsquenla en google como colormind .io, que olvidaron el certificado ssl)

**Real time colors **- Otro generador de paletas en tiempo real pero a mi parecer mas moderno para web design

**Happyhues **- Mas paletas de colores en tiempo real pero además cumpliendo con a11y

Este es al trabajo para un cliente actual
![](

Por si no encuentrna el color picker the material design: https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors

https://colorhunt.co/
Esta pagina también podría ayudar para escoger la paleta de colores.

DATO: Nunca utilizar el Valor Negro puro en las interfaces, generalmente se utiliza el gris mas oscuro. Esto es para no generar sobrecarga cognitiva en el usuario.

¡Para elegir color!:

https://colordesigner.io/

**Les recomiendo un complemento de Figma llamado "Foundation: Color Generator".** Este complemento te permite: * **Visualizar las escalas de color y verificar si cumplen con los valores de contraste.** * **Agregar los estilos como tokens a tu proyecto sin necesidad de hacerlo manualmente.** * **Seleccionar colores de acuerdo a varios sistemas de diseño, como Atlassian, Material Design, Material y Orbit.** **Beneficios de usar Foundation: Color Generator:** * **Ahorra tiempo y esfuerzo al crear y gestionar paletas de colores.** * **Garantiza la accesibilidad y el contraste adecuado en tus diseños.** * **Mantiene la coherencia visual en tu proyecto.** * **Facilita la colaboración entre los miembros del equipo.**
<https://www.materialpalette.com/colors> talvez ayude este
Para los que quieren seguir la tendencia Neo Brutalismo : <https://www.happyhues.co/>
Veo que muchos no encuentran el recurso. Aquí se los dejo: <https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors> ![](https://static.platzi.com/media/user_upload/image-ae3455e7-818e-4a2c-86e7-2facfee33a33.jpg)
Este es el trabajo que actualmente estoy desarrollando ![](https://static.platzi.com/media/user_upload/image-2db5ce8a-4f95-46e3-851b-45279150fed1.jpg)

Esta clase se complementa muy bien con varias otras que están en los cursos de “Accesibilidad Web”, “Figma: Prototipado e Interfaces” y “Figma: Técnicas Avanzadas de Diseño”.

Acá mi trabajo terminado, ya con colores elegidos y probados

con shift + teclas direccionales mueves objetos más rápido.
en windows

Recursos para colores con Material Design:
https://m3.material.io/styles/color/overview