[Figma] 프레임 정렬, Auto Layout

디자인을 할때 중요한것중에 정렬이 빠질순없죠

(제맘대로 중요하다고..생각...햇어요)

 

iOS개발자한테는 너무 익숙한 Auto Layout!!

맞아요 그개념이에요

 

제약사항을 걸어두면

위치가 바뀌어도 제약에 맞게 움직여요

 

 

오토레이아웃을 하기전에

우선 기본 정렬을 살펴볼게요

 

디자인창 위 쪽에 이러한 모습

딱봐도 뭔지 알정도로 잘 만들어놨네요 ㅎㅎ

 

하나씩 눌러보세요

원하는위치에 붙어요

이때 기준점은 자신의 부모프레임을 기준으로 정렬됩니다!

하나의 프레임이 어떻게 움직여도 부모프레임 안에서 정렬되는거에요

 

탁구공을 상자에 넣고 흔들면 공은 상자안에서만 움직이듯이..

(비유가 맞는지모르겟네요 ㅎㅎ..)

 

 

 

이제 오토레이아웃에 대해서 볼게요

 

제약사항을 준수한다..!

예를 들어 한 프레임을 부모프레임과

중앙으로 정렬해놓는다면

이리저리 움직여도 그 프레임은

여전히 중앙에 위치하게 되요

 

또는

 

글이 길어서 공간이 늘어나야 할때

수동적으로 늘려주는게아니라

자동적으로 늘려주는 것에 해당되겠네요

 

왼쪽이 초기상태

중앙이 중앙정렬만 이용한 경우

오른쪽이 오토레이아웃을 적용한 경우

 

제약을 추가하고 원하는 위치에

정렬을 한번해줘야 보기좋게

그 위치로부터 적용되는것 같아요

 

 

제약은 오른쪽 디자인창에서

왼쪽이미지의 선을 클릭하던가

오른쪽의 드롭박스를 내려서 선택할 수 있어요

 

 

그 제약사항에 세부 속성을 수정할 수 있어요

 

 

한 개일 때도 가능하고

여러개가 있다면

드래그를해서 전부선택 후

오토레이아웃부분에 +를 눌러서 추가할 수 있구요

가로세로방향, 간격등을 조절할 수 있어요