Como crear paletas de color UI | Creando un design system en Figma
HTML-код
- Опубликовано: 30 июл 2024
- En este video vais a aprender cómo crear una paleta de color para vuestras interfaces con Figma.
¡Aunque uséis plugins o herramientas no os olvidéis de ajustarlos a mano!
El video es teoría, no tenéis que usar los números que he usado, es para que os hagáis una idea cómo se hace. De hecho hay algunos errores, ¿Podéis verlos?
Kudos a UX Tools por su video sobre cómo crear paletas de color, me ha servido de referencia • How I make UI color pa...
Si te ha gustado el vídeo suscríbete y dale a like!
_________________
Recursos
Plugin Foundation Color Generator - www.figma.com/community/plugi...
Scale - Página para crear paletas
hihayk.github.io/scale/
También os dejo otras páginas que suelo usar:
Colorbox es similar a Scale - colorbox.io/
Coolors te ayuda a buscar inspiración - coolors.co/
Y Adobe Color sirve para hacer investigación de paletas color.adobe.com/es/create/col...
00:00 Introducción - ¿Cómo funcionan los colores?
02:04 Colores primarios
05:24 Colores secundarios
08:19 Colores neutrales
09:56 Recursos para crear colores rápidamente
Gracias por el video Felipe! Muy top el plugin, no lo conocía y ya lo estoy utilizando!!
Excelente explicacion, gracias!
excelente explicación
This is good, exactly as I've been doing!
Loved thr video 🎉
GRACIAS FELIPE
Deberias crear mas redes sociales instagram, Twitter para que allí tu contenido también sea visible
Gracias! Actualmente tengo twitter e insta, pero no hago mucho contenido por allí, qué te gustaría ver? 👀
@@jesusandressanchez5668 En mi opinión, el mayor error que puedes cometer es solo aprender teoría. UX/UI se aprende creando productos digitales, probándolo con usuarios reales y mejorando cada día!
Hola Felipe, que tal,?? genial el video, ahora con la actualizacion de figma sabes como eliminar los colores guardados como estilo ? estoy dando vueltas y no lo soluciono saludos
¡Buenas! Tienes que pulsar en el fondo (deseleccionar lo que tengas seleccionado) y seleccionas el estilo. Click derecho y le das a eliminar. Dime si te funciona 😊
Por que hay que crear nueve tonos distintos de cada color? Y por que se nombran de 100 en 100? No llego a entender que significa esa nomenclatura.
Buenas Giuliana, los números es algo común que popularizó Material Design. Creo que tiene que ver con el típico font name que usa también 100,200,… la verdad que puedes llamarlos como quieras, a mi me encaja esa forma ya que así puedo darle una escala numérica. Lo de nueve tonos es para tener versatilidad, puedes usarlos y luego en un tiempo eliminar los que no uses. Yo almenos te aseguro que utilizo casi todos en mis diseños, ya que luego siempre hay detalles.
Muy interesante el vídeo, gracias por ofrecer estos recursos didácticos. Me gustaría compartir una opinión. Los Design System o los UI Kits suelen ser muy escalables, y con facilidad se convierten en mamotretos que no ayudan a la búsqueda de recursos. ¿No crees que es más óptimo en el caso de colores como los de Error, Success o Warning solo crear los que vas a utilizar? Crear las paletas completas de cada color genera mucho residuo que no utilizas y crea fatiga visual. Pasa con otros componentes, veo Sistemas de diseño sobredimensionados donde solo se utiliza una pequeña parte y no me parece una buena práctica.
Tienes razón, pero creo que es un ejercicio que se tiene que hacer a posteriori. Prefiero tener más a tener menos, para no tener que ir creando luego sobre la marcha. Pero la idea es luego asignarles usos concretos (bordes, iconos, etc).
@@felipe.cardona Como ejercicio con finalidad didáctica me parece fantástico ya te digo. La verdad es que con la experiencia acabas afinando el tiro, viendo los wireframes y algún prototipo funcional te creas el esquema mental. Sinceramente prefiero crear algo de más a posteriori que mucho sobrante desde el principio, pero sin duda es algo que adquieres con los años. Enhorabuena por los aportes.
¿cómo compruebas la accesibilidad de los colores?
Plugins como contrast