컴포넌트 & 인스턴스

마스터 컴포넌트 요소 순서 변경

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

질문사항

마스터 컴포넌트 내에 있는 요소(예: a, b, c)의 순서를 인스턴스에서 변경할 수 있는 방법이 있을까요?

답변

마스터 컴포넌트 내에 있는 요소의 순서를 인스턴스에서 변경하는 가장 효과적인 방법은 Auto Layout을 활용하는 것입니다.

마스터 컴포넌트 설정:

`a`, `b`, `c` 각각을 개별 컴포넌트 또는 프레임으로 만듭니다.

이 요소들을 포함하는 상위 프레임(마스터 컴포넌트)에 Auto Layout을 적용합니다. Auto Layout이 적용된 프레임 내의 요소들은 드래그 앤 드롭으로 쉽게 순서를 변경할 수 있습니다.

인스턴스에서 순서 변경:

마스터 컴포넌트의 인스턴스를 생성합니다.

인스턴스 내에서 `a`, `b`, `c` 요소를 선택하고 드래그 앤 드롭으로 순서를 변경할 수 있습니다. Auto Layout이 적용되어 있기 때문에 순서 변경 시 레이아웃이 자동으로 조정됩니다.

다른 방법 (Swap Instance):

만약 `a`, `b`, `c`가 각각 다른 컴포넌트이고, 이들을 담는 상위 컴포넌트가 있다면, 상위 컴포넌트 내에 `a`, `b`, `c`를 위한 슬롯(placeholder)을 만들고, 각 슬롯에 `Swap Instance` 속성을 부여하여 인스턴스에서 다른 컴포넌트로 교체하는 방식으로 순서를 '바꾸는' 효과를 낼 수도 있습니다. 하지만 이는 '순서 변경'보다는 '내용 교체'에 가깝습니다.