해결된 질문
작성
·
39
0
강의에서는 체크박스를 Boolean으로 처리하면 껏다가 켜는게 동시에 작동해서 따로 만드는걸 추천한다고 하셨는데, 지금 만들면서 테스트해보니까 복사한 인스턴스 각각에서 켰다가 끄는게 각자 동작하는데 혹시 동시에 동작하는게 어떤 상황에서 발생하는걸까요 ? 감사합니다 !!!
답변 2
0
강의에서 체크 박스(아이콘)을 만약에 불린 프로퍼티로 등록하면
만약 불린 프로피터를 OFF상태로 해놓은다면
컴포넌트 세트 안의 모든 체크박스가 꺼집니다.
근데, 저희가 만들고 싶은 건 isSelected에서는 ON일 때는 체크 박스가 있고,
isSelected가 OFF일 때는 체크박스가 꺼져 있어야겠죠.
이 경우는 불린 프로퍼티 보다는 베리언츠 프로퍼티가 맞습니다.
동시에 다 켜졌다가 꺼지는 대표적인 예시는 이전 시간에 배운 버튼 만드실 때,
Leadning icon, Trailing icon이 대표적입니다.
만약에 프로퍼티에서 Leading icon의 불린 프로퍼티 값을 "OFF/False"를 하면 모든 컴포넌트 세트안에 있는 Leading icon이 모두 다 사라지겠죠. 반대로 ON/True이면 다 켜질 거구요.
그래서 정리하자면,
불린 프로퍼티는 적용된 모든 것을 (동시에) 껐다 킨다.
반면 베리언츠 프로퍼티를 등록해서 만들면 강제로 나누어서 몇몇 베리언츠는 끄고 다른 베리언츠는 킬 수 있게 할 수 있다.
라고 생각하시면 됩니다.
저의 설명이 개념을 이해하시는데, 도움이 되셨으면 좋겠습니다.
궁금한 사항 있으시면 언제든지 질문 주세요. 귀한 질문 감사드립니다.!!
0
안녕하세요, 인프런 AI 인턴입니다. 정은희님께서 말씀하신 사항은 디자인 시스템 구축 중에 자주 발생하는 문제 중 하나입니다. 체크박스와 같은 Boolean 속성을 가진 컴포넌트를 복사하여 사용할 때, 특정 상황에서 모든 인스턴스가 동시에 변경되는 현상을 목격할 수 있습니다. 이는 보통 컴포넌트의 Override 설정이나 인스턴스의 연결 방식에 따라 달라집니다.
컴포넌트와 인스턴스 이해하기: Figma에서는 원본 컴포넌트를 수정하면 모든 인스턴스가 함께 변경됩니다. 그러나 각 인스턴스에서 Override된 속성은 개별적으로 저장됩니다. 즉, 원본 컴포넌트를 수정하지 않는다면 인스턴스는 독립적으로 동작합니다.
Override 동작 이해하기: 인스턴스에서 직접 Boolean 프로퍼티를 조절할 경우, 해당 인스턴스에 대해서만 변경됩니다. 그리고 동일한 Boolean 프로퍼티가 다른 인스턴스에 각각 적용되어 있을 경우, 인스턴스별 동작이 가능합니다.
동시 변경 현상 방지: 만약 Boolean의 켜짐/꺼짐 현상을 각각 개별적인 상태로 유지하고 싶다면, 인스턴스를 복사한 뒤 각 인스턴스의 속성을 개별적으로 설정해야 합니다.
아래 두 링크는 Figma에서의 컴포넌트 관리 및 인스턴스 처리에 대한 유용한 정보를 제공하는 답변입니다. 참고하시기 바랍니다.
각 링크는 인스턴스 속성 및 컴포넌트 관리 방법에 대한 기본 원리와 팁을 제공하고 있어 문제 해결에 도움을 줄 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.