Topics

Al crear elementos de diseño en Figma y compartir el trabajo, es posible que te encuentres con algunos problemas inesperados. ¿Alguna vez has tenido problemas con el color del icono de un componente que no cambia correctamente?

En este artículo, explicaremos claramente la causa y la solución al problema de que los colores de las instancias de iconos no se reflejan, un problema al que se enfrentan muchos usuarios de Figma.

¡Mi compañero de mayor rango ha convertido el botón que creé en un componente! ¡Y lo mejor de todo es que incluso se puede cambiar el icono! ¡Es increíble! Pero no hay suficientes iconos, así que seguiré registrando iconos como componentes para que sea un componente fácil de usar.

Creé iconos en silencio.

¿Eh? ¿Los iconos no cambian correctamente? Estoy seguro de que los estoy haciendo igual que mi compañero... ¿Por qué no cambian bien los colores?

¡Eso se debe a la forma en que creas tus iconos!

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

¡Genial! Te enseñaré el secreto para cambiar los iconos en Figma. ¡Asegúrate de tomar notas y memorizarlo!

¡Sí! ¡Haré todo lo posible por recordarlo!

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

Al crear un botón en Figma, es común configurar el icono para que sea modificable mediante las propiedades de la instancia. Sin embargo, al cambiar de icono, suelen surgir problemas, como que el color no se refleje o no cambie automáticamente.

Al cambiar los iconos en Figma,El color que configuré no se refleja/el color no cambia¿Te has encontrado alguna vez con el problema descrito anteriormente? En este artículo, explicaremos las causas y las soluciones de una manera fácil de entender.

Asegúrese de comprobar la configuración tanto del icono como del botón para garantizar que el color cambie correctamente al cambiar de icono.

Primero, comprueba la estructura del componente botón.

Primero, veamos cómo se modifican los colores utilizando la siguiente estructura:

① El componente de icono original es negro

2. Cópialo como una instancia en el botón y modifica solo el color.

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

Consejo: Comprenda la relación entre los componentes maestros y las anulaciones.

Lo más básico a tener en cuenta es que cualquier propiedad que modifiques ya no reflejará los cambios realizados en el componente maestro.

La parte anuladaSi modificas el color o el texto de una instancia, esa parte se vuelve independiente. Si posteriormente modificas la misma parte en el componente principal, el cambio no se aplicará a la instancia. Las modificaciones (relleno, color de trazo, texto, etc.) tienen prioridad.

Partes que no se anulanLas propiedades que no hayas modificado (por ejemplo, el relleno y el margen) reflejarán los cambios realizados en el componente maestro.

Tenga especial cuidado si cambia la estructura de capas de su componente maestro: si cambia el nombre de una capa o elimina una capa y agrega una nueva, Figma puede reconocerla como un elemento diferente y restablecer las anulaciones de instancia.

Teniendo esto en cuenta, veamos por qué no cambia el color del icono.

Causa 1: Los ajustes de Relleno y Trazo están mezclados.

Aunque a primera vista los iconos parezcan iguales, en Figma las propiedades "Relleno" y "Trazo" se tratan como propiedades completamente independientes. Por lo tanto, si cambias de un icono con relleno a uno con grosor de trazo, es posible que el cambio de color no se refleje correctamente.

ejemplo:

Icono A

Icono B

• Icono A: Un icono delineado con relleno.
• Icono B: Un icono delineado con una línea (Trazo)

De esta forma, si el icono se dibuja de forma diferente, el resultado de aplicar el color también cambiará.Es importante mantener la expresión coherente.Al hacer clic en el icono B, el relleno se establece en blanco, pero dado que este componente de icono solo está formado por líneas, el color no se reemplaza. Sin embargo, el relleno se establece correctamente en blanco (aunque, al no haber un elemento de relleno, el blanco no tiene dónde ubicarse...).

✅ Solución：
La regla es crear todos los iconos con un efecto de "relleno". Los iconos dibujados con líneas deben convertirse en contornos (command+shift+O) para convertirlo en un objeto "paint". Esto tiene la ventaja de facilitar su manejo durante la implementación.

En nuestro caso, al implementarlo, colocamos la ruta SVG en una variable CSS o la incorporamos con Astro Icon, para que todo se pinte de manera uniforme.

Si lo dejas como trazo, el grosor de la línea cambiará al escalar el icono, lo que puede hacer que el diseño se vea mal. A menos que haya una razón especial, es mejor delinear el icono y usar un valor de relleno uniforme.

Si creas un icono usando solo líneas, el grosor de la línea se mantendrá igual al escalar el icono. Esto no supone un problema para trazados sencillos como flechas, pero para iconos más complejos, 12 px harán que se vean comprimidos y 80 px a menudo harán que se vean estirados.

Los iconos creados con líneas se ven mejor contorneados, ya que el grosor de la línea no cambia al redimensionarlos. Si desea conservar los datos originales antes de contornearlos, manténgalos cerca del componente.

Al combinar algo creado con un trazo, se convertirá en un relleno, pero incluso en este caso, suelen surgir problemas, como que solo una parte de la forma no cambie de tamaño.

Causa 2: Los nombres de las capas no coinciden

En Figma, componentesAl cambiar de instancia, los estilos y propiedades se heredan para los elementos con el mismo nombre de capa.Existe una especificación que dice:

ejemplo:

Icono A

Icono B

• Nombre de la capa vectorial del icono A:Vector
• Nombre de la capa vectorial del icono B:Vector2

Si los nombres de las capas son diferentes de esta manera, Figma pensará que son "diferentes" y los estilos modificados no se aplicarán correctamente.

✅ SoluciónUnificar los nombres de las capas utilizadas en los iconos (p. ej., Todos).Vector）

Por ahora, ¡asegurémonos de que todos los nombres de las capas de las rutas que quieres colorear sean iguales!

Causa 3: Diferentes estructuras de capas (jerarquías)

Aunque unifiques los nombres de las capas, es posible que el cambio entre ellas no funcione correctamente. En ese caso, podría deberse a diferencias en la estructura de las capas.Si el número de capas o la estructura difiere, es posible que las propiedades no se asignen correctamente..sin embargo,En algunos casos, las pequeñas diferencias en la jerarquía no suponen un problema si los nombres de las capas son los mismos.。

ejemplo:

Icono A

Icono B

Icono C

• El icono A es "Vector".（path）"Esbozar y combinar en un vector (icono básico)
• El icono B es "Llama"（Flame） > Vector（path）" → Aceptar (El color se hereda al nombre de ruta "Vector")
• El icono C es "Vector".（Flame） > Flame（path）" estructura → NG (aparece el cambio de color configurado en el nombre de la llama "Vector")

De esta forma, el nombre de la capa "En una estructura donde "Vector" contiene un grupo, debes tener cuidado al aplicar el estilo.Además, aunque el nombre sea el mismo, el color cambia solo en la capa superior (ver icono C), y el cambio de color no se refleja en los vectores de la segunda capa.

✅ SoluciónNo solo el nombre de la capa,Diseñarlo de manera que la estructura de ruta a la que se aplican realmente los estilos coincidaEsto facilitará evitar problemas.

Siempre que los nombres de los vectores sean correctos, no suele haber problema si la estructura varía ligeramente. Sin embargo, en el desarrollo en equipo, es útil mantener la estructura interna lo más consistente posible para quienes se incorporen más adelante.

Causa 4: El número de rellenos o trazos es diferente al del componente original

Si usas un solo color, no hay problema siempre que combines las capas o estandarices su estructura y nombres. Sin embargo, si cambias a un icono con un número diferente de "Relleno" o "Trazo" al del componente original, solo algunos colores cambiarán y otros permanecerán iguales, lo que podría no funcionar como se espera. Por regla general, los iconos deben estandarizarse a un solo color. Si necesitas usar dos colores, tendrás que crear una variable de icono independiente para el icono bicolor o usar otra solución ingeniosa.

✅ Solución：

• No mezcle iconos de un solo color con iconos multicolores.
• Si necesitas un icono multicolor, duplica el componente del icono con variables y crea uno para un icono de dos colores.
• Cuando se utilizan iconos multicolores, generalmente no se deben usar anulaciones de color.

¡Cuidado! Aunque modifiques un solo icono de color, ¡solo podrás cambiar un color!

Causa 5: Modos de fusión y máscaras

Si el icono utiliza una máscara o un modo de fusión especial (como multiplicar),Cambiar el color puede no resultar en ningún cambio visible.。

✅ Solución：
Si utilizas máscaras o modos de fusión, conviértelos en objetos de trazado simples que tengan el aspecto correcto combinando o aplanando los objetos antes de crear los componentes.

En este caso también, es seguro simplificar el trazado delineándolo al final. Si se utiliza la multiplicación, es más seguro crear un trazado adecuado mediante la herramienta de trazado en tiempo real o similar.

Resumen de verificación

Se confirma el comportamiento real de la reflexión del color.

A continuación se muestra el comportamiento de reflexión del color que se observó al cambiar entre varios iconos dentro del botón (ver imagen).

Consejos para usar

Puntos clave aprendidos del examen:

• Es muy importante que los nombres y la estructura de las capas coincidan.
• Es seguro especificar el color de relleno utilizando Estilo de color o Variables, pero no es necesario hacerlo.
• Los iconos se crean utilizando rellenos para facilitar su implementación (las líneas tienden a perder tamaño al ampliarlas o reducirlas, por lo que se recomiendan los contornos).
• Si quieres añadir elementos a un icono existente, es más fácil evitar problemas de color creando un nuevo icono y reemplazando cada elemento individualmente en lugar de editar la variante que se muestra actualmente.

Consejos para una transición fluida del diseño a la implementación:

• Uniformice el tamaño de los marcos (no utilice tamaños diferentes como 24px, 40px, 80px, etc.).
• Al escalar el icono, este se redimensionará correctamente según su tamaño (esto facilita mucho el manejo de datos tanto en el diseño como en la implementación).

Además, nuestras reglas de implementación:

• Establezca el color en negro absoluto #000 (el color del icono Astro no se puede cambiar a menos que los datos originales sean negros).

Problemas comunes que pueden ocurrir durante la fase de operación:

• Ten cuidado al modificar los iconos existentes.Si añade o modifica elementos a un icono existente durante su funcionamiento, la estructura podría cambiar involuntariamente, lo que puede provocar problemas con la visualización del color. En ese caso, no edite el componente existente directamente; siga las reglas.Crea un nuevo componente de icono y reemplázalo.Es más seguro.

resumen

¿Lo entendiste? Básicamente, al crear iconos, ¡solo sigue estas tres reglas! 1. Usa un método de relleno consistente (¡líneas de contorno!). 2. Usa nombres de capa consistentes para las rutas que quieras colorear. 3. Mantén la estructura de capas del icono lo más simple posible. Además, durante la fase de producción, debes tener especial cuidado al modificar iconos existentes. La estructura suele cambiar durante el proceso de modificación, lo que provoca problemas con la visualización de los colores. Así que, en lugar de modificar directamente los iconos existentes, crea un nuevo componente siguiendo las reglas y modifica el icono allí. Luego, reemplaza el icono antiguo por el nuevo en el componente del botón. Esto debería reducir significativamente los problemas de color.

¡Gracias! ¡Ahora soy un experto en iconos! ¡Intentaré crear un componente usando el método que me enseñó mi compañero!

Al cambiar entre instancias de iconos, aunque parezcan iguales, la estructura interna es diferente y los colores no se reflejan correctamente.

Los puntos introducidos en esta ocasión, especialmente"Unificar relleno" "Unificar nombre de capa"Siguiendo estos dos puntos, debería poder evitar la mayoría de los problemas.

Si aún así no cambia correctamente, es probable que se deba a diferencias en la estructura interna o a capas superiores con el mismo nombre.

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