핵심 기능으로 빠르게, 피그마 실무 50강사전(5)

 

1. 프로토타이핑

디자인한 작업물을 실제 구현된 모습과 유사하게 만드는 과정. 즉, 모든 인터렉션을 반영하는 과정

협업을 원할하게 하고 불필요한 수정을 줄이기 위해 실행한다.

위와 같이 프로토타입이 실행될 디바이스를 선택할 수 있다.

 

프로토타이핑 거는 법

1. 프레임을 드래그하여 연결하기

 

2. 오른쪽 Action 탭 이용하기

 

인터렉션은 프레임 사이에만 기능하므로 프로토타이핑 구현 예정인 경우 초기 구현에서 프레임 단위로 구현해야한다.

우측 presentation 모드, Figma Mirror(앱) 등에서 프로토타입을 시현할 수 있다.

 

---

2. 프로토타이핑 액션 종류

 

트리거 -> 워크(액션) -> 결과 로 진행된다.

 

• Open/Swap/Close overlay : 팝업이 열기/바꾸기/닫기
• Navicate to : 화면 이동
• Back : 이전 화면으로 돌아가기
• Scroll to : 특정 스크롤 위치로 이동하기(전체 프레임에 스크롤 적용 필요)
• Open link : Link 열기

 

---

3. 프로토타이핑 트리거 종류

• On Click : 특정 요소 클릭
• On Drag : 파일 등 드래그
• While Hovering : 마우스 커서가 올라가있는 동안
• While Pressing : 요소를 누르고 있는 동안
• Key/Gamepad : 특정 단축키를 누른 경우
• Mouse Enter/Leave : 마우스커서와 만났을 때, 떠났을때
• Mouse Down/up : 마우스 키패드를 처음 눌렀을 때, 놓았을 때
• After Delay : 지정된 시간이 지난 후

 

---

4. 프로토타이핑 애니메이션 종류

인터렉션의 움직임에 효과를 준다.

애니메이션의 속도 등을 조절할 수 있다.

• Linear : 일정하게 속도 증가. 부자연스러움
• Ease ~ : 중간에 운동 속도가 달라지는 효과들
• Custom bezier : 속도를 유저가 조절할 수 있다.
• Gentle ~ Custom Spring : 통통 튀는 애니메이션 효과를 연출

• Instant : 즉시 이동. 화면이 끊기는 느낌이 든다.
• Fissolve : 페이드 효과
• Smart animate : 동일한 레이어 명을 가진 요소의 차이점을 이용해 애니메이션을 넣는다.
• Move in/out : 기존 프레임 위로 새로운 프레임을 밀어 넣거나 내보내기 하는 효과
• Push : 기존 프레임을 밀어내면서 새로운 화면이 들어오는 효과
• Slide in/out : 기존 프레임을 1/3정도 밀어내며 새로운 화면이 들어오거나 나가는 효과

 

화면이 조정되더라도 스크롤 값을 유지하는 설정

Frame Contraints 에서 원하는 요소를 고정할 수 있다.

 

---

5. 스마트 애니메이션

레이어명이 동일할 때 크기, 위치, 색상 등의 차이를 감지해서 애니메이션을 자동으로 적용한다.

주로 로딩, 패럴랙스 스크롤링, 콘텐츠 확장, 슬라이더 등의 UI에 적용한다.

다른 애니메이션 효과와 함께 사용할 수 있다.

 

---

6. 프로토타이핑에 영상 넣기

PRO 요금제만 가능하다...

ㅜ

---

7. 인터랙티브 컴포넌트

컴포넌트 자체(variant)에 인터랙션 기능을 부여해주는 기능

인터랙션 플로우를 간소화하고, 효율을 위해 사용한다.

variant + change to 인터랙션을 더해 만들어준다.

select 옵션 등의 기능에서 특히 유용하게 사용!

 

 

---

# 회고

 

피그마에도 이런 애니메이션 효과가 있는 줄 몰랐다!

근데 디자인팀에서 이런거 사용한건 아직 못봄...