[Figma] Figma 주요 기능별 사용법 - 네비게이션 설계

이제 5단계인 네비게이션 설계를 진행하겠습니다. 이 단계에서는 링크를 설정하고 컴포넌트를 사용하는 방법을 배우게 됩니다.

5. 네비게이션 설계

5.1 링크 설정

주요 기능:

• 링크는 페이지 간 네비게이션을 가능하게 합니다.

사용법:

1. 프로토타입 모드로 전환: 상단 메뉴에서 Prototype 탭을 클릭하여 프로토타입 모드로 전환합니다.
2. 링크 설정: 요소를 선택하고 링크 아이콘을 클릭하여 연결할 페이지나 프레임을 선택합니다.

예시:

• 네비게이션 바의 메뉴 항목에 링크를 설정합니다.

실습:

1. Prototype 탭에서 네비게이션 바의 메뉴 항목을 선택합니다.
2. 링크 아이콘을 클릭하여 다른 프레임이나 페이지로 연결합니다.

실습 단계별 스크린샷:

1. 프로토타입 모드로 전환:

   • 피그마 상단 메뉴에서 Prototype 탭을 클릭합니다.

2. 링크 설정:

   • 네비게이션 바의 메뉴 항목(예: "Home", "About", "Contact")을 선택합니다.
   • 선택한 항목을 다른 프레임이나 페이지로 연결하려면 오른쪽 패널에서 Interaction 섹션을 찾고 링크 아이콘을 클릭합니다.
   • 링크를 설정할 페이지나 프레임을 선택합니다.

5.2 컴포넌트 사용

주요 기능:

• 반복 요소는 컴포넌트로 만들어 일관성을 유지합니다.

사용법:

1. 컴포넌트 생성: 반복적으로 사용할 네비게이션 바와 같은 요소를 선택한 후, 상단 메뉴에서 Create Component를 클릭합니다.
2. 컴포넌트 사용: 컴포넌트를 다른 페이지나 프레임에 드래그하여 추가합니다.

예시:

• 네비게이션 바를 컴포넌트로 만들어 모든 페이지에 동일하게 사용합니다.

실습:

1. 네비게이션 바를 선택하고 Create Component를 클릭합니다.
2. 다른 프레임에 컴포넌트를 추가합니다.

실습 단계별 스크린샷:

1. 컴포넌트 생성:

   • 네비게이션 바를 선택합니다.
   • 상단 메뉴에서 Create Component를 클릭합니다. (또는 Ctrl + Alt + K 단축키를 사용합니다.)
   • 컴포넌트가 생성되고 왼쪽 레이어 패널에서 컴포넌트 아이콘이 나타납니다.

2. 컴포넌트 사용:

   • 다른 프레임(예: "About Us", "Contact Us")에 네비게이션 바 컴포넌트를 드래그하여 추가합니다.
   • 컴포넌트를 사용하면 네비게이션 바의 변경 사항이 모든 페이지에 자동으로 적용됩니다.

예시 및 실습 결과

예시:

• 네비게이션 바의 "Home", "About", "Contact" 메뉴 항목에 각각 링크를 설정합니다.
• 네비게이션 바를 컴포넌트로 만들어 여러 페이지에 일관되게 사용합니다.

실습 결과:

1. Homepage 프레임의 네비게이션 바 메뉴 항목에 링크가 설정됩니다.
2. 네비게이션 바가 컴포넌트로 생성되고, 다른 페이지에 동일한 네비게이션 바를 쉽게 추가할 수 있습니다.

이제 다섯 번째 단계가 완료되었습니다. 다음 단계로 진행하면서 반응형 디자인을 배워보겠습니다.