작성한 질문수 5

0

강의에서 체크 박스(아이콘)을 만약에 불린 프로퍼티로 등록하면

만약 불린 프로피터를 OFF상태로 해놓은다면

컴포넌트 세트 안의 모든 체크박스가 꺼집니다.

근데, 저희가 만들고 싶은 건 isSelected에서는 ON일 때는 체크 박스가 있고,

isSelected가 OFF일 때는 체크박스가 꺼져 있어야겠죠.

이 경우는 불린 프로퍼티 보다는 베리언츠 프로퍼티가 맞습니다.

동시에 다 켜졌다가 꺼지는 대표적인 예시는 이전 시간에 배운 버튼 만드실 때,

Leadning icon, Trailing icon이 대표적입니다.

만약에 프로퍼티에서 Leading icon의 불린 프로퍼티 값을 "OFF/False"를 하면 모든 컴포넌트 세트안에 있는 Leading icon이 모두 다 사라지겠죠. 반대로 ON/True이면 다 켜질 거구요.

그래서 정리하자면,

불린 프로퍼티는 적용된 모든 것을 (동시에) 껐다 킨다.

반면 베리언츠 프로퍼티를 등록해서 만들면 강제로 나누어서 몇몇 베리언츠는 끄고 다른 베리언츠는 킬 수 있게 할 수 있다.

라고 생각하시면 됩니다.

저의 설명이 개념을 이해하시는데, 도움이 되셨으면 좋겠습니다.

궁금한 사항 있으시면 언제든지 질문 주세요. 귀한 질문 감사드립니다.!!

0

안녕하세요, 인프런 AI 인턴입니다. 정은희님께서 말씀하신 사항은 디자인 시스템 구축 중에 자주 발생하는 문제 중 하나입니다. 체크박스와 같은 Boolean 속성을 가진 컴포넌트를 복사하여 사용할 때, 특정 상황에서 모든 인스턴스가 동시에 변경되는 현상을 목격할 수 있습니다. 이는 보통 컴포넌트의 Override 설정이나 인스턴스의 연결 방식에 따라 달라집니다.

1. 컴포넌트와 인스턴스 이해하기: Figma에서는 원본 컴포넌트를 수정하면 모든 인스턴스가 함께 변경됩니다. 그러나 각 인스턴스에서 Override된 속성은 개별적으로 저장됩니다. 즉, 원본 컴포넌트를 수정하지 않는다면 인스턴스는 독립적으로 동작합니다.

2. Override 동작 이해하기: 인스턴스에서 직접 Boolean 프로퍼티를 조절할 경우, 해당 인스턴스에 대해서만 변경됩니다. 그리고 동일한 Boolean 프로퍼티가 다른 인스턴스에 각각 적용되어 있을 경우, 인스턴스별 동작이 가능합니다.

3. 동시 변경 현상 방지: 만약 Boolean의 켜짐/꺼짐 현상을 각각 개별적인 상태로 유지하고 싶다면, 인스턴스를 복사한 뒤 각 인스턴스의 속성을 개별적으로 설정해야 합니다.

아래 두 링크는 Figma에서의 컴포넌트 관리 및 인스턴스 처리에 대한 유용한 정보를 제공하는 답변입니다. 참고하시기 바랍니다.

• “피그마의 컴포넌트와 인스턴스 관리 방법”
  
• “인스턴스 속성 Override 관리”
  

각 링크는 인스턴스 속성 및 컴포넌트 관리 방법에 대한 기본 원리와 팁을 제공하고 있어 문제 해결에 도움을 줄 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.