Figma에서 프로토타입 제작 가이드

시작하기 전에

이 기능을 사용할 수 있는 사용자

모든 팀 또는 요금제에서 지원됩니다.

파일에 대한 편집 가능 액세스 권한이 있는 모든 사용자는 프로토타입을 만들 수 있습니다.

열람 가능 권한이 있는 모든 사용자는 프레젠테이션 보기에서 프로토타입을 재생할 수 있습니다.

Figma의 프로토타입 제작 기능을 사용하면 사용자가 디자인과 상호 작용하는 방식을 탐색하는 대화형 흐름을 만들 수 있습니다.

프로토타입은 굉장한 방법입니다.

• 상호 작용 및 사용자 흐름 미리 보기
• 아이디어를 공유하고 반복하기
• 공동작업자로부터 피드백 받기
• 사용자와의 상호 작용 테스트하기
• 이해 관계자에게 디자인 프레젠테이션하기

아래에서 프로토타입 제작에 대한 영상을 시청해 보세요. 혹은 Youtube에서 프로토타입 및 협업 플레이리스트를 확인해 보세요.

흐름과 시작점

Figma의 프로토타입 제작을 사용하면 한 페이지에서 프로토타입에 대한 여러 흐름을 만들어 디자인을 통해 사용자의 전체 여정과 경험을 미리 볼 수 있습니다.

흐름은 단일 페이지에 있는 프레임과 연결의 네트워크입니다. 프로토타입은 앱이나 웹사이트에서 사용자가 거치는 전체 여정을 매핑할 수도 있고, 자체 흐름을 통해 특정 세그먼트에 초점을 맞출 수도 있습니다. 예: 프로토타입은 전자상거래 사이트에서 가능한 모든 상호작용을 다룹니다. 프로토타입에는 계정 생성, 장바구니에 항목 추가 및 체크아웃 플로우가 있습니다.

Figma는 두 프레임 사이에 첫 번째 연결을 추가할 때 흐름 시작점을 생성합니다. 프로토타입에 흐름 시작점을 추가하는 방법은 몇 가지가 있습니다.

• 시작 프레임을 선택한 상태에서 클릭하세요. 오른쪽 사이드바의 Flow 시작점 섹션에 있습니다.
• 프레임을 마우스 오른쪽 버튼으로 클릭한 다음 시작점 추가를 클릭합니다.
• 기존 시작점이 있는 프레임을 복제합니다.

디자인을 테스트할 시간이 되면 전체 프로토타입을 공유하거나 흐름 시작 지점으로 링크를 복사할 수 있습니다.

시작점 및 흐름에 대해 자세히 알아보기 →

연결 생성하기

1. 연결할 핫스팟을 선택합니다.
2. 클릭하여 연결을 생성합니다.
3. 목적지로 끌어다 놓습니다.
4. 기존 연결이 없는 경우 Figma는 첫 번째 프레임을 시작점으로 삼습니다.

상호 작용 및 애니메이션 만들기

1. 오른쪽 사이드바에서 프로토타입 탭 열기
2. 상호 작용 추가
3. 상호작용 세부 정보 설정
4. 애니메이션 적용
5. 애니메이션 미리보기

프로토타입 설정 조정

1. 장치 및 모델 선택
2. 프로토타입 미리보기
3. 배경 색상 선택
4. 프로토타입의 시작 프레임 설정

프로토타입 제작 자세히 알아보기

시작하기

• 프로토타입 상호 작용 및 애니메이션 제작
• 프로토타입의 시작점 선택
• 프로토타입 기기 사용자 지정
• 프로토타입 액션, 트리거 및 애니메이션

고급 상호 작용

• 프로토타입에서 오버레이 생성
• 스마트 애니메이션으로 고급 애니메이션 제작
• 오버플로 동작을 사용한 스크롤 상호 작용 프로토타입
• 프로토타입에 비디오 추가
• 프로토타입에 애니메이션 GIF 추가
• 프로토타입에서 변수 사용
• 프로토타입에서 표현식 사용
• 다중 액션 및 조건
• 프로토타입의 변수 모드

공유 및 협업

• 프로토타입 연결 보기
• 프로토타입 프레젠테이션 보기 옵션 설정
• 프로토타입 공유
• 모바일 장치에서 프로토타입 보기
• 댓글로 프로토타입에 대한 피드백 제공

용어집

• 핫스팟은 상호 작용이 일어나는 곳입니다. 핫스팟은 링크, 버튼, 이미지, 아이콘 등 원래 프레임 내에 있는 모든 개체가 될 수 있습니다.
• 연결은 핫스팟과 목적지를 연결하는 파란색 화살표 또는 '누들'입니다. 연결을 통해 상호 작용 및 애니메이션 설정을 적용합니다.
• 흐름 은 프로토타입을 통과하는 경로를 형성하는 연결 프레임의 네트워크입니다. 각 흐름에는 고유한 시작점이 있습니다. 프로토타입 내에 여러 흐름이 있을 수 있습니다.
• 시작점은 흐름의 첫 번째 프레임입니다. 프레젠테이션 보기에서 프로토타입의 다양한 흐름을 보여주려면 여러 개의 시작점을 설정합니다.
• 트리거는 핫스팟과 연결된 어떤 상호 작용 유형이 프로토타입을 진행시킬지 결정합니다. 이는 탭, 드래그, 클릭, 호버 등과 같은 마우스나 터치 상호 작용일 수 있습니다.
• 목적지는 전환이 끝나는 곳입니다. 이 프레임은 캔버스에 직접 추가되는 최상위 프레임이어야 하며 프레임 내의 개체가 아니어야 합니다. A에서 B로 이동한다고 가정하면, A 는 핫스팟이고 B는 목적지입니다.
• 이 액션은 프로토타입에서 발생하는 진행 유형을 정의합니다. 예를 들어, 다른 프레임으로 이동하거나 외부 URL을 여는 액션 등입니다.
• 애니메이션 설정에 따라 프로토타입이 한 프레임에서 다른 프레임으로 이동하는 방식이 결정됩니다. 애니메이션의 유형과 속도 및 방향을 제어할 수 있습니다.
• 전환은 애니메이션의 유형입니다. 이는 액션이 목적지로 이동하는 방식을 정의합니다.
• 방향은 전환이 시작되는 방향을 제어합니다. 왼쪽, 오른쪽, 위 또는 아래 중에서 선택합니다.
• 지속 시간은 애니메이션을 완료하는 데 걸리는 시간을 제어합니다. 지속 시간이 짧을수록 전환 속도가 빨라집니다. 1ms에서 10000ms(10초) 사이의 지속 시간을 선택합니다.
• 이징은 애니메이션이 느리게 시작하든 빠르게 시작하든 가속에 영향을 줍니다. 이를 통해 보다 자연스럽게 느껴지는 애니메이션을 만들 수 있습니다.
• 오버레이는 현재 화면이나 프레임 위에 나타나는 프레임입니다. 오버레이를 사용하여 도구 설명, 대화형 메뉴, 알림 또는 확인을 생성할 수 있습니다.
• 오버플로 동작을 사용하면 프로토타입이 스크롤에 어떻게 반응하는지 정의할 수 있습니다. 이를 통해 캐러셀, 갤러리, 대화형 지도 등 더욱 진보된 사용자 상호 작용을 만들 수 있습니다.
• 프로토타입을 발표할 때 어떤 기기를 표시할지 선택합니다. 기기와 모델을 모두 정의합니다.
• 배경 색상을 사용하면 프로토타입 배경 색상을 정의할 수 있습니다.
• 세로 및 가로 프레임이 있는 프로토타입의 경우 방향을 선택할 수 있습니다. 방향은 전체 프로토타입에 설정할 수 있습니다. 프로토타입 내에서는 세로 보기와 가로 보기를 전환할 수 없습니다.
• 미리보기는 프로토타입에서 어떤 것이 보이거나 작동하는 방식을 보여줍니다. 애니메이션과 프로토타입 기기 설정 모두에 대한 미리보기를 표시합니다.