¡Los iconos de Figma no cambian de color! Guía para resolver problemas al cambiar instancias de componentes

Cuando se trabaja en Figma repartiendo las piezas de diseño entre varias personas, a veces surgen problemas inesperados. ¿Alguna vez te has encontrado con un problema en el que el color de un icono convertido en componente no cambia como esperabas?

En este artículo explicamos de forma clara el problema de que el color de una instancia de icono no se refleja, un inconveniente que encuentran muchos usuarios de Figma, así como sus causas y soluciones.

¡Mi senpai convirtió en componente el botón que hice! ¡Y además se puede cambiar la parte del icono! ¡Genial! Pero me faltan iconos, así que voy a seguir registrando más iconos como componentes para que sean más fáciles de usar.

Yo me dediqué en silencio a crear iconos sin parar.

¿Eh? Algo raro pasa, el componente de icono no cambia bien... Se supone que lo hago igual que el senpai... ¿Por qué no cambia el color correctamente?

¡Pues es por cómo estás creando tus iconos!

¡Senpai! ¿Cómo hago para que el color cambie?

Jejeje, muy bien. Te voy a enseñar el secreto para cambiar iconos en Figma. ¡Anótalo bien y grábatelo en la cabeza!

¡Sí! Me esforzaré por aprenderlo.

¿Por qué se heredan los colores? El funcionamiento de las sobrescrituras en Figma

Al crear un botón en Figma, es habitual configurar la parte del icono para que pueda cambiarse mediante propiedades de instancia. Sin embargo, no es raro encontrarse con problemas como que el color configurado no se aplique al cambiar el icono o que cambie por sí solo.

¿Te has encontrado alguna vez con el problema de que, al cambiar el icono (icon) en Figma, el color configurado no se aplica o el color no cambia? En este artículo explicamos de forma clara las causas y las soluciones.

Para que el color cambie correctamente al alternar iconos, revisa bien la configuración tanto del icono como del botón.

Primero, revisa la estructura del componente de botón

Antes de nada, veamos una estructura como la siguiente, en la que el color se sobrescribe.

① El componente de icono original es negro

② Una instancia copiada dentro del botón, con solo el color sobrescrito

③ Si en este estado se cambia a otro icono, el color del icono puede volver al color predeterminado en lugar de blanco

tips: Comprender la relación entre componentes maestros y sobrescrituras

La advertencia más básica es que las propiedades sobrescritas dejan de reflejar los cambios del componente maestro.

Partes sobrescritas: Si cambias el color o el texto en una instancia, esa parte se vuelve independiente. Aunque modifiques después la misma parte del componente maestro, esa instancia no se verá afectada. Lo que hayas sobrescrito (relleno, color de trazo, texto, etc.) tiene prioridad.

Partes no sobrescritas: Las propiedades que no has modificado (por ejemplo, padding o margin) reflejan directamente los cambios del componente maestro.

Un caso especial que conviene tener en cuenta es cuando se modifica la estructura de capas del componente maestro. Si cambias el nombre de una capa o eliminas una y añades otra nueva, Figma puede interpretarla como un elemento distinto y restablecer las sobrescrituras de las instancias.

Teniendo en cuenta lo anterior, veamos cuáles son las causas por las que el color del icono no cambia.

Causa 1: Configuración mixta de «Relleno (Fill)» y «Trazo (Stroke)»

Aunque dos iconos tengan el mismo aspecto, en Figma «Relleno (Fill)» y «Trazo (Stroke)» son propiedades completamente distintas. Por eso, si cambias un icono que usa relleno por otro dibujado con grosor de trazo, es posible que la sobrescritura de color no se aplique correctamente.

Ejemplo:

Icono A

Icono B

• Icono A: icono contorneado construido con relleno (Fill)
• Icono B: icono cuyo contorno está dibujado con trazo (Stroke)

Como se ve, si el método de dibujo de los iconos es distinto, el resultado de aplicar los colores también cambia, por lo que es importante unificar el método de representación. Al hacer clic en el icono B, Fill tiene asignado el color blanco, pero como este componente de icono está construido solo con trazos, el color no se reemplaza. Sin embargo, en realidad el blanco sí se refleja en la parte de relleno (como no hay elemento de relleno, el blanco se queda sin lugar donde aplicarse...).

✅ Solución:
establezca como regla crear todos los iconos mediante «relleno». Los iconos dibujados con trazo deben convertirse siempre a contorno (command+shift+O) y transformarse en objetos de «relleno». Esto también facilita su manejo durante la implementación.

En nuestro caso, al implementar, incluimos los path de los SVG en variables CSS o los integramos con Astro Icon, por lo que unificamos todo en relleno.

Si se mantienen como trazo (Stroke), al ampliar o reducir el icono cambia el grosor de la línea, lo que puede deformar el diseño. Salvo que haya una razón específica, lo mejor es convertirlos a contorno y unificarlos en «relleno».

Si el icono está construido solo con trazos, al cambiar su tamaño el grosor de la línea se mantiene igual. Con trazados simples, como flechas, hay pocos problemas, pero en iconos complejos, con 12px pueden quedar aplastados y con 80px pueden verse desproporcionados.

Los iconos construidos con trazos no mantienen el grosor al cambiar de tamaño, por lo que convertirlos a contorno es lo más recomendable. Si desea conservar la versión anterior a la conversión, coloque los datos originales cerca del componente.

Incluso al combinar elementos construidos con trazo (Stroke), estos se convierten en relleno (Fill), pero en esos casos suelen aparecer fallos, como que una parte no cambie de tamaño.

Causa 2: los nombres de las capas no coinciden

En Figma, al cambiar la instancia de un componente, los estilos y propiedades se heredan de los elementos que tienen el mismo nombre de capa.

Ejemplo:

Icono A

Icono B

• Nombre de capa del vector del icono A: Vector
• Nombre de capa del vector del icono B: Vector2

Cuando los nombres de las capas son diferentes, Figma interpreta que son "objetos distintos" y los estilos sobrescritos no se aplican correctamente.

✅ Solución: unifica los nombres de las capas usados en los iconos (por ejemplo, todos Vector).

Por ahora, te recomendamos que los trazos a los que quieras aplicar color tengan todos el mismo nombre de capa.

Causa 3: la estructura de capas (jerarquía) es diferente

En algunos casos, el cambio no funciona aunque los nombres de las capas coincidan. Esto puede deberse a diferencias en la estructura de capas. Si el número o la estructura de las capas difiere entre el origen y el destino del cambio de instancia, es posible que las propiedades no se asignen correctamente. Sin embargo, si el nombre de la capa es el mismo, en muchos casos las pequeñas diferencias de jerarquía no son un problema.

Ejemplo:

Icono A

Icono B

Icono C

• El icono A es un "Vector(path)" convertido a contornos y agrupado en un único vector (el icono base).
• El icono B tiene la jerarquía "Flame(Flame) > Vector(path)" → OK (el color se hereda por el nombre de la ruta "Vector").
• El icono C tiene la estructura "Vector(Flame) > Flame(path)" → NO (el cambio de color establecido en la capa "Vector" se aplica al nombre "Flame").

Así, en estructuras donde una capa llamada "Vector" contiene grupos anidados, hay que prestar atención a cómo se aplican los estilos. Además, aunque el nombre sea el mismo, el color solo cambia en el nivel superior (ver icono C); el "Vector" del segundo nivel no refleja ningún cambio de color.

✅ Solución: no basta con el nombre de las capas; diseñe la estructura de rutas para que coincida con aquella a la que se aplican los estilos, así evitará problemas con mayor facilidad.

Si los nombres de los vectores coinciden, a menudo funciona aunque la estructura varíe un poco. Sin embargo, en el desarrollo en equipo, conviene unificar la estructura interna todo lo posible, pensando en quienes se incorporen más adelante.

Causa 4: el número de "relleno (Fill)" o "trazo (Stroke)" difiere del componente original.

Si el icono es de un solo color, no hay problema en combinar capas o unificar la estructura y los nombres de las capas. Sin embargo, al cambiar a un icono que tiene un número diferente de "relleno (Fill)" o "trazo (Stroke)" respecto al componente original, es posible que solo algunos colores cambien mientras otros permanecen igual, y el resultado no sea el esperado. En general, conviene que los iconos usen un único color. Si necesita usar dos colores, deberá crear por separado una variable de icono específica para iconos de dos colores, u otra solución similar.

✅ Solución:

• No mezclar iconos de un solo color con iconos de varios colores.
• Si necesitas iconos de varios colores, duplica el componente de icono con una variable y crea una versión para iconos de dos colores.
• Al usar iconos de varios colores, en principio no utilices la sobrescritura de color.

Aunque sobrescribas un icono de un solo color, solo puedes cambiar un color, ¡así que ten cuidado!

Causa 5: Influencia de los modos de fusión y las máscaras

Si un icono usa máscaras o modos de fusión especiales (como Multiplicar), es posible que cambiar el color no tenga ningún efecto visible.

✅ Solución:
si usas máscaras o modos de fusión, combina o une los objetos (Aplanar) para convertirlos en objetos de trazado simples con el mismo aspecto visual antes de crear el componente.

Incluso en este caso, conviene convertirlo al final en trazos simples, por ejemplo con Convertir en contorno. Si usas Multiplicar, es recomendable convertirlo en trazados con Live Trace para estar seguro.

Resumen de verificación

Comportamiento de aplicación del color confirmado

A continuación se muestra el comportamiento de aplicación del color que se confirmó al cambiar entre distintos iconos dentro del botón (ver imagen).

Consejos operativos

Puntos clave observados durante la verificación:

• Es muy importante que los nombres de las capas y la estructura coincidan.
• Es recomendable gestionar los rellenos mediante Color Styles o Variables, aunque no es obligatorio especificarlos.
• Para facilitar la implementación, crea los iconos utilizando rellenos en lugar de trazos. Al escalar, los trazos tienden a desajustarse de tamaño, por lo que se recomienda convertirlos en contornos.
• Si desea añadir elementos a un icono existente, es más seguro crear un icono nuevo y reemplazar las variantes una por una en lugar de editar la variante actual, ya que así se evitan problemas de color con mayor facilidad.

Puntos clave para avanzar sin contratiempos desde el diseño hasta la implementación:

• Unifica el tamaño de los frames (evita usar tamaños dispares como 24px, 40px o 80px).
• Si los iconos se configuran con escalado, su tamaño se ajusta automáticamente al redimensionarlos, lo que facilita mucho el manejo de los datos tanto en la implementación como en el diseño.

Además, nuestras reglas de implementación:

• Usa el color negro puro #000 (Astro Icon solo permite cambiar el color si los datos originales son negros)

Problemas que suelen surgir en la fase de operación:

• Modifica los iconos existentes con cuidado: durante la operación, si añades o modificas elementos en un icono existente, su estructura puede cambiar sin querer y es frecuente que el color deje de aplicarse correctamente. En ese caso, es más seguro no editar directamente el componente existente, sino crear un nuevo componente de icono siguiendo las reglas y reemplazar el anterior.

Conclusión

¿Te quedó claro? Al crear un icono, basta con seguir estas tres reglas básicas. 1. Dibuja con relleno de forma consistente (¡convierte los trazos en contornos!) 2. Unifica el "nombre de capa" de las rutas a las que quieras aplicar color 3. Mantén la estructura de capas del icono lo más simple posible Además, durante la operación hay que tener especial cuidado al modificar iconos existentes. Es común que, durante la modificación, la estructura cambie y el color deje de aplicarse. Por eso, en lugar de cambiar directamente el icono existente, crea un nuevo componente siguiendo las reglas y modifica el icono ahí. Después, en el componente del botón, reemplaza el icono antiguo por el nuevo, y así los problemas de color se reducirán mucho.

¡Muchas gracias! ¡Ahora yo también soy un maestro de los iconos! Voy a intentar crear el componente con el método que me enseñó el senior.

Al cambiar la instancia de un icono, aunque tenga el mismo aspecto, si la estructura interna es diferente, el color no se aplicará correctamente.

Los puntos que hemos presentado, especialmente los dos aspectos "unificar con relleno" y "unificar el nombre de capa", bastan para evitar la mayoría de los problemas.

Si aun así no cambia correctamente, a menudo se debe a diferencias en la estructura interna o a que la capa padre tiene el mismo nombre.

Esperamos que este artículo te ayude a hacer tu trabajo de diseño en Figma más cómodo.