[Figma] Figma 주요 기능별 사용법 - 반응형 디자인

이제 6단계인 반응형 디자인을 진행하겠습니다. 이 단계에서는 오토 레이아웃을 설정하고 프레임을 리사이징하는 방법을 배우게 됩니다.

6. 반응형 디자인

6.1 오토 레이아웃

주요 기능:

• 오토 레이아웃은 요소가 반응형으로 배치되도록 합니다.

사용법:

1. 오토 레이아웃 설정: 요소를 선택한 후, 오른쪽 패널에서 Auto Layout 옵션을 활성화합니다.
2. 레이아웃 설정: 오토 레이아웃 패널에서 방향, 간격, 패딩 등을 설정합니다.

예시:

• 카드 레이아웃을 오토 레이아웃으로 설정합니다.

실습:

1. 카드 요소들을 선택하고 오토 레이아웃을 활성화합니다.
2. 방향을 Vertical, 간격을 20px로 설정합니다.

실습 단계별 스크린샷:

1. 오토 레이아웃 설정:

   • Homepage 프레임에서 카드 레이아웃을 구성할 여러 요소(예: 이미지, 텍스트 박스, 버튼 등)를 선택합니다.
   • 선택한 요소들을 그룹화한 후(Ctrl + G), 오른쪽 패널에서 Add Auto Layout 버튼을 클릭합니다.

2. 레이아웃 설정:

   • 오토 레이아웃 패널에서 방향을 Vertical로 설정합니다.
   • 요소 간 간격을 20px로 설정합니다.
   • 패딩 값을 조정하여 요소들 간의 여백을 설정합니다.

6.2 프레임 리사이징

주요 기능:

• 다양한 디바이스 크기에 맞게 프레임을 조정합니다.

사용법:

1. 프레임 크기 조정: 프레임을 선택하고 크기를 조정하여 다양한 디바이스 크기에 맞게 설정합니다.
2. 리사이즈 설정: 요소가 프레임 크기에 따라 유동적으로 변경되도록 설정합니다.

예시:

• 모바일, 태블릿, 데스크탑용 레이아웃을 각각 설정합니다.

실습:

1. Homepage 프레임을 복제하여 모바일과 태블릿 크기로 조정합니다.
2. 각 프레임에서 요소들이 유동적으로 배치되도록 설정합니다.

실습 단계별 스크린샷:

1. 프레임 크기 조정:

   • Homepage 프레임을 선택하고, Ctrl + D를 눌러 복제합니다.
   • 복제된 프레임의 크기를 모바일 크기(예: 375x812)로 조정합니다.

2. 리사이즈 설정:

   • 모바일 프레임에서 각 요소를 선택하고, 오른쪽 패널에서 리사이즈 옵션을 설정합니다.
   • 요소들이 프레임 크기에 맞게 유동적으로 변경되도록 Fill Container 또는 Hug Contents 옵션을 설정합니다.

예시 및 실습 결과

예시:

• 카드 레이아웃을 오토 레이아웃으로 설정하여 요소들이 일관되게 배치되도록 합니다.
• Homepage 프레임을 복제하여 모바일 크기로 조정하고, 요소들이 유동적으로 배치되도록 설정합니다.

실습 결과:

1. Homepage 프레임의 카드 레이아웃이 오토 레이아웃으로 설정되어 요소들이 반응형으로 배치됩니다.
2. 복제된 프레임이 모바일 크기로 조정되고, 각 요소들이 프레임 크기에 맞게 유동적으로 변경됩니다.

이제 여섯 번째 단계가 완료되었습니다. 다음 단계로 진행하면서 프로토타입을 만드는 방법을 배워보겠습니다.