Figma의 프로토타이핑 기능을 사용하면 사용자가 디자인과 상호 작용할 수 있는 방법을 탐색하는 대화형 흐름을 만들 수 있다.
프로토타입은 다음을 수행하는 환상적인 방법이다.
- 상호 작용 및 사용자 흐름 미리 보기
- 아이디어 공유 및 반복
- 공동 작업자로부터 피드백받기
- 사용자와의 상호 작용 테스트
- 이해 관계자에게 디자인 발표
아래에서 프로토타이핑에 대한 비디오를 시청하십시오. 또는 YouTube에서 프로토타입 및 협업 재생 목록을 확인하십시오.
Tip! 훨씬 더 효율적인 워크플로우를 위해 키보드 단축키(
흐름(flows) 및 시작점(starting point)
Figma에서 프로토타이핑을 사용하면 한 페이지에 프로토타입에 대한 여러 흐름을 만들어 사용자의 전체 여정과 디자인을 통한 경험을 미리 볼 수 있다.
흐름은 단일 페이지의 프레임 및 연결 네트워크이다. 프로토타입은 앱이나 웹사이트를 통한 사용자의 전체 여정을 매핑하거나 자체 흐름을 통해 특정 부분에 집중할 수 있다. 예: 프로토타입은 전자상거래 사이트에서 가능한 모든 상호작용을 다룬다. 프로토타입 내에는 계정 생성, 장바구니에 항목 추가 및 체크아웃을 위한 흐름이 있다.
Figma는 두 프레임 사이에 첫 번째 연결을 추가할 때 흐름 시작점을 만든다. 프로토타입에 흐름 시작점을 추가하는 몇 가지 다른 방법이 있다.
- 시작 프레임을 선택한 상태에서 오른쪽 사이드바의 Flow starting point 섹션에서 ‘+’ 클릭
- 프레임을 마우스 오른쪽 버튼으로 클릭한 다음 시작점 추가(Add starting point)를 클릭한다.
- 기존 시작점으로 프레임을 복제한다.
디자인을 테스트할 때 전체 프로토타입을 공유하거나 흐름 시작점에 대한 링크를 복사할 수 있다.
Note: 최상위 프레임은 여러 흐름의 일부일 수 있지만 시작점은 하나만 있을 수 있다. 최상위 시작 프레임 내에 중첩된 프레임에는 여러 흐름에서 사용자를 탐색하는 연결이 있을 수 있다. 예를 들어 로그인 및 가입 버튼은 동일한 시작 지점 프레임에 중첩된 다음 각 경험에 대해 별도의 흐름에서 프레임에 연결할 수 있다.
연결(connections) 만들기
- 연결을 위한 핫스팟(hotspot)을 선택한다.
- 개체 오른쪽 사이드 중앙에 아이콘 ‘⊕‘을 클릭하여 연결을 생성한다.
- 원하는 대상으로 드래그한다.
- 기존 연결이 없는 경우 Figma는 첫 번째 프레임을 시작점으로 만든다.
상호 작용 및 애니메이션 만들기
- 오른쪽 사이드바에서 프로토타입(prototype) 탭을 연다.
- 상호작용(interactions) 추가
- 상호작용 세부 정보 설정
- 애니메이션 적용
- 애니메이션 미리보기
프로토타입 설정 조정
- 장치(Device) 및 모델(Model) 선택
- 프로토타입 미리보기(Preview)
- 배경색(Background) 선택
- 프로토타입의 시작 프레임(Starting Frame) 설정
프로토타입 제작에 대해 자세히 알아보기
시작하다
고급 상호 작용
공유 및 협업
용어 사전
- 핫스팟(hotspot)은 상호 작용이 일어나는 곳이다. 핫스팟은 링크, 버튼, 이미지 또는 아이콘 등과 같이 원본 프레임 내의 모든 개체일 수 있다.
- 연결(Connections)은 핫스팟을 대상에 연결하는 파란색 화살표 또는 “noodles”이다. 연결을 통해 상호 작용 및 애니메이션 설정을 적용한다.
- 흐름(flow)은 프로토타입을 통해 경로를 형성하는 연결된 프레임의 네트워크이다. 각 흐름에는 고유한 시작점(starting point)이 있다. 프로토타입 내에서 여러 흐름을 가질 수 있다.
- 시작점(starting point)은 흐름의 첫 번째 프레임이다. 프레젠테이션 보기에서 프로토타입의 다른 흐름을 표시하도록 여러 시작점을 설정 가능하다.
- 트리거(trigger)는 핫스팟과의 어떤 유형의 상호 작용으로 인해 프로토타입이 진행되는지 결정한다. 이것은 탭(tab), 드래그(drag), 클릭(click), 호버(hover) 등과 같은 마우스 또는 터치 상호 작용일 수 있다.
- 목적지(destination)는 전환이 끝나는 곳이다. 이것은 프레임 내의 개체가 아니라 최상위 프레임(캔버스에 직접 추가되는 프레임)이어야 한다. A에서 B로 이동하는 것을 생각하면 A는 핫스팟이고 B는 목적지이다.
- 액션(action)은 프로토타입에서 발생하는 진행 유형을 정의한다. 예를 들어 작업은 다른 프레임으로 이동하거나 외부 URL을 여는 것일 수 있다.
- 애니메이션(animation) 설정은 프로토타입이 한 프레임에서 다른 프레임으로 이동하는 방식을 결정한다. 애니메이션의 종류와 속도, 방향을 제어할 수 있다.
- 전환(transition)은 애니메이션 기본 유형이다. 이는 작업이 대상으로 이동하는 장면을 정의한다.
- 방향(direction)은 전환이 발생하는 방향을 제어한다. left, right, top 또는 bottom 중에서 선택한다.
- 지속(duration) 시간은 애니메이션을 완료하는 데 걸리는 시간을 제어한다. 지속 시간이 짧을수록 전환이 빨라진다. 1ms에서 10000ms(10초) 사이의 기간을 선택한다.
- 이징(Easing)은 애니메이션의 가속에 영향을 준다. 즉, 느리게 시작하거나 빠르게 시작한다. 이를 통해 보다 자연스러운 느낌의 애니메이션을 만들 수 있다.
- 오버레이(overlays)는 현재 화면이나 프레임 위에 나타나는 프레임이다. 오버레이를 사용하여 도구 설명(tool-tips), 대화형 메뉴(interactive menus), 경고(alerts) 또는 확인(confirmations)을 만들 수 있다.
- 오버플로 동작(overflow behavior)을 사용하면 프로토타입이 스크롤에 응답하는 방식을 정의할 수 있다. 이를 통해 캐러셀(carousels), 갤러리(galleries) 또는 대화형 지도(interactive maps)와 같은 고급 사용자 상호 작용을 만들 수 있다.
- 프로토타입을 발표할 때 표시할 장치(device)를 선택하자. 장치와 모델을 모두 정의한다.
- 배경색(background color)을 사용하면 프로토타입의 배경색을 정의할 수 있다.
- 세로 및 가로 프레임이 있는 프로토타입이 있는 경우 방향(orientation)을 선택할 수 있다. 방향은 전체 프로토타입에 대해 설정된다. 프로토타입 내에서 세로 보기와 가로 보기를 전환할 수 없다.
- 미리보기(preview)는 프로토타입에서 어떻게 보이거나 작동하는지 보여준다. 애니메이션(animations)과 프로토타입 장치(device) 설정 모두에 대한 미리보기를 보여준다.
출처 : Figma Prototyping
