[Figma #2] 클릭하면 이동하는 피그마 프로토 타이핑

#1 프로토타입이란

• 프로토타입이란 본격적인 상품화에 앞서 성능을 검증 · 개선하기 위해 간단히 핵심 기능만 넣어 제작한 기본 모델.

 

#2 디자이너에게 프로토 타이핑이 필요한 이유

• 디자이너는 다양한 직군과 협업하게 되는데 프로토 타이핑을 사용한다면 말보다는 명확한 이미지로 제시하기 때문에 효과적으로 전달할 수 있다.
• 스스로 사용해보는 것이기 때문에 디자이너 본인의 문제점을 발견해서 보완하기 좋다.

 

#3 피그마 프로토타입이란

•  화면의 순서 또는 플로우 간의 연결을 시켜, 특정 버튼이나 영역을 눌렀을 때 어떤 화면으로 어떤 인터랙션 스타일로 이동할 것인지 목업으로 보여주는 것.

  a) 핫스팟(Hot Spot)

    - 파란색 기준이 되는 점, 인터랙션이 시작하는 위치.

  b) 커넥션(Connection)라인

    - 핫스팟과 이어지느 ㄴ두개의 요소 사이의 연결선. 이 선을 클릭하면 프로토타입의 세부적 설정 가능.

  c) 데스티네이션(Destination)

    - 핫스팟에서 커넥션으로 연결한 도착점이 되는 요소를 의미.

 

<인터랙션 디테일>

• 핫스팟에서 데스테이션 요소를 클릭하면 뜨는 창

  a) 트리거(Trigger)

    -  이벤트라고 볼 수 있는 인터랙션의 시발점으로 클릭, Hover 등을 선택할 수 있음.

  b) 액션 (Action)

    -  어떤 식으로 요소가 바뀔지에 대한 액션명령 종류를 지정 가능.

  c) 애니메이션 (Animation)

    -  움직임을 선택.

 

                                                    * Navigate to - 연결한 프레임으로 이동.

                                                      Change to - 베리언츠 내에서 연결했을 때, 해당 컴포넌트로 변경.

 

 

 

 

참고글

[IT 정보] 프로토 타이핑이란 무엇일까요? : 네이버 블로그 (naver.com)