컴포넌트 & 인스턴스

컴포넌트 프로퍼티 그룹화 관리

피그마 오픈카톡방2026. 3. 7.

질문사항

피그마 컴포넌트의 프로퍼티(Properties)를 그룹화하여 정리할 수 있는 방법이 있을까요? 프로퍼티가 너무 많아 관리가 어렵습니다.

답변

피그마에서 프로퍼티 자체를 직접적인 '그룹'으로 묶는 기능은 현재 제공되지 않습니다. 하지만 네스티드 컴포넌트(Nested Components)와 프로퍼티를 활용하여 계층적으로 정리함으로써 유사한 효과를 얻을 수 있습니다.

다음과 같은 방법으로 뎁스를 나누어 정리할 수 있습니다:

베이스 컴포넌트(Base Component) 제작: 가장 기본적인 요소(예: 버튼의 아이콘, 텍스트 등)를 각각의 컴포넌트로 만들고 필요한 프로퍼티(예: `Boolean` for visibility, `Text` for content)를 적용합니다.

중간 컴포넌트 제작: 이 베이스 컴포넌트들을 조합하여 중간 단계의 컴포넌트(예: 아이콘이 있는 버튼)를 만듭니다.

최종 컴포넌트 제작: 중간 컴포넌트들을 조합하여 최종 컴포넌트(예: 헤더, 카드)를 만듭니다. 이때, 하위 컴포넌트의 프로퍼티를 상위 컴포넌트의 인스턴스에서 쉽게 접근할 수 있도록 'Expose properties from nested instances' 옵션을 체크합니다.

이 방법을 사용하면 인스턴스 패널에서 프로퍼티들이 계층적으로 정리되어 보이며, 관련된 프로퍼티들을 묶어서 관리하는 듯한 효과를 얻을 수 있습니다. 또한, 섹션(Section)을 활용하여 컴포넌트들을 시각적으로 그룹화하고 정리하는 것도 좋은 방법입니다.