[Figma] 14강 Prototype - 네이버 로그인창 - 오쌤의 니가스터디

 

 

 

 

 

 

 

 

 

 

 

 

 

** 자세한 영상은 유튜브로 제공됩니다.

https://youtu.be/CTZ3B3shKxM

 

 

 

 

 

 

 

 

 

 

 

 

 

1. 프로토타입(Prototype) 기능 정리

- 프로토타입은 일차원적인 요소에 이벤트를 이용해 효과나 애니메이션을 주는 기능입니다.

- 피그마의 프로토타입은 [Design]패널 옆에 탭버튼으로 있습니다. 

 

 

 

1) 프로토타입의 요소

- 프로토타입은 컴포넌트끼리도 가능하고, 프레임끼리도 가능합니다.

- 일단 장면을 통해서 요소를 설명해보겠습니다.

위의 이미지는 회색을 녹색요소에 연결한 것입니다.

- 핫스팟(Hot Spot) : 위 그림에서의 파란색 기준이 되는 점을 핫스팟이라고 합니다. 사용자의 인터랙션이 시작하는 위치입니다. 

- 커넥션(connection) 라인 : 핫스팟과 이어지는 두개의 요소 사이의 연결 선입니다. 이 선을 클릭하면 프로토타입의 세부적 설정을 할 수 있습니다.

- 데스티네이션(Destination) : 핫스팟에서 커넥션으로 연결한 도착점이 되는 요소를 의미합니다. 

- 핫스팟에서 데스티네이션을 연결하면 커넥션이 생겨 프로토타입을 지정할 수 있습니다.

 

 

 

 

 

2) 인터렉션 디테일창(Interaction Details]

- 핫스팟에서 데스티네이션요소를 클릭하면 인터렉션 디테일창이 바로 뜹니다.

- ① : 트리거(trigger) : 이벤트라고도 볼 수 있는 인터랙션의 시발점입니다. 클릭, hover 등을 선택할 수 있습니다.

- ② : 액션(Action) : 어떤 식으로 요소가 바뀔지에 대한 액션명령 종류를 지정할 수 있스빈다.

- ③ : 애니메이션(Animation) : 움직임을 선택합니다. 

 

 

 

 

 

3) 트리거(trigger)의 종류

트리거의 종류입니다.

- 코딩을 배운 분들은 이벤트라고 말하면 더 이해가 잘 되는 파트입니다. 

- ① On click - 요소를 클릭했을 때입니다.

- ② On drag - 요소를 가로, 세로 방향으로 드래그 했을 때입니다.

- ③ while hovering : 요소에 마우스를 올리고 있는 동안 입니다. => mouseenter와 mouseleave를 번갈아 실행

- ④ while Pressing : 요소에 마우스를 꾹누르고 있는 동안 입니다. => mouse down과 mouse up을 번갈아 실행

- ⑤ Mouse enter : 마우스가 영역에 들어가는 순간의 액션처리입니다. 

- ⑥ Mouse leave : 마우스가 영역을 벗어나는 순간의 액션처리입니다.

- ⑦ Mouse down : 마우스를 누르는 순간의 액션처리입니다. 

- ⑧ Mouse up : 마우스에서 손을 때는 순간의 액션처리입니다. 

- ⑨ After delay : 일정 시간이 지난 뒤 화면이 넘어갑니다.

 

 

 

 

 

 

4) 액션(action)의 종류

- ① Navigate to - 연결한 프레임으로 이동합니다.

- ② Change to - 베리언츠 내에서 연결했을 때 해당 컴포넌트로 바뀝니다.

- ③ Open overlay - 오버레이가 열립니다. 모달 팝업을 만들 때 사용합니다. 

- ④ Swap overlay - 화면이 오버레이 프레임으로 바뀝니다. 

- ⑤ Close overlay - 오버레이를 닫습니다.

- ⑥ Back : 맨 처음 프레임으로 돌아갑니다.

- ⑦ Scroll to : 연결한 위치로 스크롤합니다.

- ⑧ Open link : 외부 링크로 연결합니다. 

 

 

 

 

 

 

 

5) 애니메이션(animation)의 종류

- ① Instant - 애니메이션 없이 바로 넘어갑니다.

- ② Dissolve - 앞 프레임의 투명도가 0%가 되며 넘어갑니다. 

- ③ Smart animate - 같은 이름의 레이어가 자연스럽게 넘어갑니다. 색상이 변경되거나 사이즈가 바뀌거나 할때 자주 사용하는 애니메이션입니다. 

- ④ Move in - 이 애니메이션은 프레임이 연결되어야 가능합니다. 슬라이드처럼 프레임이 들어옵니다.

- ⑤ Move out - 슬라이드처럼 프레임이 나갑니다. 

- ⑥ Push : 두개의 프레임이 연결시 한 프레임이 다른 프레임에 의해 밀려 나갑니다. 

- ⑦ Slide in : Move in과 비슷하지만 먼저 있던 프레임의 투명도가 0%로 변경됩니다.

- ⑧ Slide out : 투명도가 0~100%로 바뀌면서 나갑니다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90

반응형

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. 네이버 로그인창 프로토타입

 

 

 

 

 

 

 

 

 

 

 

 

** 완성파일은 [피그마 커뮤니티]에서 찾아보세요.

1) 피그마 앱에서 커뮤니티를 누릅니다.

 

 

2) 검색창에 [ossam]이라고 검색합니다.

 

 

 

 

3) [예제7] 프로토타입을 더블클릭합니다.

 

4) [duplicate]버튼을 눌러 개인 작업창으로 복제해옵니다.

 

 

 

** 피그마웹에서 찾는 법

- [figma.com/@ossam]을 검색하면 찾을 수 있습니다.

검색이 잘되는 것을 확인할 수 있습니다.