프로토타입 흐름 생성 및 관리

시작하기 전에

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

모든 요금제에서 사용 가능

파일에 대한 편집 가능 권한이 필요합니다.

Figma에서 프로토타입을 제작할 때 여러 개의 흐름을 생성하여 사용자 여정의 여러 부분을 테스트할 수 있습니다.

흐름은 단일 프로토타입 경험을 구성하는 연결된 프레임 컬렉션입니다. 예를 들어, 계정 생성 흐름, 항목 탐색 흐름, 결제 프로세스 흐름이 모두 한 페이지에 포함된 쇼핑 앱의 프로토타입을 만들 수 있습니다.

프로토타입 흐름 생성

흐름 시작점

흐름 시작점은 흐름이 시작되는 지점입니다. 흐름 시작점은 최상위 프레임에 설정됩니다.

기존 연결이 없는 두 프레임 사이에 연결을 추가하면 Figma는 연결이 시작된 최상위 프레임에 시작점을 만듭니다. 흐름 시작점은 캔버스에 파란색 미리 보기 아이콘 및 흐름 이름과 함께 표시됩니다.

프레임에는 흐름 시작점이 하나만 있을 수 있습니다.

흐름 시작점을 수동으로 만들 수도 있습니다.

1. 시작 프레임을 선택합니다.
2. 오른쪽 사이드바에서 프로토타입 탭을 선택합니다.
3. 흐름 시작점 섹션에서 더하기 기호를 클릭합니다.

현재 페이지에서 모든 흐름 시작점을 보려면 다음 안내를 따르세요.

1. 캔버스의 빈 부분을 클릭하여 개체의 선택을 해제합니다.
2. 오른쪽 사이드바에서 프로토타입 탭을 선택합니다.
3. Flows(흐름) 섹션에서 모든 흐름 시작점 목록을 확인합니다.
4. 흐름 이름 위에 마우스를 놓고 Select frame(프레임 선택)을 클릭하여 시작점이 있는 프레임으로 이동합니다.

흐름에서 프레임 추가 또는 제거

흐름 시작점이 있으면 나머지 흐름은 프로토타이핑 상호 작용을 통해 시작점에 연결된 프레임으로 구성됩니다. 여기에는 시작점에 직접 연결된 프레임과 다른 상호 작용을 통해 연결된 프레임이 포함됩니다.

예를 들어, 아래 이미지의 모든 보라색 프레임은 Flow 1에 포함됩니다.

흐름에서 프레임을 제거하려면 프레임을 흐름의 다른 프레임에 연결하는 프로토타입 상호 작용을 제거합니다.

프레임은 여러 흐름에 포함될 수 있습니다. 예를 들어, 아래 이미지의 파란색 프레임은 Flow 1과 Flow 2에 모두 포함됩니다.

사용자가 여러 흐름에 포함된 프레임으로 이동하면 해당 프레임에서 모든 상호 작용을 사용할 수 있습니다. 이렇게 하면 해당 프레임의 모든 연결을 포함하도록 원래 흐름이 열립니다.

프로토타입 흐름 관리

흐름 이름 편집

흐름을 생성하고 나면 Figma는 기본적으로 해당 흐름의 이름을 Flow 1로 지정하고, 이후 추가되는 흐름은 Flow 2, Flow 3 등으로 지정합니다. 흐름의 이름은 언제든지 바꿀 수 있습니다.

흐름의 이름을 바꾸려면 다음 안내를 따르세요.

1. 시작 프레임을 선택합니다.
2. 오른쪽 사이드바에서 프로토타입 탭을 선택합니다.
3. Flow starting point(흐름 시작점) 섹션에서 흐름 이름 필드를 선택합니다.
4. 새 흐름 이름을 입력합니다.

이름이 바뀌면 흐름 이름이 프레임의 파란색 시작점 아이콘과 프레젠테이션 보기의 왼쪽 사이드바에 표시됩니다.

흐름 설명 추가

프레젠테이션 보기에서는 흐름 이름과 설명이 왼쪽 사이드바에 표시됩니다. 설명을 사용하여 사용성 테스트 참가자에게 프롬프트를 제공하거나 팀을 위한 추가 컨텍스트 및 문서를 제공하세요. 설명은 굵은 글씨, 번호가 매겨진 목록 또는 글머리 기호 목록, 하이퍼링크로 서식을 지정할 수 있습니다.

흐름 설명을 추가하려면 다음 안내를 따르세요.

1. 흐름 시작점이 있는 프레임을 선택합니다.
2. 오른쪽 사이드바에서 프로토타입 탭을 선택합니다.
3. Flow starting point(흐름 시작점) 섹션에서 편집하려는 흐름 이름 옆에 있는 설명 편집을 클릭합니다.
4. 서식 있는 텍스트 설명을 추가합니다.
5. X를 클릭하여 Description(설명) 패널을 종료하고 설명을 저장합니다.

설명을 추가하면 프레젠테이션 보기의 왼쪽 사이드바에 설명이 표시됩니다.

흐름 시작점 이동

기본적으로 Figma에서는 첫 번째로 만든 연결을 흐름 시작점으로 사용합니다. 시작점을 다른 프레임으로 이동할 수 있습니다.

1. 캔버스에서 파란색 시작점 아이콘을 찾습니다.
2. 흐름 이름을 클릭하고 새로운 시작 프레임으로 드래그합니다.

흐름 시작점 삭제

흐름 시작점을 삭제하려면 다음 안내를 따르세요.

1. 흐름 시작점이 있는 프레임을 선택합니다.
2. 오른쪽 사이드바에서 프로토타입 탭을 선택합니다.
3. Flow starting point(흐름 시작점) 섹션에서, Remove starting point(시작점 삭제)를 클릭합니다.

프로토타입 흐름 재생 및 공유

미리보기 흐름

편집기에서 인라인 미리보기를 통해 프로토타입 흐름을 직접 미리 볼 수 있습니다.

1. 캔버스의 빈 부분을 클릭하여 개체의 선택을 해제합니다.
2. 오른쪽 사이드바에서 프로토타입 탭을 선택합니다.
3. Flows(흐름) 섹션에서 모든 흐름 목록을 확인합니다.
4. 흐름 이름 위로 마우스를 가져간 후 Preview(미리 보기)를 클릭하여 인라인 미리 보기를 엽니다.

인라인 미리보기에서 각 프로토타입 상호 작용을 트리거하여 흐름을 탐색합니다.

흐름 링크 복사 및 공유

특정 사용자 흐름 또는 여정에 대한 피드백을 받을 목적으로 프로토타입 흐름을 다른 사람과 공유할 수 있습니다. 프로토타입 흐름을 공유하면 사용자가 프레젠테이션 보기에서 프로토타입을 재생할 수 있습니다. 프레젠테이션 보기에서 사용자는 다른 흐름을 선택하여 재생할 수도 있습니다.

캔버스에서:

1. 흐름 시작점이 있는 프레임을 선택합니다.
2. 오른쪽 사이드바에서 프로토타입 탭을 선택합니다.
3. Flow starting point(흐름 시작점) 제목 옆에 마우스를 올려 놓습니다.
4. Copy link(링크 복사)를 클릭합니다.

프레젠테이션 보기에서:

1. 왼쪽 사이드바에서 공유하려는 흐름을 선택합니다.
2. 도구 모음에서 Share prototype(프로토타입 공유)를 클릭합니다.
3. Copy link(링크 복사)를 클릭합니다.