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

Cuando trabajas compartiendo partes de diseño en Figma, a veces te encuentras con problemas inesperados. ¿Has tenido alguna vez la experiencia de que los colores de los iconos que convertiste en componentes no cambian correctamente?

En este artículo, explicaremos de manera clara la causa y las soluciones para el problema "los colores de las instancias de iconos no se reflejan correctamente", que enfrentan muchos usuarios de Figma.

¡Mi superior convirtió el botón que hice en componente! ¡¡Y la parte del icono también se puede cambiar!! ¡¡Increíble!! Pero como faltan iconos, voy a crear y registrar cada vez más iconos como componentes para hacer que sea más fácil de usar.

Simplemente creé iconos sin parar.

¿Espera? El componente del icono no está cambiando correctamente. Debería estar hecho de la misma manera que la de mi superior... ¿Por qué los colores no cambian bien?

¡Es por la forma en que estás creando tus iconos!

¡Jefe! ¿Cómo puedo hacer que los colores cambien?

¡Muy bien! Te voy a contar el secreto de cómo cambiar iconos en Figma. ¡Toma nota y grábatelo bien en la cabeza!

¡Claro! ¡Me esforzaré por recordarlo!

¿Por qué se heredan los colores? Cómo funcionan los overrides en Figma

Al crear un botón en Figma, es común configurar la parte del icono para que se pueda cambiar mediante propiedades de instancia. Sin embargo, al cambiar el icono, a menudo surgen problemas donde el color configurado no se refleja o cambia inesperadamente.

¿Alguna vez te has encontrado con problemas al cambiar iconos en Figma donde el color configurado no se refleja o no cambia correctamente? Este artículo te presenta las causas y soluciones de forma clara y sencilla.

Verifica correctamente la configuración del icono y del botón para asegurar que los colores cambien correctamente al cambiar de icono.

Primero, confirma la estructura del componente de botón

Primero, verifiquemos la siguiente estructura para entender la situación donde el color se sobrescribe.

① El componente de icono original es negro

② Copiado como una instancia dentro del botón, con solo el color sobrescrito

③ Cuando cambias a un icono diferente en este estado, el color del icono a veces vuelve al color predeterminado en lugar de blanco

Consejos: Entiende la relación entre componentes principales y anulaciones

El punto más básico a tener en cuenta es que las propiedades anuladas no reflejarán los cambios del componente principal.

Partes anuladas: Cuando cambias el color o texto en una instancia, esa parte se vuelve independiente. Si luego cambias la misma parte en el componente principal, ese cambio no se aplicará a la instancia. Las propiedades anuladas (como colores de relleno, trazo o texto) tienen prioridad.

Partes no anuladas: Las propiedades que no has modificado (como padding o margin) reflejarán los cambios del componente principal directamente.

Lo que requiere especial atención es cuando cambias la estructura de capas del componente principal. Si renombras capas o eliminas y añades nuevas capas, Figma puede reconocerlas como elementos diferentes y restablecer las anulaciones de la instancia.

Teniendo en cuenta lo anterior, investiguemos por qué el color del icono no cambia.

Causa 1: La configuración de "relleno (Fill)" y "trazo (Stroke)" están mezcladas

Aunque dos iconos parezcan idénticos visualmente, el "relleno (Fill)" y el "trazo (Stroke)" se tratan como propiedades completamente separadas en Figma. Por lo tanto, si cambias de un icono expresado con relleno a uno dibujado con un trazo de grosor, la anulación del color puede no reflejarse correctamente.

Ejemplo:

Icono A

Icono B

• Icono A: icono delineado compuesto por relleno (Fill)
• Icono B: icono con contorno dibujado mediante trazo (Stroke)

Cuando el método de dibujo del icono difiere, el resultado de aplicación del color también cambia. Por eso es importante unificar el método de representación. Al hacer clic en el icono B, el relleno tiene asignado un color blanco, pero como este componente de icono se construye solo con líneas, el color no se reemplaza. Sin embargo, en realidad el blanco se refleja correctamente en el relleno (aunque no tiene adónde ir, ya que no hay elementos de relleno).

✅ Solución:
Establece la regla de que todos los iconos se creen con «relleno». Los iconos dibujados con trazo deben convertirse a objetos de «relleno» mediante delineación (command+shift+O). Esto también proporciona ventajas al implementarlos.

En nuestro caso, al implementar, insertamos rutas SVG en variables CSS o usamos Astro Icon, así que unificamos todo con relleno.

Si mantiene el trazo tal como está, el grosor de la línea cambiará cuando amplíe o reduzca el icono, lo que también puede causar que el diseño se desmorone. A menos que haya una razón especial, lo mejor es delinear y unificar en «relleno».

Si se construye solo con líneas, el tamaño de la línea permanecerá igual cuando amplíe o reduzca el icono. Con rutas simples como flechas hay pocos problemas, pero con iconos complejos, a menudo se aplasta a 12 px o se ve demasiado espaciado a 80 px.

Los iconos construidos con trazo no cambian el grosor de la línea cuando se cambia el tamaño, por lo que delinearlos es lo mejor. Si desea conservar el original antes de delinear, colóquelo cerca del componente.

Aunque los construidos con trazo (Stroke) también se cambian a relleno (Fill) cuando se combinan, incluso en ese caso a menudo se producen problemas como que solo parte del tamaño no cambie.

Causa 2: Los nombres de capas no coinciden

Figma tiene una especificación según la cual cuando cambias instancias de componentes, los estilos y propiedades se heredan en los elementos que tienen el mismo nombre de capa.

Ejemplo:

Icono A

Icono B

• Nombre de capa del vector del ícono A: Vector
• Nombre de capa del vector del ícono B: Vector2

Cuando los nombres de capas son diferentes de esta forma, Figma los considera "elementos distintos" y los estilos anulados no se aplican correctamente.

✅ Solución: Unifica los nombres de capas utilizados en los íconos (por ejemplo, todos como Vector)

Por ahora, asegúrate de que todos los nombres de capas de las rutas a las que quieras dar color sean iguales.

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

Aunque unifiques los nombres de capas, a veces el cambio no funciona correctamente. En ese caso, podrían estar involucradas diferencias en la estructura de capas. Si el origen y el destino del cambio de instancia tienen diferente número de capas o estructura, las propiedades podrían no mapearse correctamente. Sin embargo, si las capas tienen el mismo nombre, algunas diferencias menores en la jerarquía pueden no ser un problema en ciertos casos.

Ejemplo:

Icono A

Icono B

Ícono C

• El icono A tiene «Vector (path)» convertido a contorno y combinado en un único vector (icono base).
• El icono B tiene una estructura «Flame (Flame) > Vector (path)» → OK (el color se hereda en el nombre de ruta «Vector»).
• El icono C tiene una estructura «Vector (Flame) > Flame (path)» → NG (aparece el cambio de color configurado en «Vector» con el nombre Flame).

De esta manera, cuando el nombre de capa «Vector» contiene un grupo, es necesario prestar atención a cómo se aplican los estilos. Además, aunque el nombre sea el mismo, el color solo cambia en la capa superior (consulte el icono C), y el cambio de color no se refleja en el Vector de segundo nivel.

✅ Solución: Si diseña de modo que la estructura de ruta en la que realmente se aplica el estilo coincida, no solo el nombre de la capa, resultará más fácil evitar problemas.

Si los nombres de los vectores coinciden, generalmente funciona bien aunque la estructura sea un poco diferente. Pero en el desarrollo en equipo, es considerado si unifica la estructura interna lo máximo posible para las personas que se unan después.

Causa 4: El componente base y el relleno «Relleno (Fill)» o «Trazo (Stroke)» tienen diferente número

En el caso de un color, no hay preocupación si combina capas o unifica la estructura y nombre de capas. Sin embargo, cuando cambia a iconos con diferente número de «Relleno (Fill)» o «Trazo (Stroke)» que el componente base, solo algunos colores pueden cambiar mientras otros permanecen iguales, lo que puede no resultar según lo previsto. Básicamente, los iconos deben ser de un solo color. O si es necesario utilizar dos colores, debe idear soluciones como crear variables de icono separadas para iconos de dos colores.

✅ Solución:

• No mezcle iconos de color único con iconos multicolor.
• Si necesitas iconos multicolores, duplica el componente de icono en variables y crea uno para iconos de dos colores.
• Cuando uses iconos multicolores, básicamente no utilices sobrescrituras de color.

Ten cuidado: si sobrescrbes un icono monocromático, solo puedes cambiar un color.

Causa 5: Efectos de modo de mezcla o máscara

Cuando se utilizan máscaras o modos de mezcla especiales (como multiplicar) en iconos, cambiar el color puede no producir cambios visuales.

✅ Solución:
Si estás usando máscaras o modos de mezcla, combina u acopla (Flatten) los objetos y convierte a objetos de ruta simples que coincidan con la apariencia antes de crear el componente.

En este caso también, convierte a rutas simples al final haciendo un contorno u otro método para estar seguro. Si estás usando multiplicar, asegúrate de convertir a rutas correctamente con rastreo en vivo u otros métodos.

Resumen de verificación

Comportamiento de reflexión de color confirmado

A continuación se muestra el comportamiento de reflexión de color confirmado al cambiar varios iconos dentro de botones (consulte la imagen).

Consejos operativos

Puntos clave identificados en la verificación:

• Es muy importante que el nombre de la capa coincida con la estructura
• Es recomendable gestionar el relleno mediante Color Style o Variables, aunque no es estrictamente obligatorio
• Para la creación de iconos, se recomienda mantener el relleno uniforme considerando la facilidad de implementación (si se usan líneas, el tamaño tiende a desajustarse al escalar, por lo que es recomendable convertir a contornos)
• Si deseas agregar elementos a iconos existentes, es mejor evitar editar la variante que se está mostrando actualmente y en su lugar crear un nuevo icono y reemplazarlos uno por uno para evitar problemas de color

Puntos clave para un progreso fluido desde el diseño hasta la implementación:

• Mantener los tamaños de los marcos uniformes (no variar entre 24px, 40px, 80px, etc.)
• Al escalar la sección de iconos, se redimensionan automáticamente según el tamaño del icono (esto hace que el manejo de datos sea mucho más sencillo tanto en la implementación como en el diseño)

Además, nuestras reglas de implementación:

• El color debe ser negro puro #000 (Astro Icon no cambia de color si los datos originales no son negros)

Problemas comunes que surgen durante la fase de operación:

• Ten cuidado al modificar iconos existentes: cuando agregas o modificas elementos en iconos existentes durante la operación, la estructura puede cambiar involuntariamente, lo que causa problemas con la aplicación de colores. En esos casos, en lugar de editar el componente existente directamente, es más seguro crear uno nuevo siguiendo las reglas e intercambiarlo.

Conclusión

¿Entiendes? Cuando creas iconos, básicamente solo necesitas seguir estas 3 reglas. 1. Usar "relleno" de manera consistente en el dibujo (¡convierte las líneas a contornos!) 2. Unificar el "nombre de la capa" para las rutas a las que deseas aplicar color 3. Mantener la "estructura de capas" del icono lo más simple posible Y lo que debes tener especialmente en cuenta durante la fase de operación es la modificación de iconos existentes. Durante el proceso de modificación, la estructura puede cambiar y los colores dejan de aplicarse correctamente, lo cual es un problema frecuente. Por eso, en lugar de modificar directamente los iconos existentes, crea nuevos componentes siguiendo las reglas y modifica los iconos en esos. Luego, en el componente del botón, reemplaza el icono antiguo por el nuevo, y los problemas de color deberían disminuir significativamente.

¡Gracias! ¡Ahora también soy un experto en iconos! ¡Voy a crear componentes usando el método que me enseñaste!

Cuando intercambias instancias de iconos, aunque la apariencia sea la misma, si la estructura interna es diferente, la aplicación de colores no funcionará correctamente.

Con solo aplicar consistentemente los puntos que hemos presentado, especialmente "usar relleno" y "unificar nombres de capas", deberías prevenir la mayoría de los problemas.

Si aún así el intercambio no funciona correctamente, generalmente se debe a diferencias en la estructura interna o a que la capa padre tiene el mismo nombre.

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