오토레이아웃

Figma로 만드는 디자인시스템/2) 프레임과 오토레이아웃

오토레이아웃을 파.괘.한.다 : 독립 포지셔닝(Absolute Positioning)

지난 시간에 배웠던 오토레이아웃 써 보니 어떠셨나요? 분명히 쓰기 힘들고, 불편한 지점이 많다고 생각하시는 분들도 많을 겁니다. 특히 자동 배치 규칙을 적용하지 말아야 할 순간도 있죠. 그래서 오늘은 오토 레이아웃을 벗어난 요소를 지정하는 독립 포지셔닝 기능에 대해서 알아보겠습니다. 1. 독립 포지셔닝(Absolute Positioning) 원래 오토레이아웃을 상위 프레임 요소에 사용하게 되면, 하위 요소들의 위치는 무조건 규칙에 따라 배열됩니다. 예전에는 이 부분을 새 프레임을 적용해서 씌운 채로 만드는 경우가 많아 레이어 수 때문에 과한 디자인 형식이 될 때가 많았습니다. 수정하기도 어려웠구요. 그러나 독립 포지셔닝 기능을 사용하면 오토 레이아웃에 적용되지 않는 요소를 만들 수 있기 때문에, 원하는 ..

Figma로 만드는 디자인시스템

Figma #config2022 (2) 오토 레이아웃 리디자인 (Redesigned auto layout)

그 동안 불편했던 오토레이아웃이 다시 디자인되었음. 꽤 많은 변화가 있으므로 차근차근 살펴보자. 1. 리사이징 옵션 업데이트 Update to resizing options 리사이징 옵션이 기존 따로 있던 설정(좌)에서 사이즈 옵션 내에 있는 요소(우))로 변경됨. 옵션은 기존과 같다. {고정 너비/높이 Fixed Width/height} | {컨텐츠 감싸기 Hug contents} | {컨테이너 채우기 fill container} 2. 캔버스 컨트롤 Canvas Controls 화면 요소에서 여백 등 관리를 직접 할 수 있다. 요소 중앙 쪽에 있는 핑크색 작은 바를 드래그하면 조절이 가능하다. 단축키 shift + alt(opt)와 함께 드래그 앤 드롭 하면 전체 여백을 한번에 줄 수 있다. 3. 절대..

frogOlis
'오토레이아웃' 태그의 글 목록