[Figma] UX/UI Prototyping : 피그마에서 스와이프 인터랙션 구현하기

1-1. 페이지 스와이프

페이지 스와이프 인터랙션은 사용자가 화면을 좌우로 스와이프하여 페이지나 콘텐츠를 이동하는 것을 의미합니다. 피그마에서는 다음과 같은 방법으로 구현할 수 있습니다.

① 프레임 생성: 각 페이지를 나타내는 프레임을 생성합니다.
② 프로토타입 설정: 프로토타입 탭에서 각 프레임을 연결합니다.
③ 트리거 설정: "On drag" 트리거를 사용하여 스와이프 방향에 따라 다음 프레임으로 이동하도록 설정합니다.
④ 스마트 애니메이션 적용: 부드러운 전환을 위해 스마트 애니메이션을 활성화합니다.

스와이프 Frame 간에 인터렉션 연결

 

 

1-2. 텍스트 패럴랙스 이펙트

스와이프할 때 텍스트가 다른 속도로 이동하는 효과를 구현합니다.

① 거리 이동 및 수치 설정: 각 텍스트 레이어의 이동 거리를 다르게 설정합니다.
    예: 첫 번째 프레임의 텍스트 x축 +150, 두 번째 프레임의 텍스트 x축 -150
② 스마트 애니메이션 사용: 프로토타입 설정에서 스마트 애니메이션을 활성화하여 부드러운 전환을 구현합니다.
③ 변수 활용: 피그마의 변수 기능을 사용하여 스와이프 진행도에 따라 텍스트 위치를 동적으로 조절할 수 있습니다.

텍스트에 시차 효과를 위해 텍스트의 포지션을 X축으로 이동 시킴

 

 

2. 오버레이 애니메이션

스와이프 인터랙션이 끝난 후 텍스트를 오버레이로 노출하는 효과를 구현합니다.

① 별도의 텍스트 프레임 생성:
- 오버레이될 텍스트를 포함한 별도의 프레임을 만듭니다.
- 이 프레임을 메인 프레임들과 같은 레벨에 위치시킵니다.

② 프로토타입 설정:
- 스와이프 완료 후 도달하는 프레임에서 텍스트 프레임으로 "After Delay" 트리거를 설정합니다.
- "Overlay" 옵션을 선택하고 "Present as Overlay"를 체크합니다.

③ 오버레이 위치 조정:
- 오버레이되는 텍스트 프레임의 위치는 프로토타입 설정에서 수동으로 조정할 수 있습니다.

스와이프 및 On drag 하면 After delay로 텍스트가 오버레이로 뜨도록 노출

 

 

3. 이미지 패럴랙스 이펙트

이미지가 다른 깊이로 이동하는 효과를 구현합니다. 위에서 텍스트 포지션을 변경하듯 이미지의 레이어 순서와 x축 이동하면서 On drag와 After delay 트리거를 사용해주면 이미지 패럴랙스 효과를 줄수있습니다. 

① 레이어 순서 유지: 각 프레임에서 이미지 레이어의 순서를 동일하게 유지합니다.
② 구조 레이어명 통일: 각 프레임의 레이어 구조와 이름을 일관되게 설정합니다.
③ 이미지 위치 조정: 두 번째 프레임의 이미지를 스크린의 1/2만큼 겹치게 배치합니다.
④ 변수 활용: 스와이프 진행도에 따라 이미지 위치를 조절하는 변수를 설정합니다.

 

 

작업 시 주의 사항

- 레이어 구조 일관성 유지 : 트리거는 동일한 구조의 프레임에서 설정합니다.
- 레이어 명 일관성 유지 : 인터랙션 대상의 레이명이 상이할 경우 오류가 납니다.
- 사용자 경험: 직관적이고 자연스러운 인터랙션을 설계해야 합니다.