피그마 | 텍스트 길이에 따라 상위 레이어 크기 자동 조정 (오토 레이아웃 리사이징)

* velog에서 포스팅했던 글을 옮겨왔습니다.

디자이너가 아니어도 피그마로 포트폴리오나 간단한 UI 작업을 할 때 필요한 기능, 오토 레이아웃 리사이징

(제대로 파고 들어가면 부모, 자식 관계 비유를 통해 Fixed, hug, fill 등
자세한 개념 설명도 나와야겠지만 디자이너 아닌 대상에게 단순하게 오토 레이아웃 리사이징 방법을 설명하는 글이므로 패스)

---

텍스트를 포함하는 도형을 만든다고 가정했을 때,

예를 들어, 이런 식으로 텍스트 박스 형태를 만든다고 치자. 이렇게 만든 컴포넌트는

단순히 x,y 위치 상으로 겹쳐 보일 뿐 2개의 별개 레이어이다.
위처럼 만든 컴포넌트는 해당 피그마 문서 내에서 다양한 텍스트 길이로 여러 번 쓰게 될 것이다.

 

하지만 입력하는 텍스트의 길이에 맞게 도형 너비도 자동으로 늘어나지 않는다

단순히 2개의 레이어를 복붙해서 더 긴 텍스트를 작성하면 당연히 텍스트 레이어의 가로만 늘어나고 배경이 되는 도형 레이어의 길이는 그대로이다. 이건 2개의 레이어를 그룹핑한다고 해결되지 않는다. 그럴 때는 그룹이 아닌 프레임으로 관리하면 된다.

 

Auto Layout 적용해서 프레임으로 해결

2개의 레이어를 한 번에 선택하고 우측 디자인 패널에서 Auto Layout의 + 버튼을 눌러준다.
(전제: 텍스트 레이어가 도형 레이어보다 위에 위치)

 

그럼 상위 레이어인 텍스트 레이어만 남고 도형 레이어는 그 자체로 배경이 되듯 프레임으로 바뀐다.

 

 

 

이제는 하나의 프레임으로 묶인 컴포넌트를 선택하고 다시 우측 디자인 패널은 보면 Auto Layer 수치가 활성화된 것을 확인할 수 있고

 

 

설정된 수치의 패딩 값을 유지하며 텍스트를 작성하는대로 프레임 전체의 길이가 유동적으로 변하게 된다.