[피그마 기초 5강]오토레이아웃(Autolayout)기능 활용하는 방법

피그마의 파워풀한 기능은 오토레이아웃에 있습니다. 사실 오토레이아웃을 완벽하게 마스터하면 어느정도 모든 기능에 대해서 거의 다 활용할 수 있습니다. 드롭박스를 만든다던가, 라디오 버튼을 만든다던가 등 컴포넌트를 만들 때 활용되며 이 기능은 피그마의 핵심 기능이라 반드시 알고 마스터해야 합니다.

 

Autolayout 완벽하게 한번에 정리하기!

이제 프레임을 생성하고 그 위에 버튼을 생성하는 것을 해보겠습니다. 이제 슬슬 기초 영역에서 조금 응용 단계로 넘어가 보겠습니다. 

1. 오토레이아웃 기능을 활용하기 위해서 버튼을 만들어 보겠습니다.
텍스트를 클릭해서 버튼이라는 글씨를 프레임 위에 써줍니다.

 

2. 생성된 텍스트에 <Shift+a>로 오토레이아웃으로 전환해줍니다. 구별하기 힘드니깐 윤곽선(stroke)
을 줍니다.

3. 오토레이아웃 기능을 사용하면 자동 그 범위가 늘어나게 됩니다.

오토레이아웃을 이용하여 패딩값을 통해 버튼을 만들어 보았습니다. 해당 기능 추가적으로 컴포턴트를 이용해서 마우스가 오버핸드 되었을때 어떻게 변화가 일어나는지에 대해서도 추후에 디벨롭 해보겠습니다.