Figma_프로토타입(스마트 애니메이션 만들기)

프로토타입

:화면을 연결 시키고 어떤 스타일로 이동할 지 목업으로 보여주는 것

 

• 프로토 타입 구성요소

 

• 인터렉션 디테일창

 

1. 트리거 (=이벤트)

 

On Click : 요소를 클릭했을 때

 

2. 액션

 

Navigate to : 연결한 프레임으로 이동

Change to : 베리언츠 내에서 연결했을때 해당 컴포넌트로 바뀜

 

3. 애니메이션

 

Instant : 애니매이션 없음

Dissolve : 앞 프레임이 희미해지면서 넘어감

Smart animate : 자연 스럽게 다음 프레임으로 변경. 주로 사이즈 변화, 생상 변화 등에 쓰임

 

• 스마트 애니메이션 제작하는 법

 

변경할 프레임과 변화될 구성요소 제작 -> Alt + 드래그로 변경될 프레임 제작 -> 변경될 구성요소 제작 -> 프로토타입 ->

핫스팟을 이용하여 커넥션 라인 제작 -> 인터렉션 디테일창으로 원하는 스타일 지정

 

* 스마트 애니메이션 제작시 일관된 순서&같은 이름 으로 제작

같은 이름의 구성요소