UXUI 사전캠프
[피그마] 3주차 과제
^수빈^
2024. 1. 4. 22:07
728x90
피그마 프로토타입이란?
화면의 순서 또는 플로우 간의 연결을 시켜, 특정 버튼이나 영역을 눌렀을때
어떤 화면으로 어떤 인터랙션 스타일로 이동할 것인지 목업으로 보여주는 것 (클릭, 드래그, 스크롤등)

오른쪽 패널에서 Design 옆 Prototype 을 누른다.

프레임 화면을 누른 후 옆에 동그라미를 누르고 이동하고 싶은 화면으로 화살표를 이동시킴.
트리거의 종류에는
On click - 요소를 클릭했을때
On- drag - 요소를 가로,세로 방향으로 드래그 했을 때
while hovering : 요소에 마우스를 올리고 있는 동안
while pressing : 요소에 마우스를 꾹 누르고 있는 동안
Mouse enter : 마우스가 영역에 들어가는 순간의 액션처리
Mouse leave : 마우스가 영역을 벗아나는 순간의 액션처리
mouse down : 마우스를 누르는 순간의 액션처리
mouse up : 마우스에서 손을 떼는 순간의 액션처리
after delay : 일정 시간이 지난 뒤 화면이 넘어갑니다.


프로토타입을 실행시킬때는 저기 세모에서 Present 누르고 Fit to screen 으로 보면 됨
Smart Animate를 했을때는 옆에 Flow뜨는걸 누르면 하나씩만 확인 할 수 있음
스마트폰에서 미러링 할 수도 있는데 (대박 짱신기)
피그마에서 프레임선택해서 앱에서 미러누르고 스타트누르면 그대로 연동된다!!!