Figma 중첩 구성 요소의 스타일을 상속할 수 없는 문제

발생한 문제

컴포넌트 내부에 중첩된 컴포넌트의 스타일을 상속할 수 없는 문제가 발생하는 경우가 있는데, 예를 들어 컴포넌트에 아이콘 컴포넌트가 중첩되어 있는데 아이콘을 다른 아이콘으로 변경한 후 아이콘 색상이 좋은 색상 대신 아이콘의 원래 색상이 표시되거나 색상이 엉망입니다.

또 다른 상황은 대화형 구성 요소를 만들 때 디자인 다이어그램의 변형 인스턴스가 구성 요소 변형의 스타일을 올바르게 상속할 수 없다는 것입니다. 예를 들어 디자인 도면에서는 정상이지만 프로토타입 미리보기로 전환하면 호버링 및 선택한 스타일에서 오류가 발생합니다.

해결책

Figma 구성 요소의 중첩 스타일을 상속할 수 없는 경우 4가지 핵심 사항을 확인해야 합니다:
1. 구성 요소 내 중첩 요소의 레이어 순서가 일치하는지 여부
2. 구성 요소 내 중첩 요소의 레이어 수가 3.
구성 요소의 중첩된 요소 레이어 이름 지정의 일관성 여부
4. 인스턴스의 중첩된 요소 스타일을 덮어썼는지 여부
다소 복잡하게 들릴 수 있지만 예를 들어보면 이해할 수 있습니다.

예를 들어

여기서는 도구 버튼을 만들었습니다. 그 구조는 아이콘 구성 요소가 있는 프레임입니다.

이 시리즈의 중첩된 아이콘은 세 개의 레이어로 구성됩니다.

따라서 상위 레이어를 검은색으로, 두 번째 레이어를 주황색으로, 세 번째 레이어를 주황색으로 설정하는 것과 같이 외부 구성 요소에 있는 각 벡터 레이어의 색상을 제어할 수 있습니다.

이 시점에서 다른 여러 아이콘 인스턴스를 만들 때 아이콘 내부의 색상도 그에 따라 변경될 수 있음을 알 수 있습니다.

이 시점에서 참고:

1. "아이콘" 구성 요소 내부의 레이어 순서는 채워진 색상과 직접 관련됩니다. 예를 들어 "도구 버튼" 구성 요소에서 중첩된 "아이콘" 구성 요소의 두 번째 레이어를 녹색으로 변경하면 모든 주황색과 노란색이 모두 녹색으로 바뀝니다(참고: 이 변경 사항은 즉시 적용되지 않습니다. 먼저 "모든 오버라이드 재설정"을 수행한 다음 내부 중첩 아이콘 요소를 다시 선택해야 합니다.)

2. 아이콘 구성 요소 내부의 레이어 수는 동일해야 합니다. 예를 들어 현재 레이어가 3개 레이어이고 새 아이콘의 레이어가 5개 레이어인 경우 스타일은 하위 3개 레이어에만 상속될 수 있으며 상위 2개 레이어의 색상은 아이콘의 색상과 동일합니다. 원래 아이콘이며 아무것도 변경되지 않았습니다.
   

3. 각 "아이콘" 구성 요소 내의 레이어 이름은 일관되어야 하며 이름이 다른 경우에도 오류가 발생합니다. 예를 들어 레이어 중 하나의 이름이 "11"로 변경된 경우 "11"이라는 레이어는 "도구 버튼" 구성 요소에서 인식할 수 없으므로 스타일이 상속되지 않습니다.
   

4. 인스턴스에 있는 중첩 요소의 스타일이 재정의되었는지 여부를 확인합니다 . 예를 들어 여기에서는 "Positioning" 아이콘의 검정색 레이어를 파란색으로 변경합니다. 이때 "Icon" 구성 요소에서 다른 여러 아이콘 변형을 선택하거나 이 인스턴스에서 여러 새 인스턴스를 복사한 후 변경된 색상은 Lives on이 됩니다. , 원래 구성 요소의 스타일을 복원하는 대신.
   

마지막으로 작은 아이콘을 너무 복잡하게 만들지 말고 한 레이어만 유지하는 것이 좋습니다.문제가 발생하면 이유를 찾기가 더 쉽습니다. 레이어가 여러 개인 경우 먼저 "합집합"한 다음 "평면화"합니다.