디자인에 오토레이아웃 추가

오토레이아웃을 사용하면 채우기에 따라 늘어나고, 크기에 맞게 줄어들고, 콘텐츠가 리플로되도록 반응형 디자인을 만들 수 있습니다. 예를 들어,

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

오토레이아웃이 있는 프레임은 일반 프레임과 다른 속성을 가집니다. 오토레이아웃을 적용하면 오른쪽 사이드바에서 몇 가지 변경 사항을 확인할 수 있습니다. 오토레이아웃 프레임에는 다음을 수행할 수 없습니다.

• 🚫 해당 프레임에 레이아웃 그리드 추가하기
• 🚫 오토레이아웃 프레임 내의 모든 개체에 제약조건 적용하기(개체의 절대 위치가 활성화되어 있지 않은 경우).
• 🚫 프레임 내 모든 개체에 스마트 셀렉션 사용하기

오토레이아웃 추가

프레임이나 선택된 개체에 오토레이아웃을 추가할 수 있습니다. 여기에는 다음이 포함됩니다.

• 새로운 프레임 또는 빈 프레임
• 기존 콘텐츠가 있는 프레임
• 컴포넌트 및 컴포넌트 세트
• 레이어 및/또는 개체의 그룹 또는 다른 선택 항목

선택한 프레임이나 컴포넌트에 오토레이아웃을 추가하는 방법에는 여러 가지가 있습니다.

• 키보드 바로가기 ⇧ Shift A를 사용합니다.
• 오른쪽 사이드바에서, 프레임을 선택한 상태로 오토레이아웃 옆에 있는 (을)를 클릭합니다.
• 프레임 또는 개체를 마우스 오른쪽 버튼으로 클릭하고 오토레이아웃 추가를 선택합니다.

오토레이아웃을 사용하면 중첩된 개체가 자동 간격, 컨테이너 채우기, 가운데 정렬로 설정됩니다. 오토레이아웃의 다양한 속성에 대해 알아보세요.

오토레이아웃 제안

오토레이아웃 제안 기능을 사용하면 버튼을 한 번만 클릭하여 디자인을 반응형으로 바꿀 수 있습니다.

오토레이아웃 제안을 사용하면 Figma는 프레임이나 컴포넌트의 어떤 개체를 오토레이아웃 프레임에 배치해야 할지 결정한 다음, 전체 디자인을 반응형으로 만드는 데 필요한 만큼 오토레이아웃 프레임을 추가합니다. 이러한 오토레이아웃 프레임은 디자인의 배치를 유지하려 하면서 한 번에 생성됩니다.

이렇게 하면 프레임별로 오토레이아웃을 추가하는 지루한 작업을 할 필요가 없어 시간이 절약됩니다.

몇 가지 위치에서 이 옵션에 액세스할 수 있습니다.

• 다음 키보드 단축키를 사용합니다.
  • Mac: ⌃ Control ⇧ Shift A
  • Windows ⌃ Control Alt ⇧ Shift A
• 프레임 또는 개체를 마우스 오른쪽 버튼으로 클릭하고 추가 레이아웃 옵션 > 오토레이아웃 제안으로 이동
• 액션 메뉴에서 오토레이아웃 제안 선택

이 액션을 사용한 후에는 생성된 중첩 오토레이아웃 프레임이 왼쪽 패널의 레이어 섹션에 파란색 점으로 표시됩니다.

개체 추가, 편집 및 제거

오토레이아웃 프레임에 개체 추가

오토레이아웃 프레임에 레이어나 개체를 추가할 수 있습니다.

1. 개체를 클릭하여 오토레이아웃 프레임 위로 드래그합니다.
2. 파란색 표시기를 사용하여 개체를 배치할 위치를 선택합니다.

오토레이아웃 프레임 중첩

오토레이아웃 프레임을 다른 오토레이아웃 프레임 내에 중첩할 수 있습니다. 이를 통해 수평 및 세로 레이아웃을 결합하여 복잡한 인터페이스를 만들 수 있습니다.

오토레이아웃 프레임을 중첩하면 중첩된 프레임에는 부모 속성과 자식 속성이 모두 있게 됩니다.

아래 예에서는 오토레이아웃이 네 가지 수준으로 있습니다.

1. 버튼: 각 버튼은 수평 오토레이아웃입니다. 이렇게 하면 라벨 텍스트를 변경할 때 버튼의 크기가 커지거나 작아질 수 있습니다.
2. 버튼 행: 그런 다음 두 버튼을 다른 수평 오토레이아웃에 추가합니다. 이렇게 하면 형제 개체의 콘텐츠를 변경할 때 해당 개체가 반응할 수 있습니다.
3. 게시물: 그런 다음 게시물의 다른 개체와 함께 수직 오토레이아웃에 버튼을 추가합니다. 여기에는 설명, 이미지, 사용자 프로필이 포함됩니다.
4. 타임라인: 타임라인을 만들 수 있도록 세로 오토레이아웃에 세 개를 추가했습니다. 오토레이아웃 프레임은 캔버스에 있는 최상위 프레임입니다.

오토레이아웃 프레임을 여러 가지 방법으로 중첩할 수 있습니다.

• 오토레이아웃 프레임을 기존 오토레이아웃 프레임으로 드래그합니다.
• 선택한 오토레이아웃 프레임(및 기타 개체) 주위에 새 오토레이아웃 프레임을 만듭니다.

1. 오토레이아웃 프레임과 포함하려는 다른 레이어를 선택합니다.
2. 오토레이아웃을 추가하려면 키보드 바로가기 ⇧ Shift A를 사용합니다.
3. Figma는 선택 항목을 중심으로 프레임을 만들고 오토레이아웃을 추가합니다.

개체 복제

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

1. 오토레이아웃 프레임에서 자식 개체를 선택합니다.
2. 키보드 바로가기를 사용하여 복제합니다.
   • Mac: ⌘ Command D
   • Windows: Ctrl D

개체 정렬 또는 순서 바꾸기

오토레이아웃 프레임에 개체가 나타나는 순서를 변경할 수 있습니다. 이 기능은 주요 컴포넌트나 컴포넌트 외부의 오토레이아웃 프레임에서만 지원됩니다.

1. 자식 개체를 선택합니다. 레이어가 중첩된 경우 수식 키를 사용하여 선택해야 합니다.
   • Mac: ⌘ Command
   • Windows: Ctrl
2. 다음과 같은 몇 가지 방법으로 개체 순서를 바꿀 수 있습니다.
   • 키보드의 화살표 키를 사용하여 개체를 새로운 위치로 이동합니다.
   • 개체를 클릭하고 새 위치로 드래그합니다.

개체 제거

주요 컴포넌트 또는 오토레이아웃 프레임에서 개체를 제거하려면:

• 개체를 오토레이아웃 프레임 밖으로 드래그합니다.
• (을)를 클릭하여 레이어 표시를 전환합니다.
• 개체를 선택하고 Delete 또는 Backspace 키를 누릅니다.

인스턴스에서는 레이어나 개체를 삭제할 수 없습니다. 시도하면 Figma는 레이어를 제거하는 대신 해당 레이어의 가시성만 전환합니다.

오토레이아웃 제거

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

오토레이아웃을 제거하는 방법에는 몇 가지가 있습니다.

• 프레임을 마우스 오른쪽 버튼으로 클릭하고 오토레이아웃 제거를 선택합니다.
• 오른쪽 사이드바에서 Auto layout(오토레이아웃) 옆에 있는 (을)를 클릭합니다.
• 키보드 바로가기를 사용합니다.
  • Mac: ⌥ Option⇧ ShiftA
  • Windows: Alt⇧ ShiftA

기타 고려 사항

오토레이아웃이 있는 프로토타입 제작

오토레이아웃을 사용하여 프로토타입을 만들 때는 몇 가지를 염두에 두어야 합니다.

스마트 애니메이션 전환은 프레임의 배경을 고려하지 않습니다. 스마트 애니메이션과 함께 슬라이드 인 또는 안으로 이동 전환을 사용하려면 배경을 추가해야 합니다. 일반 프레임 안에 직사각형을 만들고 그 안에 오토레이아웃 프레임을 배치할 수 있습니다. '슬라이드 인' 및 '안으로 이동' 전환 →

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

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

컴포넌트 및 인스턴스

컴포넌트는 프레임이므로 오토레이아웃을 추가할 수 있습니다. 각 컴포넌트에 개별적으로 오토레이아웃을 추가해야 합니다. 현재로선 일괄적으로 오토레이아웃을 추가할 수 있는 방법이 없습니다.