피그마 Auto Layout

Auto layout은 프레임 및 구성 요소에 추가할 수 있는 속성이다. 이를 통해 채워지거나 축소되는 디자인을 만들고 내용이 변경되면 리플로우 할 수 있다. 이것은 새 레이어를 추가하거나 더 긴 텍스트 문자열을 수용하거나 디자인이 발전함에 따라 정렬을 유지해야 할 때 유용하다.

Auto layout을 사용하는 방법에는 여러 가지가 있다.

• 텍스트 레이블을 편집할 때 커지거나 작아지는 버튼을 만든다.
• 항목이 추가, 제거 또는 숨겨짐에 따라 조정되는 목록을 작성하자.
• 자동 레이아웃 프레임을 결합하여 완전한 인터페이스를 구축한다.

Auto layout은 움직이는 부분과 용도가 많은 강력한 기능이다. 이 글에서는 프레임에 자동 레이아웃을 추가하는 방법과 각 속성이 작동하는 방법을 보여준다.

Auto layout 추가

프레임이나 선택한 개체에 자동 레이아웃을 추가할 수 있다. 여기에는 다음이 포함된다.

• 새 프레임 또는 빈 프레임
• 기존 콘텐츠가 있는 프레임
• 구성 요소 및 구성 요소 세트
• 레이어 및 개체의 그룹 또는 기타 선택

다음 몇 곳에서 선택한 프레임, 구성 요소 또는 구성 요소 집합에 자동 레이아웃을 추가할 수 있다.

• 바로 가기 키를 사용한다. Shift + A
• 오른쪽 사이드바에서 + 프레임이 선택된 자동 레이아웃 옆에 있다.
• 프레임 또는 개체를 마우스 오른쪽 버튼으로 클릭하고 자동 레이아웃 추가를 선택한다.

Auto layout 속성

자동 레이아웃이 있는 프레임은 일반 프레임과 속성이 다르다. 자동 레이아웃을 적용하면 오른쪽 사이드바에 몇 가지 변경 사항이 표시된다.

프레임을 자동 레이아웃하려면 다음을 수행할 수 없다.

• 🚫 해당 프레임에 레이아웃 그리드(Layout grids) 추가
• 🚫 자동 레이아웃 프레임 내의 모든 개체에 제약 조건 적용(Constraints)
• 🚫 프레임 내의 모든 개체에 스마트 선택 사용(Smart selection)

방향(direction)

방향은 자동 레이아웃 프레임이 흐르는 방식을 설명한다.

• 수직(vertical)을 선택하여 y축을 따라 개체를 추가, 제거 및 재 정렬한다. 예: 목록 내의 개체 또는 뉴스피드 또는 타임라인 내의 게시물.
• 가로(horizontal)를 선택하여 x축을 따라 개체를 추가, 제거 및 재 정렬한다. 예: 버튼 행 또는 모바일 탐색 메뉴의 아이콘.

Figma는 현재 수평 또는 수직으로 한 번에 한 방향만 지원한다. 양방향을 사용하는 디자인을 작성하려면 자동 레이아웃 프레임을 결합하거나 중첩해야 한다.

아래 예에서는 제목, 설명 및 상영 시간이 있는 카드를 만들기 위해 수직 자동 레이아웃 프레임 내에 수평 자동 레이아웃 프레임을 중첩했다.

아이템 사이의 간격

자동 레이아웃 프레임에서 항목 사이의 간격(spacing between items)을 제어할 수 있다.

스마트 선택과 달리 캔버스의 간격을 조정할 수 있는 방법이 없다. 대신 오른쪽 사이드바의 자동 레이아웃 섹션에 있는 간격 필드를 사용해야 한다.

• 수평 아이콘 사이의 수평(Horizontal) 공간
• 수직 아이콘 사이의 수직(Vertical) 공간

필드에 숫자를 입력하거나 화살표 키를 사용하여 값을 조금씩 이동하거나 커서를 사용하여 필드를 문지른다.

안 여백(padding)

패딩은 자식 개체와 자동 레이아웃 프레임의 경계 사이의 빈 공간이나 공백을 제어합니다. 패딩을 균일하게 설정하거나 상단, 오른쪽, 하단 및 왼쪽 패딩에 대해 다른 값을 가질 수 있습니다.

• 에 단일 값을 입력한다. 패딩 아이콘 필드를 사용하여 모든 면에 동일한 패딩을 설정하거나 CSS 약식을 사용하여 개별 값을 설정한다. 예를 들어, 입력 1,2,3,4 하면 값이 각각 위쪽: 1, 오른쪽: 2, 아래쪽: 3, 왼쪽: 4로 설정된다. 또는 입력 1,2 하면 값이 위/아래: 1 및 왼쪽/오른쪽: 2로 설정된다.
• 각 면에 대해 고유한 패딩을 수동으로 설정하려면 정렬 및 분포 설정을 열고 각 값을 개별적으로 조정한다.

정렬(alignment)

자동 레이아웃 프레임 내에서 자식 개체를 정렬하는 방법을 선택한다. 자동 레이아웃 프레임의 방향과 분포는 사용 가능한 정렬 옵션을 결정한다.

일반 프레임의 개체와 달리 개체의 정렬을 개별적으로 제어할 수 없다. 이러한 이유로 부모 자동 레이아웃 프레임에서 자식 개체의 정렬을 설정한다.

인터랙티브 그리드를 사용하여 프레임의 어린이를 위한 9가지 레이아웃 옵션 중에서 선택한다.

분포가 Space between으로 설정된 경우 각 방향에 대해 세 가지 옵션이 있다.

• ↓ 세로 자동 레이아웃: Left, Center, Right
• → 수평 자동 레이아웃: Top, Center, Bottom

배포가 Packed로 설정된 경우 각 방향에 대해 동일한 9가지 옵션이 있다.

• Top left
• Top center
• Top right
• Left
• Center
• Right
• Bottom left
• Bottom center
• Bottom right

분포(distribution)

프레임의 자식 개체에 대한 정렬 규칙을 설정했으면 해당 개체가 해당 프레임 내에서 배포되는 방식을 선택한다.

정렬 패널에서, 화살표를 선택하면 다음 항목을 확인한다.

• Packed: 프레임의 개체가 함께 그룹화된다. 이 옵션을 사용하면 프레임에 있는 개체를 최대한 가깝게 유지하고 함께 정렬할 수 있다.
• Space between: 프레임의 개체 사이에는 프레임에 대해 설정된 방향 및 정렬을 따라 균등하게 분포된 간격이 있다. 이 옵션을 사용하여 프레임에서 개체를 늘린다.

크기 조정(resizing)

자동 레이아웃의 가장 강력한 기능 중 하나는 자동 레이아웃 프레임에서 개체의 크기를 제어하는 ​​기능이다.

상위 자동 레이아웃 프레임의 크기 조정 동작을 설정하여 하위 개체에 대한 변경 사항을 적용한다. 크기 조정 설정은 드롭다운 메뉴와 크기 조정 패널을 사용하여 X 및 Y축 모두에 있는 개체에 개별적으로 적용할 수 있다.

고정 너비(fixed width) 또는 높이(height)

자동 레이아웃 프레임이 고정(Fixed) 너비 또는 높이로 설정된 경우 프레임 크기 값은 프레임 안의 내용에 관계없이 동일하게 유지된다. 프레임의 크기는 길이가 변하는 텍스트 문자열과 같이 프레임 안에 있는 개체의 변경 사항에 응답하지 않는다.

허그 콘텐츠(hug content)

자동 레이아웃 프레임을 허그 콘텐츠(Hug content)로 설정하여 하위 개체에 따라 자체 크기를 조정한다. 프레임은 패딩 값을 존중하면서 그 안의 개체를 둘러싸기 위해 가능한 가장 작은 치수를 유지한다.

컨테이너 채우기(fill container)

컨테이너 채우기(Fill container)로 설정된 자동 레이아웃 프레임의 개체는 상위 프레임의 너비 및 높이로 늘어난다.

제약 조건(constraints) 및 크기 조정(resizing)

자동 레이아웃 프레임 내의 자식 개체에는 제약 조건을 적용할 수 없다. 대신 크기 조정 속성을 사용하여 개체가 프레임에 응답하는 방식 또는 프레임의 개체 크기가 조정되는 방식을 정의할 수 있다.

일반 프레임 내에 중첩되어 있는 경우 자동 레이아웃 프레임에 여전히 제약 조건을 적용할 수 있다. 자동 레이아웃 프레임에 대한 제약 조건과 그 안의 모든 개체에 대한 크기 조정 동작을 모두 설정할 수 있는 제약 조건 및 크기 조정(Constraints and resizing) 섹션이 표시된다.

예를 들어, 자동 레이아웃을 사용하여 탐색 모음을 만든 경우 다른 화면 크기에 맞게 조정할 수 있다. 제약 조건을 사용하여 상위 프레임의 크기가 조정될 때 탐색 모음이 올바르게 응답하는지 확인하고 크기 조정을 통해 탐색 모음 내의 개체가 이러한 변경 사항에 응답하는 방식을 제어할 수 있다.

개체 추가, 편집 및 제거

자동 레이아웃 프레임에 개체 추가

자동 레이아웃 프레임에 레이어나 개체를 추가할 수 있다.

1. 자동 레이아웃 프레임 위로 개체를 클릭하고 끓다.
2. 파란색 표시기를 사용하여 개체를 배치할 위치를 선택한다.

자동 레이아웃 프레임 중첩

다른 자동 레이아웃 프레임 내에 자동 레이아웃 프레임을 중첩할 수 있다. 이를 통해 수평 및 수직 레이아웃을 결합하여 복잡한 인터페이스를 생성할 수 있다.

자동 레이아웃 프레임을 중첩하면 중첩 프레임에 부모 속성과 자식 속성이 모두 포함된다.

아래 예에는 4가지 수준의 자동 레이아웃이 있다.

1. Button: 각 버튼은 수평 자동 레이아웃이다. 이렇게 하면 레이블 텍스트를 변경할 때 버튼이 커지거나 줄어들 수 있다.
2. Button Row: 그런 다음 두 버튼을 다른 수평 자동 레이아웃에 추가한다. 이렇게 하면 형제의 내용이 변경될 때 객체가 응답할 수 있다.
3. Post: 그런 다음 포스트의 다른 객체와 함께 수직 자동 레이아웃에 버튼을 추가한다. 여기에는 설명, 이미지 및 사용자 프로필이 포함된다.
4. Timeline: 타임라인을 만들기 위해 세로 자동 레이아웃에 3개를 추가했다. 자동 레이아웃 프레임은 캔버스에 있는 최상위 프레임(top-level frame)이다.

다음과 같은 몇 가지 방법으로 자동 레이아웃 프레임을 중첩할 수 있다.

• 자동 레이아웃 프레임을 기존 자동 레이아웃 프레임으로 드래그
• 선택한 자동 레이아웃 프레임(및 기타 개체) 주위에 새 자동 레이아웃 프레임을 만든다.

1. 자동 레이아웃 프레임과 포함할 다른 레이어를 선택한다.
2. 키보드 단축키 Shift + A를 사용하여 자동 레이아웃을 추가한다.
3. Figma는 선택 항목 주위에 프레임을 만들고 자동 레이아웃을 추가한다.

복제 개체(duplicate objects)

기존 개체를 복제하여 자동 레이아웃에 추가할 수 있다. Figma는 원본 개체의 오른쪽(가로) 또는 아래(세로)에 복제본을 추가한다.

1. 자동 레이아웃 프레임에서 자식 개체를 선택한다.
2. 바로 가기 키를 사용하여 복제한다.
   • 맥: ⌘ Command + D
   • 윈도우: Ctrl + D

개체 정렬(arrange) 또는 재정렬(reorder)

자동 레이아웃 프레임에서 개체가 나타나는 순서를 변경할 수 있다. 이는 주요 구성 요소 또는 구성 요소 외부의 자동 레이아웃 프레임에서만 지원된다.

1. 자식 개체를 선택한다. 레이어가 중첩된 경우 수정자 키를 사용하여 심층 선택해야 한다.
   • 맥: ⌘ Command
   • 윈도우: Ctrl
2. 개체를 재 정렬하는 몇 가지 방법이 있다.
   • 키보드의 화살표 키를 사용하여 개체를 새 위치로 이동한다.
   • 개체를 클릭하여 새 위치로 끓다.

개체 제거

기본 구성 요소 또는 자동 레이아웃 프레임에서 개체를 제거하려면:

• 자동 레이아웃 프레임 외부로 개체를 끓다.
• 레이어 보기/가시성 아이콘을 토글 한다.
• 개체를 선택하고 Delete 또는 Backspace키 를 누릅니다.

인스턴스에서 레이어나 개체를 삭제할 수 없다. 시도하면 Figma는 레이어를 제거하는 대신 레이어의 가시성을 토글 한다.

Auto layout 제거

자동 레이아웃을 제거하면 프레임의 일반 속성에 액세스 할 수 있다.

자동 레이아웃을 제거하는 몇 가지 방법이 있다.

• 프레임을 마우스 오른쪽 버튼으로 클릭하고 자동 레이아웃 제거(Remove auto layout)를 선택한다.
• 오른쪽 사이드바에서 자동 레이아웃 옆에 있는 ‘-‘을 클릭

Auto layout이 있는 프로토타입

자동 레이아웃으로 프로토타입을 만들 때 몇 가지 염두에 두어야 할 사항이 있다.

Smart Animate 전환은 프레임의 배경을 고려하지 않는다. 스마트 애니메이트와 함께 Slide in 또는 Move in 전환을 사용하려면 배경을 추가해야 한다. 일반 프레임 내에 직사각형을 만들고 그 안에 자동 레이아웃 프레임을 배치할 수 있다.

프레임에 스크롤 오버플로를 적용하려면 프레임 경계를 넘어 확장할 콘텐츠가 있어야 한다.

자동 레이아웃 부모의 치수는 콘텐츠 기반이므로 개체에 맞게 크기가 조정된다. 스크롤 오버플로를 복제하려면 자동 레이아웃을 일반 프레임 안에 넣어야 한다.

Components와 함께 auto layout 사용

구성 요소는 프레임이므로 자동 레이아웃을 추가할 수 있다. 자동 레이아웃을 각 구성 요소에 개별적으로 추가해야 한다. 현재 자동 레이아웃을 대량으로 추가할 수 있는 방법이 없다.

주요 컨퍼넌트(Main components)

✅ 수직 및 수평 패딩(Padding) 조정
✅ 개체 사이의 간격(Spacing between) 조정
✅ 구성 요소 내에서 개체 재정렬
✅ 새 개체 추가

컨퍼넌트 인스턴스(Component instances)

✅ 수직 및 수평 패딩(Padding) 조정
✅ 개체 사이의 간격(Spacing between) 조정
🚫 구성 요소 내에서 개체 재정렬
🚫 새 개체 추가

Auto layout 업데이트

이전 auto layout 프레임의 정렬 업데이트

이전 버전의 자동 레이아웃에서는 정렬이 자식 개체 수준에서 제어되었다. 이것은 자동 레이아웃 프레임에서 다른 자식 개체에 대해 다른 정렬을 가질 수 있음을 의미했다.

우리는 사용자들 사이에서 일반적이지 않은 동작을 발견하여 2020년 11월에 자동 레이아웃 작동 방식을 단순화하기 위해 정렬 컨트롤을 상위 프레임으로 옮겼으며, 최신 업데이트에서는 모든 자식 개체를 같은 방식으로 정렬해야 한다.

2020년 11월 이전에 생성된 다른 정렬의 자식이 있는 자동 레이아웃 프레임이 이미 있는 경우 다음이 표시될 수 있다.

자동 레이아웃 값을 조정하려면 먼저 개별 자식 정렬을 제거하기 위해 프레임을 업데이트해야 한다. 프레임을 업데이트한 후:

• Figma는 원래 디자인을 시각적으로 유지하기 위해 노력할 것이다. 많은 경우 Figma는 다양한 정렬을 허용하기 위해 중간 프레임을 추가한다. 이러한 프레임의 이름은 자동 추가(Auto-added) 프레임이다.
• 이 변경 사항을 즉시 취소할 수 있지만 창을 클릭하거나 페이지를 새로 고치면 나중에 업데이트를 취소할 수 없다.
• 기본 구성 요소를 업데이트한 경우 해당 인스턴스가 올바르게 업데이트되었는지 확인한다.

정렬이 다른 하위 항목으로 디자인을 생성하려면:

1. 다르게 정렬하려는 항목을 선택한다.
2. 키보드 단축키를 사용하여 항목에 자동 레이아웃을 추가한다. Shift + A.
3. 새로 생성된 프레임을 정렬할 축의 채우기 컨테이너(Fill container)로 설정한다.
4. 필요에 따라 정렬을 설정한다.

출처: Auto Layout in Figma