[2/20] 1주차 HW - Figma 실습 (프로토타입)

📍 실습 목표

피그마의 프로토타입(Prototype) 기능을 사용하여 화면과 화면, 혹은 버튼 간의 인터렉션(Interactioon)을 표현해보자!

 

 

🌈 과정

1. 프로토타입을 만들 화면을 준비합니다.

 

2. 우측 패널 상단에 있는 Prototype 패널을 선택해줍니다.

 

3. 그 후 화면이나 각각의 오브젝트에 커서를 가져가면 네 방향으로 점이 보입니다. 이 점들을 인터렉션의 시작점으로 핫스팟(Hot Spot)이라고 부릅니다.

 

4. 원하는 방향의 핫스팟을 선택하여 인터렉션이 끝나는 지점으로 선을 연결해줍니다. 이 때 이 연결선을 커넥션 라인(Connection Line)이라고 하고, 인터렉션이 끝나는 도착지점은 데스티네이션(Destination)이라고 합니다.

 

5. 이렇게 핫스팟과 데스티네이션을 연결하면 자동으로 오른쪽 패널이 바뀌면서 Interaction 창이 뜨게 됩니다. 이 창에서  어떤 동작을 했을 때 이 인터렉션이 일어날지, 트리거(Trigger)를 정해주어야 합니다. 아래 트리거들 중 하나를 선택합니다.

• None (없음)
• On Click / On Tap (대상을 클릭하거나 손가락으로 탭했을 때)
• On Drag (마우스로 드래그하거나 손가락으로 스와이프했을 때)
• While Hovering (마우스로 대상 위에 호버하는 동안만)
• While Pressing (마우스로 클릭하고 있거나 손가락으로 누르고 있는 동안만)
• Key/Gamepad (키보드나 패드의 특정 키를 누르고 있을 때)
• Mouse Enter (마우스가 대상의 영역으로 진입/호버했을 때)
• Mouse Leave (마우스가 대상의 영역을 벗어났을 때)
• Mouse Down / Touch Press (마우스 누름이나 터치를 감지했을 때)
• Mouse Up / Touch Release (마우스를 누른 상태, 혹은 화면을 터치한 상태에서, 손가락을 뗐을 때)
• After Delay (정해놓은 시간이 지난 후에)

 

6. 트리거를 선택한 후, 어떤 액션이 일어나야 할지도 정해야 합니다. 트리거를 선택하는 곳 밑에 액션을 선택하는 곳에서 어떤 액션이 일어날지 결정해줍니다.

• None (없음)
• Navigate to (하나의 화면에서 다른 화면으로 전환하기)
• Change to (특정 요소로 변하기)
• Open Overlay (화면/프레임 위에 특정 요소를 띄우기)
• Swap Overlay (띄운 요소를 다른 요소와 바꾸기)
• Close Overlay (띄운 요소를 닫기)
• Back (이전 화면으로 돌아가기)
• Scroll to (특정 부분으로 스크롤하기)
• Open Link (링크 열기)

(대상이 영상인 경우)

• Play Video (비디오 재생하기)
• Pause Video (비디오 일시정지하기)
• Toggle Play/Pause (트리거 작동 시마다 재생과 일시정지를 번갈아가면서 실행하기)
• Mute Video (영상 음소거하기)
• Unmute Video (영상 음소거 해제하기)
• Toggle Mute/Unmute (트리거 작동 시마다 음소거와 해제 번갈아가면서 실행하기)

 

7. 여기에 추가로 액션이 어떻게 보여질지 선택하는 애니메이션을 설정할 수도 있습니다.

• Instant (별도 애니메이션 없이 바로 전환)
• Dissolve (한 화면에서 다음 화면으로 부드럽게 블러되면서 전환)
• Smart Animate (이전 화면과 다음 화면에서 변한 요소들이 무엇인지 계산해서 자동으로 애니메이션 생성)
• Move In (다음 화면이 이전 화면 위로 움직이면서 들어옴)
• Move Out (다음 화면이 이전 화면 위로 움직이면서 빠져 나감)
• Push (다음 화면이 이전 화면을 밀어 들어오면서 전환됨)
• Slide In (Move In과 Dissolve가 섞인 형태로 전환됨)
• Slide Out (Move Out과 Dissolve가 섞인 형태로 전환됨)

 

8. 위의 방법으로 원하는 곳에 인터렉션을 모두 연결하고 난 후, 화면 오른쪽 상단에 있는 화살표를 클릭하여 Figma가 제공하는 목업 위에 올려 프로토타이핑 해볼 수 있습니다.

 

 

✨ 완성

 

🎉완성!🎉