Figma에서 버튼 클릭으로 페이지 및 섹션 이동 설정하는 방법

Figma에서 버튼을 클릭하여 페이지 간 이동하거나 페이지 내 특정 섹션으로 스크롤하는 방법을 알아보겠습니다.

 

 

1. 페이지 간 이동 설정

1. 버튼 선택:

   • 페이지 또는 섹션으로 이동시키고 싶은 버튼을 선택합니다.

2. 프로토타이핑 모드로 전환:

   • 오른쪽 상단의 Prototype 탭을 클릭하여 프로토타이핑 모드로 전환합니다.

3. 인터랙션 설정:

   • 버튼을 선택한 상태에서, 버튼의 오른쪽에 있는 작은 원형 핸들을 드래그하여 이동하고자 하는 페이지 또는 프레임으로 연결합니다.

4. 트리거 설정:

   • Interaction details 패널에서 트리거를 설정합니다. 기본적으로 On click 트리거가 설정되어 있습니다.

5. 액션 설정:

   • Navigate to 액션을 선택합니다.

   • 이동하고자 하는 페이지 또는 프레임을 지정합니다.

 

2. 페이지 내 섹션 간 이동 설정 (스크롤)

1. 버튼 선택:

   • 섹션으로 이동시키고 싶은 버튼을 선택합니다.

2. 프로토타이핑 모드로 전환:

   • 오른쪽 상단의 Prototype 탭을 클릭하여 프로토타이핑 모드로 전환합니다.

3. 인터랙션 설정:

   • 버튼을 선택한 상태에서, 버튼의 오른쪽에 있는 작은 원형 핸들을 드래그하여 이동하고자 하는 섹션(프레임)으로 연결합니다.

4. 트리거 설정:

   • Interaction details 패널에서 트리거를 설정합니다. 기본적으로 On click 트리거가 설정되어 있습니다.

5. 액션 설정:

   • Scroll to 액션을 선택합니다.

   • 이동하고자 하는 섹션을 지정합니다.

 

예시:

1. 버튼에서 페이지 이동:

   • 버튼을 선택하고 핸들을 드래그하여 특정 페이지 프레임으로 연결한 후, On click 트리거와 Navigate to 액션을 설정합니다.

2. 버튼에서 섹션으로 스크롤:

   • 버튼을 선택하고 핸들을 드래그하여 같은 페이지 내의 특정 섹션 프레임으로 연결한 후, On click 트리거와 Scroll to 액션을 설정합니다.

이렇게 하면, Figma 프로토타입에서 버튼을 클릭하면 설정한 페이지나 섹션으로 이동하거나 스크롤됩니다.