Figmapedia
목록으로 돌아가기
컴포넌트

컴포넌트를 조합해서 사용하는 방식

2023. 3. 23.

안녕하세요!

어제 오카방에 올라왔던 이슈 중 Nested instance와 관련된 내용이 있었는데, 미디엄에 좋은 예시가 있어서 가져와 봤습니다!

참고해 보시고, 오늘도 좋은하루 보내세요!😄

이미지는 인풋 예시인데, 컴포넌트는 최초로 베이스 컴포넌트를 만들고 이 베이스 컴포넌트의 인스턴스를 복사해서 변형 후 베리언트로 다시 조합해 파이널 컴포넌트를 만드는 방식으로 사용할 수 있습니다.

📍Nested instance?

컴포넌트를 만들 때 컴포넌트를 조합하는 방식으로 만드는데, 이 때 컴포넌트 하위에 들어가 있는 인스턴스를 Nested instance 라고 합니다. (메인 컴포넌트 하위에는 메인 컴포넌트가 들어갈 수 없으므로, 하위에 들어간 것들은 무조건 인스턴스)

📍사용하는 방법(이미지와 함께 참고해 보세요)

  • 베이스 컴포넌트 제작
  • 프로퍼티 더하기(불린, 텍스트, 베리언트, 인스턴스스왑 모두 해당)
  • 인스턴스 복사 후 베리언트 등으로 조합
  • 베리언트 전체그룹 또는 메인 컴포넌트를 선택 후 Properties 메뉴 클릭  > expose properties from nested instance 메뉴 클릭  > 상위 컴포넌트에서 노출할 옵션 체크 (이 옵션은 하위 인스턴스에 프로퍼티가 추가되어 있을 때만 뜹니다.)