컴포넌트 & 인스턴스컴포넌트 관리

하위 컴포넌트 Variants, 상위 크기 변경

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

질문사항

하위 컴포넌트의 사이즈가 Variants로 정의되어 있을 때, 상위 컴포넌트에서 하위 컴포넌트의 사이즈 Variant를 변경해도 상위 컴포넌트의 전체 크기는 자동으로 변경되지 않는 것인가요?

답변

네, 일반적으로 하위 컴포넌트의 사이즈 Variant를 변경하더라도 상위 컴포넌트의 전체 크기가 자동으로 변경되지 않을 수 있습니다. 이는 상위 컴포넌트가 어떻게 구성되어 있는지에 따라 달라집니다.

핵심 원리:

Auto Layout의 역할: 상위 컴포넌트가 Auto Layout으로 구성되어 있다면, 하위 컴포넌트의 크기 변경에 따라 상위 컴포넌트의 크기가 자동으로 조절될 수 있습니다. Auto Layout은 내부 콘텐츠의 크기에 따라 프레임 크기를 `Hug contents`로 설정하여 유동적으로 조절하기 때문입니다.

Fixed Size의 역할: 만약 상위 컴포넌트가 `Fixed width`나 `Fixed height`로 설정되어 있거나, Auto Layout이 적용되지 않은 일반 프레임이라면, 하위 컴포넌트의 크기가 변해도 상위 컴포넌트의 크기는 고정된 상태를 유지합니다.

자세한 설명:

상위 컴포넌트가 Auto Layout인 경우:

상위 컴포넌트가 Auto Layout으로 설정되어 있고, `Hug contents`로 크기 조절이 되어 있다면, 하위 컴포넌트의 사이즈 Variant가 변경되어 크기가 커지거나 작아질 때, 상위 컴포넌트도 그에 맞춰 자동으로 크기가 조절됩니다.

이것이 컴포넌트와 Auto Layout을 함께 사용하는 주된 이유 중 하나입니다.

상위 컴포넌트가 일반 Frame이거나 Fixed Size인 경우:

상위 컴포넌트가 Auto Layout이 아닌 일반 Frame이거나, Auto Layout이 적용되었더라도 `Fixed width` 또는 `Fixed height`로 설정되어 있다면, 하위 컴포넌트의 크기가 변해도 상위 컴포넌트의 크기는 고정된 값을 유지합니다. 이 경우, 하위 컴포넌트가 상위 컴포넌트의 경계를 넘어가거나 공간이 남을 수 있습니다.

해결 및 확인 방법:

상위 컴포넌트의 `Resizing` 속성을 확인하세요. `Hug contents`로 설정되어 있는지, 아니면 `Fixed width/height`로 설정되어 있는지에 따라 동작이 달라집니다.

하위 컴포넌트의 사이즈 Variant를 변경했을 때 상위 컴포넌트가 자동으로 조절되기를 원한다면, 상위 컴포넌트에 Auto Layout을 적용하고 `Hug contents`로 설정해야 합니다.