피그마 Nested Instances 네스티드 인스턴스 10분만에 이해하기!
# 설명 전 서론
피그마에서 네스티드 인스턴스(nested instances)를 사용한다는 글을 본적이 있으실 거예요.
검색해보면 전부 영어로 된 문서만 나와서 사실 이해하는 데 꽤나 시간이 걸리시지 않으셨나요?
근데 알고보니까 전혀 무서워할 개념이 아니더라구요 ㅎㅎ;
간단한 개념인데 괜히 영어로 설명되어 있어서 쫄았다는거.
1. 우선 컴포넌트 2개를 만들어 주세요.
우선 준비물이 필요합니다.
1. 토글버튼 2개를 만들어 주시는데요, 두개 같이 잡고 위 이미지에 보이는대로
Create Component set으로 컴포넌트화 시켜줍니다. 그러면 오른쪽 화면에
Property(상태 옵션)이 있는 컴포넌트가 만들어 집니다! 얘네 옵션은 On/Off로 해줘서 켰다/껐다 가능한 컴포넌트로 만들어 줍니다.
2. 그리고 방금 만든 토글버튼이 사용되는 UI를 하나 만들어 줍니다.
아무렇게나 만드셔도 되고 꼭 방금 만든 토글버튼이 포함되도록 해주세요.
이 친구도 마찬가지로 Component set가 되서 Property(상태 옵션)이 있는 컴포넌트로 만들어 주세요.
2. Property(상태 옵션)값은 On/Off로 설정해 주세요.
3. 만든 애들은 아까 말씀드린대로 Property(상태 옵션) 지정해 주시구요.
토글버튼이 있는 친구는 icon_on, 토글버튼이 없는 친구는 icon_off에 각각 지정해 주세요.
3. 세팅이 다 되었으면 이제 Instance(복사본)를 클릭한 후 On/Off를 해보세요.
Instance가 클릭 한 번으로 상태가 바뀝니다.
4. Property(상태 옵션)이 지정되었으면 이제 컴포넌트에서 하나 복사해서 아무곳에 붙여넣어 보시면
Instance(복사본)이 나오는데요. 요 친구 클릭해서 오른쪽 보시면 Property : icon_on / icon_off 옵션이 보입니다.
icon_on을 하면 토글 버튼이 있는 Ui가 되고, icon_off를 하면 토글 버튼이 없는 Ui가 됩니다.
! ) 컴포넌트와 인스턴스의 관계 설명
* 참고로 컴포넌트와 인스턴스의 관계는 위와 같습니다! 인스턴스라고 해서 엄청난게 아니라 그냥
컴포넌트를 복사해서 사용하는 것을 인스턴스라고 합니다.
보통 피그마 작업하실 때에는 인스턴스로 디자인을 그리게 됩니다.
컴포넌트(마스터 컴포넌트)를 수정하게 되면, 인스턴스에 전~부 적용이 되니까요. 마스터 컴포넌트의 수정은
항상 심사숙고 하셔야 합니다!
4. 상위 컴포넌트와 Property(상태옵션)이 있는 내부 컴포넌트(토글 버튼)으로
이루어져 있음을 확인
5. 다시 아까 만든 '토글 버튼'을 포함하고 있는 UI를 살펴봅시다.
얘를 잘 보시면요, 사진 편집 기능이라는 친구가 토글버튼을 포함하고 있습니다.
(위에서 작업한대로, 둘다 component set로 묶여있어야 하고 Property옵션이 적용되어 있어야 합니다.)
5. Nested instances 옵션을 선택합니다.
6. 자, 이제 이 '사진 편집 기능'이라는 친구인 마스터 컴포넌트를 클릭(전체가 잡히는게 맞아요)
오른쪽 메뉴보시면 Properties에서 [+]플러스 버튼이 있는데, 이 버튼을 누르면 최하단 메뉴에
Nested instances메뉴가 있습니다. 우리가 그렇게 찾아헤매던 옵션입니다.
7. 적용을 눌러보면, 위와 같이 '토글 버튼'이 Expose properties from이라고 등장합니다.
즉, 토글 버튼으로부터 상태옵션을 노출하겠습니다. 라는 의미입니다.
능동태로 얘기하면 토글 버튼의 상태 옵션(Property)를 밖으로 노출할게~! 라는 의미입니다.
6. Nested instances 옵션 적용 성공!
8. 성공적으로 적용하게 되면, 이제 '사진 편집 기능' instance를 클릭해보면 오른쪽 메뉴에
토글버튼의 property(상태 옵션)까지 굳이 토글 버튼을 누르지 않더라도 옵션을 만질 수 있게 됩니다.
9. 아하!! 여기서 깨닫게 됩니다.
Nested instances는 결국 큰 단위가 작은 단위를 포함할 때, 큰 단위에서도 작은 단위의 Property(상태 옵션)을 조정할 수 있도록
노출시켜주는 옵션이라는 뜻이었습니다.
# 결론
네스티드 인스턴스(Nested instances)는
큰 단위에서, 포함하고 있는 작은 단위의 옵션을 노출시킬까요?라고 물어보는 의미라는 사실.
이해하니까 하나도 어렵지 않습니다! 괜히 영어 단어만 길고...ㅎㅎ
Nested instances가 사실 'Nest(둥지)'와 비슷한 단어가 있어서 어렴풋이
아... 인스턴스(복사본)이긴 한데, 뭔가를 둥지처럼 품고있는건가? 라고 대강 유추는 가능하지만
막상 쓰려고 보면 이게 맞나? 싶고 ㅎㅎ
하지만 이제는 두렵지 않죠??
이렇게 직접 Nested instances옵션이 무엇인지 정확히 알고나니까,
이제 절대로 헷갈릴 일이 없습니다! ㅎㅎㅎ
