[Figma] Figma 주요 기능별 사용법 - 레이아웃 디자인

1단계인 레이아웃 디자인을 하나씩 상세하게 진행해 보겠습니다. 이 단계에서는 프레임을 생성하고 그리드를 사용하는 방법을 배우게 됩니다.

1. 레이아웃 디자인

1.1 프레임 생성

주요 기능:

• 프레임은 웹 페이지나 특정 섹션을 정의하는 데 사용됩니다. 각 프레임은 독립된 디자인 공간을 제공합니다.

사용법:

1. 프레임 도구 선택: F 키를 눌러 프레임 도구를 선택합니다.
2. 프레임 추가: 캔버스를 클릭하여 원하는 크기의 프레임을 생성하거나 드래그하여 크기를 조정합니다. 예를 들어, 기본 웹 페이지 크기는 1440x1024 픽셀입니다.
3. 프레임 이름 변경: 생성된 프레임의 이름을 변경하려면 왼쪽 레이어 패널에서 해당 프레임을 더블 클릭하고 이름을 입력합니다.

예시:

• 웹 페이지의 헤더, 본문, 푸터를 각각 다른 프레임으로 생성합니다.

실습:

1. 피그마를 열고 새 프로젝트를 만듭니다.
2. F 키를 눌러 1440x1024 크기의 프레임을 생성합니다.
3. 프레임의 이름을 Homepage로 변경합니다.

실습 단계별 스크린샷:

1. 프레임 도구 선택:

   • 피그마를 열고 새 파일을 만듭니다.
   • F 키를 눌러 프레임 도구를 선택합니다. 화면 상단에 프레임 도구가 활성화된 것을 확인할 수 있습니다.

2. 프레임 추가:

   • 캔버스를 클릭하여 1440x1024 크기의 프레임을 생성합니다. 프레임의 크기를 조정할 때, 오른쪽 패널에서 정확한 크기를 입력할 수도 있습니다.

3. 프레임 이름 변경:

   • 생성된 프레임을 왼쪽 레이어 패널에서 더블 클릭하고 이름을 Homepage로 변경합니다.

1.2 그리드 사용

주요 기능:

• 그리드는 요소를 정렬하고 균형 잡힌 레이아웃을 만들기 위해 사용됩니다.

사용법:

1. 그리드 활성화: 프레임을 선택한 상태에서 오른쪽 속성 패널에서 Layout Grid 섹션을 찾습니다.
2. 그리드 추가: + 아이콘을 클릭하여 그리드를 추가합니다.
3. 그리드 설정: 그리드 타입을 Column으로 선택하고 컬럼 수, 거터, 마진을 설정합니다.

예시:

• 12 컬럼 그리드를 설정하여 요소를 균형 있게 배치합니다.

실습:

1. Homepage 프레임을 선택합니다.
2. 오른쪽 패널에서 Layout Grid를 활성화하고, 12 컬럼 그리드를 설정합니다.

실습 단계별 스크린샷:

1. 그리드 활성화:

   • Homepage 프레임을 선택한 상태에서 오른쪽 속성 패널을 확인합니다.
   • Layout Grid 섹션을 찾습니다.

2. 그리드 추가:

   • + 아이콘을 클릭하여 그리드를 추가합니다.
   • 그리드 타입을 Column으로 설정합니다.

3. 그리드 설정:

   • 컬럼 수를 12로 설정합니다.
   • 거터(Gutter)는 일반적으로 20px, 마진(Margin)은 80px로 설정합니다.

예시 및 실습 결과

예시:

• 프레임과 그리드를 사용하여 웹 페이지의 기본 레이아웃을 정의합니다.
• 헤더, 본문, 푸터 영역을 시각적으로 구분할 수 있습니다.

실습 결과:

1. 피그마 프로젝트에 Homepage 프레임이 생성됩니다.
2. Homepage 프레임에 12 컬럼 그리드가 적용되어 요소를 정렬하는 데 도움이 됩니다.

이제 첫 번째 단계가 완료되었습니다. 다음 단계로 진행하면서 타이포그래피, 색상 사용 등을 배워 나가겠습니다.