Crear un mapa de colores desde una imagen de muestra.
Hace ya un tiempo, trabajando con colegas UX y el equipo de MKT en un proyecto de terceros, nos encontramos con un desafío recurrente: estábamos diseñando una serie de artes donde la fotografía era la protagonista. El desafío consistía en lograr que la composición, los textos y los elementos de interfaz jugarán con las mismas tonalidades de la foto para lograr una pieza visualmente cohesiva.
El problema es el de siempre: “ojímetro” vs. precisión. Intentar capturar manualmente el color dominante o la paleta secundaria de una imagen puede llevar tiempo y, muchas veces, terminamos con valores que no terminan de “pegar” con la intención original del autor.
Con los años que tengo, no hay cosa más aburrida que hacer sistemáticamente lo mismo.
Como suelo decir, el diseño es una conversación, y para que esa conversación fluya entre el diseño y el marketing, necesitábamos datos más certeros. Por eso decidí crear IMG Color Extractor. Esto también va de la mano de estar siempre atentos a los patrones y necesidades de nuestro equipo (UX las 24 horas) para implementar automatizaciones que nos hagan la vida más fácil. Con los años que tengo, no hay cosa más aburrida que hacer sistemáticamente lo mismo.
La foto y el píxel
En proyectos de alta rotación, donde necesitás consistencia pero también velocidad, la búsqueda de inspiración o la documentación de colores se vuelve un cuello de botella. Me pasó que, al querer mapear estos colores, sentí que faltaba una herramienta que no solo te diera el color, sino que entendiera la jerarquía visual de la imagen (dominantes y secundarios).
Automatizar para crear
IMG Color Extractor es un plugin para la comunidad de Figma pensado para simplificar este flujo. No busca ser una herramienta compleja, sino una utilidad que “baje a tierra” la extracción de color:
- Extracción precisa: Utiliza tecnología como Color Thief para identificar qué colores tienen más peso real en la composición.
- Mapeo inteligente: Separa el color dominante de los secundarios, permitiendo que el diseñador decida el rol de cada uno en el sistema.
- Fricción cero con Figma: Con un clic, la paleta se envía a la librería de estilos agrupada bajo el nombre “imgcolorextractor”, lista para usar.
Enfoque técnico
Para los que les interesa lo que pasa “atrás”, el desarrollo consistió en integrar una lógica de procesamiento de imágenes que pudiera manejar formatos modernos (como WebP o SVG) y devolver valores hexadecimales limpios. Me enfoque en que la interfaz fuera liviana y el mapeo de variables fuera directo al portapapeles.
UX las 24 hrs
Algo que suele pasarse por alto es que muchas veces las mejores herramientas nacen de una necesidad pequeña en un equipo real. Este plugin no nació de un requerimiento de negocio formal, sino de las ganas de hacer que el trabajo de mis colegas y el mío sea un poco más fluido.
Al final del día, se trata de eso: usar la tecnología para liberar tiempo y poder concentrarnos en la creatividad y en la experiencia de usuario. Si te sirve para tus flujos de trabajo con imágenes, te invito a probarlo y, sobre todo, a darme tu feedback para seguir iterando.
Abrir plugin en la comunidad Figma > https://www.figma.com/community/plugin/1450031418779076008/img-color-extractor
Stack & herramientas Figma API · JavaScript · PHP · Color Thief · Vanilla CSS
