컴포넌트 & 인스턴스

컴포넌트 아이콘 크기 조절 비활성화

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

질문사항

컴포넌트 내 아이콘을 인스턴스 스왑으로 설정했는데, 해당 컴포넌트 인스턴스에서 아이콘의 크기를 변경하려고 하면 사이즈 조절 옵션이 비활성화됩니다. 아이콘 크기를 유연하게 조절하려면 어떻게 해야 하나요?

답변

컴포넌트 인스턴스 내에서 아이콘 크기 조절 옵션이 비활성화되는 것은 일반적으로 아이콘 컴포넌트 자체의 제약 조건 때문입니다. 이를 해결하고 유연하게 크기를 조절하려면 다음과 같은 방법을 고려할 수 있습니다.

원본 아이콘 컴포넌트에 `Scale` 제약 조건 적용:

아이콘의 마스터 컴포넌트를 선택하고, 오른쪽 디자인 패널의 `Constraints` 섹션에서 `Scale`로 설정합니다. 이렇게 하면 아이콘이 부모 프레임의 크기에 따라 비례적으로 조절될 수 있습니다.

주의: 아이콘이 벡터 이미지인 경우 `Scale`이 잘 작동하지만, 픽셀 기반 이미지인 경우 해상도 문제가 발생할 수 있습니다.

아이콘을 감싸는 프레임 활용:

아이콘을 직접 컴포넌트로 만드는 대신, 아이콘을 특정 크기의 프레임(예: 14x14px)으로 감싸서 이 프레임을 컴포넌트로 만듭니다.

이 프레임 컴포넌트 내에서 아이콘 자체에는 `Center` 또는 `Scale` 제약 조건을 적용합니다.

이렇게 하면 인스턴스에서 프레임 컴포넌트의 크기를 조절할 때, 그 안에 있는 아이콘도 함께 조절됩니다.

Variants를 활용한 크기 관리:

가장 권장되는 방법 중 하나입니다. 아이콘 마스터 컴포넌트 자체에 여러 크기의 Variants를 만듭니다 (예: `size=14`, `size=16`, `size=20`).

각 Variant는 해당 크기에 맞는 아이콘을 포함합니다.

인스턴스에서는 속성 패널에서 원하는 `size` Variant를 선택하여 아이콘 크기를 변경할 수 있습니다. 이 방법은 디자인 시스템의 일관성을 유지하는 데 매우 효과적입니다.

Auto Layout과 `Fill container` 활용:

아이콘이 들어갈 부모 컴포넌트(예: 버튼)가 Auto Layout으로 되어 있다면, 아이콘 인스턴스에 `Fill container` 제약 조건을 적용하고, 부모 컴포넌트의 패딩을 조절하여 아이콘 크기를 간접적으로 조절할 수 있습니다. 이 경우 아이콘 자체의 크기보다는 아이콘이 차지하는 공간을 조절하는 방식입니다.

이러한 방법들을 통해 아이콘 컴포넌트의 유연성을 높이고 디자인 시스템 내에서 효율적으로 관리할 수 있습니다.