[디자이너 두명] Figma 피그마로 프로토타입 애니메이션 활용하기 (화면 전환 효과, 로딩 화면)

피그마 프로토타입은 여러 가지 화면 모션을 지원한다.

move in, move out, push, slide 등...

 

하지만 내가 원했던 것은 이러한 단순한 화면 이동 동작이 아닌 레이어마다의 객체 애니메이션이었다.

그동안은 개발자와 협업하면서 레이어의 애니메이션이 필요한 경우

 

 

1. 디자이너가 애니메이션을 adobe after effects로 제작 후 gif로 저장해서 공유하는 방법

2. css 애니메이션 기능을 이용하는 방법

3. js를 이용하는 방법

(기타. Lottie를 활용한 json..)

 

 

 

이 3~4가지 정도를 주로 쓸 수 있다.  

 

특히 1번 GIF를 사용하는 경우에는 파일 용량의 압박, 모바일 데이터 소비 등의 이유로 사용을 꺼려하는 개발자와 유저들이 많기 때문에

2번 혹은 3번의 방법으로 애니메이션을 구현하는 경우가 많은데

애니메이션을 개발자가 직접 구현한다면 디자이너는 해당 애니메이션에 대한 구현 예시를 설명해야 할 것이다.

 

그렇게 되면 디자이너는 1번과 같은 작업을 반복하고 개발자에게 전달해주거나

말로 설명..(이렇게 슉 날라가서 작아졌다가~ 크게 해 주세요......)을 해야 한다.

 

하여 피그마에서 개발자와 디자이너 모두 행복할 수 있는 애니메이션 활용기를 소개한다. 

 

 

먼저 결과물부터 보자.

 

 

애니메이션 최종 결과물

 

1. 페이지 로딩 화면 애니메이션
사용 애니메이		1. 레이어 이동
		2. 아이콘 돌리기
		3. 아이콘 사라짐
2. page 화면 전환 효과
사용 애니메이션		1. 레이어 나타나기
		2. 레이어 아래서 위로 나오기
		3. 레이어 위에서 아래 나오기

 

 

---

1. 페이지 로딩 화면 애니메이션

먼저 가장 핵심이 될 화면을 제작한다.  (위 예시 화면을 본다면 아이콘이 가운데 떠있고, 자동차가 가운데 왔을 지점 )

그리고 양 옆으로 Frame을 복사 붙여 넣기 한다.

 

그리고 첫 화면의 시작점부터 두 번째 화면까지 어떻게 변화할 것 인지 레이어를 조절한다.

 

나 같은 경우, 첫 번째에서 두 번째 사이는 자동차가 왼쪽에서 달려올 것이고(1. 레이어 이동) 아이콘이 투명도 0%에서 100%로 바뀌며

돌아가면서(2. 아이콘 돌리기) 점차 커질 것이다.

 

두 번째와 세 번째 사이는 가운데 있는 자동차가 오른쪽 끝으로 달려가면서 화면에서 사라질 것이고 아이콘이 투명도 100%에서 0%로 바뀌며 점차 커지면서 계속해서 돌아갈 것이다. (2. 아이콘 돌리기, 3. 아이콘 사라짐)

 

 

 

 

우선 자동차부터 해보자.

 

첫 번째 프레임의 자동차 레이어를 선택하고 좌표값 X를 0을 준다.

세 번째 프레임의 자동차 레이어를 선택하고 화면 W 값 + 레이어 W값을 좌표 X에 넣는다. 

첫번째 프레임

세번째 프레임

 

이제 아이콘을 해보자.

 

첫 번째 프레임의 아이콘 레이어를 선택하고 작게 만든 다음 투명도를 0%로 준다.

아이콘은 돌아가면서 나타나야 하므로Object - Flip Horizontal을 선택하고 조금 아래에 배치해준다.

 

동일하게 세 번째 프레임의 아이콘 레이어를 선택하고 크게 만든 다음 투명도를 0%로 준다.

아이콘은 계속 돌아갈 것이므로 Object - Flip Horizontal을 선택하고 조금 위쪽으로 배치해준다.

 

 

 

 

 

 

첫 번째와 두 번째 프레임을 선택 후 프로토타입에서 인터렉션을 추가하고 After Delay, Navigate to , smart animation을 선택한다.

Navigate to의 하위 화면 선택을 첫번째 프레임은 두번째 프레임으로, 두번째 프레임은 세 번째 프레임으로 선택한다.

프로토타입 설정

프로토타입 화면 순서

 

여기까지 한다면 페이지 로딩 화면 애니메이션 성공!

프로토 타입을 재생하고 감상해보자.

 

---

2. Page 화면 전환 효과

디자인된 프레임을 복사 붙여 넣기 한다.

 

 

아래에서 위로 나와야 할 레이어를 선택하고 

프레임 H 크기만큼 좌표 Y값에 입력한다.

 

위에서 아래로 나와야 할 레이어를 선택하고

프레임 H 크기만큼 좌표 Y값에 -로 입력한다.

 

나머지 모든 레이어는 선택해서 투명도 0%로 설정한다.

 

 

첫 번째 프레임을 선택 후 프로토타입에서 인터렉션을 추가하고 After Delay, Navigate to , smart animation을 선택한다.

Navigate to의 하위 화면 선택을 첫번째 프레임에서 두 번째 프레임으로 선택한다.

프로토타입 설정

 

 

 

---

3. 페이지 로딩 화면과 Page 화면 연결하기

 

이제 다 왔다.

페이지 로딩 화면의 세 번째 프레임과 Page화면의 첫 번째 프레임을 서로 프로토타입 Navigate to 에서 엮기만 하면 된다.

 

그렇게 된다면 최종 이런 모습이 나온다.

프로토타입 연결 모습

 

프로토타입을 재생시키면 

애니메이션 최종 결과물

첫번째 결과물과 동일한 모습으로 나오는 것을 볼 수 있다.

 

이것으로 끝!

 

애니메이션 프로토타입은 개발자, 클라이언트, 기획자에게 간단하게 빨리 제작하여 보여줄 수 있는 장점을 갖고 있고

세세한 애니메이션 값(좌표 값, 이미지 크기 값)을 알 수 있기 때문에 개발 시에 더욱 유용하게 공유할 수 있다.