El problema de que el estilo de los componentes anidados de Figma no se puede heredar

problemas encontrados

A veces nos encontramos con el problema de que el estilo del componente anidado dentro del componente no se puede heredar. Por ejemplo, en un componente, se anida un componente de icono, pero después de cambiar el icono a otro icono, el color del icono no puede heredar la configuración en el componente En lugar de un buen color, se muestra el color original del icono o el color está desordenado.

Otra situación es que al crear un componente interactivo, la instancia de la variante en el diagrama de diseño no puede heredar correctamente el estilo de la variante del componente. Por ejemplo, es normal en el dibujo de diseño, pero al cambiar a la vista previa del prototipo, habrá errores en los estilos seleccionados y flotantes.

Solución

Cuando el estilo anidado de los componentes de Figma no se puede heredar, debe verificar 4 puntos clave:
1. Si el orden de las capas de los elementos anidados en el componente es consistente
2. Si el número de capas de los elementos anidados en el componente es consistente 3. Los elementos anidados en el componente Si el nombre de
la capa es coherente
4. Si los estilos de los elementos anidados en la instancia se han sobrescrito.
Puede sonar un poco enrevesado, pero podemos entenderlo con un ejemplo.

Por ejemplo

Aquí hice un botón de herramienta, su estructura es un marco con un componente de icono.

Los iconos anidados de esta serie se componen de tres capas.

Entonces podemos controlar el color de cada capa Vector en el componente externo, como configurar la capa superior en negro, la segunda capa en naranja y la tercera capa en naranja.

En este punto, cuando creamos otras instancias de íconos, encontraremos que el color dentro del ícono también se puede cambiar en consecuencia.

Nota en este punto:

1. El orden de las capas dentro del componente "icono" está directamente relacionado con el color relleno. Por ejemplo, si cambio la segunda capa del componente "icono" anidado a verde en el componente "botón de herramienta", tanto el naranja como el amarillo volverse verde (Nota: este cambio no surtirá efecto de inmediato, primero debe "Restablecer todas las anulaciones" y luego volver a seleccionar los elementos de íconos anidados internos)

2. El número de capas dentro del componente Icono debe ser el mismo. Por ejemplo, la capa actual tiene 3 capas y la capa de un nuevo ícono tiene 5 capas, entonces el estilo solo se puede heredar en las 3 capas inferiores, y el color de las 2 capas superiores es el mismo que el color de la icono original y Nada ha cambiado.
   

3. Los nombres de las capas dentro de cada componente "icono" deben ser coherentes y también se producirán errores si los nombres son diferentes. Por ejemplo, si el nombre de una de las capas se cambia a "11", ya que la capa llamada "11" no se puede reconocer en el componente "Botón de herramienta", el estilo no se heredará.
   

4. Comprueba si se han anulado los estilos de los elementos anidados en la instancia . Por ejemplo, aquí cambiamos la capa negra en el ícono "Posicionamiento" a azul. En este momento, después de seleccionar varias otras variantes de íconos en el componente "Icono" o copiar varias instancias nuevas de esta instancia, el color cambiado será Lives on , en lugar de restaurar el estilo del componente original.
   

Finalmente, se recomienda no complicar demasiado los íconos pequeños, solo mantener una capa, si encuentra problemas, es más fácil encontrar el motivo. Si hay varias capas, "Unir" primero, luego "Aplanar".