질문사항
피그마 컴포넌트에서 아이콘 유무에 따라 텍스트 위치가 밀리지 않고 동일한 폭과 구조를 유지하는 방법을 알고 싶습니다. 아이콘이 없는 경우에도 우측 텍스트가 시각적으로 동일한 위치에 정렬되도록 설정하는 가장 적절한 방식은 무엇인가요?
답변
피그마 컴포넌트에서 아이콘 유무에 따라 텍스트 위치가 밀리지 않도록 동일한 폭과 구조를 유지하는 방법은 Auto Layout과 Component Properties를 활용하여 효과적으로 해결할 수 있습니다.
가장 적절한 방식: Boolean Property와 빈 공간 확보
Auto Layout 설정: 아이콘과 텍스트를 포함하는 요소를 Auto Layout으로 묶습니다. 아이콘과 텍스트 사이의 `Spacing between items`를 적절히 설정합니다. 핵심: 아이콘이 들어갈 공간을 확보하기 위해, 아이콘 레이어 자리에 투명한 빈 프레임(Placeholder Frame)을 만듭니다. 이 빈 프레임에 아이콘과 동일한 `Fixed width`와 `Fixed height`를 부여합니다. 텍스트 레이어는 `Fill container`로 설정하여 남은 공간을 채우도록 합니다.Component Properties (Boolean Property) 활용: 메인 컴포넌트에서 실제 아이콘 레이어(또는 아이콘을 담는 프레임)를 선택합니다. 우측 디자인 패널의 `Layer` 섹션에서 `Visible` 옆의 `Apply component property` 아이콘을 클릭합니다. `Create property`를 선택하고 `Name`을 `Show icon` (또는 `Has icon`) 등으로 설정하고 `Value`를 `true`로 둡니다. 이제 인스턴스에서 `Show icon` 토글을 `false`로 바꾸면 실제 아이콘이 숨겨집니다. 중요: 아이콘이 숨겨지더라도, 그 자리에 `Fixed width/height`를 가진 투명한 빈 프레임이 남아있기 때문에 Auto Layout은 이 빈 프레임을 하나의 요소로 인식하여 공간을 유지합니다. 따라서 텍스트의 위치가 밀리지 않고 동일한 정렬을 유지할 수 있습니다.다른 고려 사항:
Variant 사용: 아이콘이 있는 버전과 없는 버전을 각각 Variant로 만들 수도 있습니다. 하지만 이 경우, 아이콘이 없는 Variant에서는 아이콘 레이어를 완전히 삭제하거나 숨겨야 하는데, Auto Layout의 기본 동작상 레이어가 사라지면 공간이 자동으로 줄어들어 텍스트가 밀릴 수 있습니다. 위에서 설명한 '빈 프레임으로 공간 확보' 방식을 Variant 내에서도 적용해야 합니다. Slot 컴포넌트 활용: 아이콘 자리에 `Slot` 컴포넌트를 만들고, 이 `Slot` 컴포넌트에 `Fixed width`를 줍니다. 아이콘이 필요 없으면 `Slot`을 비워두고, 필요하면 아이콘 인스턴스를 `Slot`에 넣는 방식도 유사하게 활용될 수 있습니다.