질문사항
Figma Auto Layout에서 양쪽 아이콘 중 하나를 숨김 처리했을 때, 가운데 텍스트를 항상 중앙에 고정하는 방법이 궁금합니다. 너비가 변경되어도 중앙 정렬이 유지되도록 하고 싶습니다.
답변
Figma Auto Layout에서 양쪽 아이콘 중 하나를 숨김 처리했을 때 가운데 텍스트를 중앙에 고정하는 방법은 몇 가지가 있습니다.
방법 1: Absolute Position (절대 위치) 활용
텍스트 레이어를 선택하고, Auto Layout 패널에서 `Absolute position`을 활성화합니다.텍스트 레이어를 부모 프레임의 중앙에 수동으로 배치합니다.이 방법은 텍스트가 Auto Layout 흐름에서 벗어나 독립적으로 위치하므로, 양쪽 아이콘의 가시성 여부와 관계없이 항상 중앙에 고정됩니다. 텍스트의 너비는 `Fill container`로 설정하여 부모 프레임에 맞게 조절될 수 있도록 합니다.방법 2: 중첩된 Auto Layout과 "Space between" 활용 (더 일반적)
전체 컴포넌트(아이콘-텍스트-아이콘)를 하나의 Auto Layout 프레임으로 묶습니다.이 프레임의 `Horizontal gap`을 `Space between`으로 설정합니다.가운데 텍스트 레이어는 `Fill container`로 설정합니다.양쪽 아이콘 중 하나를 숨김 처리(`Layer` 패널에서 눈 아이콘 클릭 또는 `Shift + Cmd/Ctrl + H`)하면, `Space between` 속성 때문에 남은 아이콘과 텍스트가 자동으로 공간을 채우며 정렬됩니다.만약 텍스트를 완벽하게 중앙에 고정하고 싶다면, 텍스트 레이어를 별도의 Auto Layout 프레임으로 한 번 더 감싸고, 이 프레임의 `Horizontal resizing`을 `Fill container`로 설정한 뒤, 내부 텍스트의 정렬을 `Center`로 맞춥니다. 숨겨지는 아이콘이 차지하던 공간만큼 텍스트가 확장되면서 중앙에 위치하게 됩니다.방법 3: Variants와 Conditional Logic (프로토타이핑 시)
만약 프로토타이핑에서 동적으로 아이콘을 숨기고 텍스트를 중앙에 배치해야 한다면, 아이콘이 있는 상태와 없는 상태의 두 가지 Variant를 만들고, 각 Variant에서 텍스트의 정렬을 조절하는 방법도 고려할 수 있습니다.일반적으로는 방법 2의 중첩된 Auto Layout과 `Space between`을 활용하는 것이 Figma의 Auto Layout 철학에 더 부합하며 유연합니다.