KUKJIN LEE's profile picture

KUKJIN LEE

Posted time

Posted 1 month ago

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 프로토타입에서 버튼을 클릭하면 설정한 페이지나 섹션으로 이동하거나 스크롤됩니다.

New Tech Posts