1. 인터랙션 설정하는 방법
1) 버튼 클릭 시 다른 화면으로 이동하기
- 버튼을 선택한 상태에서 Prototype 탭을 클릭
- 버튼에서 드래그하여 연결할 프레임(페이지)로 이동
- Interaction Details에서
- Trigger: On Click
- Action: Navigate To
- Animation: Smart Animate or Instant 선택
2) 오버(hover) 효과 적용하기
- 버튼을 선택하고 Prototype 탭으로 이동
- 버튼을 다른 프레임(호버 상태)과 연결
- Interaction Details에서
- Trigger: While Hovering
- Action: Change To
- Animation: Smart Animate 적용
3) 모달 팝업 열고 닫기
- 팝업(모달) 프레임을 만들어 숨겨둠
- 버튼을 선택 후 Prototype 탭에서 모달 프레임과 연결
- Interaction Details에서
- Trigger: On Click
- Action: Open Overlay
- Overlay: Center로 설정 (위치 조정 가능)
- Close when clicking outside 옵션 체크
4) 드래그 인터랙션 설정하기
- 드래그할 요소를 선택
- Prototype 탭에서 드래그 후 연결할 프레임으로 이동
- Interaction Details에서
- Trigger: On Drag
- Action: Navigate To or Smart Animate
- Easing: Ease Out 또는 Linear 선택
2. 딤드 처리하는 방법
1) 팝업 창에 딤드 배경 추가하기
- 팝업 창 뒤에 새로운 프레임(사각형)을 추가
- 배경색을 블랙 (#000000) 또는 다크 그레이로 설정
- Opacity (투명도)를 30~50%로 조정하여 반투명한 느낌으로 만들기
- 팝업 창과 함께 그룹화하여 관리
2) 딤드 배경을 클릭하면 팝업 닫기
- 딤드 배경을 선택 후 Prototype 탭에서 연결할 프레임 설정
- Interaction Details에서
- Trigger: On Click
- Action: Close Overlay
3) 딤드 애니메이션 효과 추가하기
- 딤드 배경과 팝업을 Smart Animate로 설정
- Fade In / Fade Out 효과를 적용하여 부드럽게 등장하도록 연출
3. 플로우 경로(Prototype 연결선)가 안 보일 때 해결 방법
1) Prototype 연결이 사라진 경우
- Prototype 탭에서 버튼을 클릭했을 때 연결선이 없는지 확인
- 연결이 안 되어 있다면 다시 드래그하여 프레임과 연결
2) Prototype 탭이 비활성화된 경우
- 상단에서 Design → Prototype 탭이 선택되어 있는지 확인
- Prototype 탭이 비활성화된 경우 다시 활성화
3) Flow(시작 프레임)가 설정되지 않은 경우
- 프로토타입에서 시작 프레임을 설정해야 플로우가 표시됨
- 시작할 프레임을 선택 후 **"Set as Starting Frame"**을 클릭
4) Prototype 연결선이 가려진 경우
- 확대/축소 비율을 조정하여 연결선이 보이는지 확인
- 레이어가 많을 경우 다른 요소가 연결선을 가릴 수 있으므로 레이어 순서를 조정
5) 플로우가 표시되지 않는 경우
- View 옵션에서 "Show Prototype Connections"가 활성화되어 있는지 확인
- Ctrl + Shift + P (Mac: ⌘ + Shift + P) 를 눌러 Prototype 플로우를 다시 표시
Figma 실습 링크: https://www.figma.com/design/p5gz3PylSi1OuUe2zbSQUx/PD_03_%EA%B0%95%EC%86%8C%EC%97%B0?node-id=224-2538&p=f&t=4h5VcUDt8EdYu6A2-0
디자인 레퍼런스 만들기 / 나만의 디자인 시스템 만들기
Figma 실습 링크: https://www.figma.com/design/p5gz3PylSi1OuUe2zbSQUx/PD_03_%EA%B0%95%EC%86%8C%EC%97%B0?node-id=242-11991&p=f&t=4h5VcUDt8EdYu6A2-0