디자인 툴의 혁신, 피그마(Figma)! 단순히 정적인 디자인을 그리는 것을 넘어서, 실제 앱처럼 동작하는 프로토타입을 만들 수 있다는 사실, 알고 계셨나요? 오늘은 피그마 프로토타입의 핵심인 트리거(Trigger)에 대해 자세히 알아보겠습니다.
오픈패스 Figma 실무 마스터 클래스 수업을 공부하면서 ChatGPT로 프로토타입에 대해 따로 조사하면서 발견한 것들을 정리했습니다.
피그마 프로토타입이란?
피그마 프로토타입은 정적인 디자인에 생명을 불어넣는 기능입니다. 사용자가 실제로 클릭하고, 드래그하고, 호버할 수 있는 인터랙티브한 경험을 제공하죠. 이 모든 것이 가능한 이유는 바로 트리거 때문입니다.
피그마 프로토타입의 8가지 트리거 완전 정복
피그마에서 제공하는 트리거는 총 8가지입니다. 각각의 특성과 활용법을 살펴보겠습니다.
1. On Click - 가장 기본적인 상호작용
가장 직관적이고 많이 사용되는 트리거입니다. 사용자가 요소를 클릭했을 때 다음 화면으로 전환되거나 특정 액션이 실행됩니다. 버튼 클릭, 메뉴 선택, 페이지 이동 등에 주로 활용됩니다.
2. On Drag - 터치와 드래그의 세계
모바일 앱에서 흔히 볼 수 있는 스와이프 동작을 구현할 때 사용합니다. 카드 스와이프, 슬라이더 조작, 화면 간 전환 등 직관적인 터치 인터랙션을 만들 수 있습니다.
3. While Hovering vs Mouse Enter/Leave - 호버의 두 얼굴
이 두 트리거는 비슷해 보이지만 완전히 다른 성격을 가지고 있습니다.
While Hovering은 상태 기반 트리거입니다. 마우스가 요소 위에 머무는 동안 지속적으로 상태가 유지됩니다. 버튼에 마우스를 올려두면 배경색이 바뀌고, 마우스를 떼면 원래 상태로 돌아가는 식입니다. 반복 애니메이션을 넣으면 호버하는 동안 계속 반복되어 생동감 있는 효과를 만들 수 있습니다.
Mouse Enter/Mouse Leave는 이벤트 기반 트리거입니다. 마우스가 요소에 진입할 때와 떠날 때 각각 한 번씩 애니메이션이 실행됩니다. 카드 위로 마우스가 올라가면 상세 내용이 슬라이드로 나타나고, 마우스가 떠나면 다시 들어가는 복잡한 전환 효과를 만들 때 적합합니다.
4. While Pressing - 누르는 순간의 긴장감
사용자가 요소를 누르고 있는 동안 계속해서 변화가 일어납니다. 길게 누르면 점진적으로 변하는 애니메이션이나, 게임에서 파워를 충전하는 듯한 효과를 만들 수 있습니다.
5. Key/Gamepad - 키보드와 게임패드의 힘
특정 키를 눌렀을 때 반응하는 트리거입니다. 웹 앱에서 단축키 기능을 시연하거나, 게임 UI 프로토타입을 만들 때 매우 유용합니다.
6. Mouse Down/Mouse Up - 클릭의 세밀한 제어
Mouse Down은 마우스 버튼을 누르는 순간, Mouse Up은 버튼을 놓는 순간을 감지합니다. 일반적인 클릭과 달리, 클릭 과정을 더 세밀하게 제어할 수 있습니다.
Mouse Down은 버튼이 눌리는 느낌을 표현할 때 사용합니다. 버튼이 살짝 작아지거나 어두워지는 효과를 주어 사용자에게 명확한 피드백을 제공할 수 있습니다. Mouse Up은 버튼을 놓는 순간 원래 상태로 복귀하거나 다음 화면으로 전환할 때 사용합니다.
드래그 인터랙션을 만들 때도 매우 유용합니다. Mouse Down으로 드래그 시작을 알리고, Mouse Up으로 드래그 종료와 위치 확정을 처리할 수 있습니다.
7. After Delay - 시간이 만드는 자동 전환
설정한 시간이 지난 후 자동으로 전환이 일어납니다. 스플래시 스크린, 자동 슬라이드쇼, 타임아웃 알림 등을 구현할 때 사용합니다. 사용자의 액션 없이도 프로토타입이 살아 움직이는 듯한 느낌을 줄 수 있습니다.
실전 활용 팁
자연스러운 버튼 애니메이션 만들기
Click 대신 Mouse Down/Up을 조합하면 더욱 자연스러운 버튼 인터랙션을 만들 수 있습니다. Mouse Down으로 눌림 효과를, Mouse Up으로 원래 상태 복귀와 동시에 페이지 전환을 처리하면 사용자에게 명확한 피드백을 제공할 수 있습니다.
호버 효과의 현명한 선택
단순한 강조 효과에는 While Hovering을, 복잡한 상태 전환에는 Mouse Enter/Leave를 사용하세요. While Hovering은 즉각적인 피드백에, Mouse Enter/Leave는 좀 더 정교한 애니메이션에 적합합니다.
액션(Action)
Figma에서 프로토타입을 구성할 때, 단순한 화면 전환만으로는 아쉬운 경우가 많죠.
다행히도 Figma는 이제 총 11가지의 액션(Action)을 통해, 더 동적인 사용자 흐름과 인터랙션을 만들 수 있도록 발전했습니다.
이 글에서는 최신 업데이트 반영된 Figma 프로토타입 액션 11가지를 하나하나 쉽게 설명하고, 어떻게 활용하면 좋은지도 함께 정리해드립니다.
Figma Prototype 액션 11가지 한눈에 보기
| Navigate to | 다른 화면(프레임)으로 이동 | 페이지 전환, 온보딩 흐름 |
| Open overlay | 팝업 형태로 프레임 띄우기 | 모달 창, 드롭다운 |
| Close overlay | 열린 오버레이 닫기 | 닫기 버튼, 배경 클릭 |
| Swap overlay | 다른 오버레이로 교체 | 탭 전환, 툴팁 변경 |
| Scroll to | 같은 프레임 내 특정 위치로 이동 | 네비게이션, 앵커 이동 |
| Back | 이전 프레임으로 되돌아가기 | ‘뒤로’ 버튼, 히스토리 |
| Open URL | 외부 웹사이트 새 창으로 열기 | 외부 링크, 유튜브 등 |
| Change to (Variants) | 컴포넌트 상태 변경 | 토글 스위치, Hover |
| Set variable ⭐️ | 변수 값 변경 | 다크 모드, 카운터 증가 |
| Conditional ⭐️ | 조건에 따라 동작 제어 | if 조건 → 실행 |
| None | 연결만 하고 동작 없음 | Placeholder 용도 |
🔍 각 액션 상세 설명
1. Navigate to
지정한 다른 프레임으로 이동합니다.
- 사용 예: “다음” 버튼 → 다음 화면
- 옵션: Instant, Dissolve, Smart Animate 등 다양한 전환 효과 가능
2. Open overlay
현재 프레임 위에 새로운 프레임을 띄웁니다. -> 모달
- 사용 예: 팝업창, 툴팁, 모달
- 위치 설정: Center, Top Left, 또는 Manual
- 옵션: 배경 어둡게, 외부 클릭 시 닫기
3. Close overlay
열려 있는 오버레이를 닫습니다.
- 사용 예: 모달의 닫기 버튼, 배경 클릭
4. Swap overlay
현재 오버레이를 다른 오버레이로 교체합니다.
- 사용 예: 탭 전환, 툴팁 내용 변경
5. Scroll to
같은 프레임 내 특정 요소로 부드럽게 스크롤합니다.
- 사용 예: “자세히 보기” 클릭 시 아래로 이동
6. Back
방문한 이전 프레임으로 되돌아갑니다.
- 사용 예: ‘뒤로 가기’ 버튼, 히스토리 제어
7. Open URL
외부 웹사이트를 새 창으로 엽니다.
- 사용 예: GitHub, 이력서 링크, 유튜브 영상 등
8. Change to (Variants)
컴포넌트의 상태(Variant)를 전환합니다.
- 사용 예: 토글 스위치 On/Off, 버튼 Hover 상태
- 마치 toggle처럼 작동하며, 조건 없이 상태만 바뀝니다.
9. Set variable ⭐️ (2024 핵심 기능!)
사용자 상호작용에 따라 변수 값을 동적으로 바꿉니다.
- 지원 타입: String, Number, Color, Boolean
- 사용 예:
- 다크모드: themeColor = #000000
- 수량 버튼: count = count + 1
- 상태 토글: isOn = !isOn
10. Conditional (조건 실행) ⭐️
변수 값을 기준으로 조건을 설정해 동작을 분기할 수 있습니다.
- 사용 예:
- if (isDark == true) → 다크 테마 적용
- if (count > 3) → 버튼 활성화
11. None
아무 동작 없이 단순 연결만 유지합니다.
- 사용 예: 빈 버튼 연결, 레이아웃 흐름만 표시
함께 쓰면 좋은 전환 옵션
- Transition Types: Instant, Dissolve, Smart Animate, Move in/out, Slide 등
- Easing: Ease In, Ease Out, Linear 등
- Duration 설정: 애니메이션 속도 조절
- Preserve scroll position: 전환 시 스크롤 위치 유지
마무리 정리
| 화면 전환 | Navigate to |
| 팝업 / 메뉴 | Open overlay, Swap overlay |
| 버튼 상태, 토글 | Change to, Set variable |
| 사용자 조건 분기 | Set variable + Conditional |
| 외부 사이트 이동 | Open URL |
| 특정 위치로 이동 | Scroll to |
| 연결만 유지 | None |
애니메이션 전환 종류 (Transition Types)
프레임이나 오버레이 간 전환 시 선택 가능한 애니메이션 종류는 다음과 같습니다:
| Instant | 애니메이션 없이 즉시 전환 | 빠른 전환이 필요한 경우 |
| Dissolve | 부드럽게 페이드 인/아웃 | 팝업, 부드러운 장면 전환 |
| Smart Animate | 같은 오브젝트 간 속성 차이를 기준으로 부드럽게 애니메이션 | 모션 효과, 상태 전환 |
| Move In / Move Out | 지정한 방향으로 들어오거나 나감 | 슬라이드 메뉴, Onboarding |
| Push | 기존 화면을 밀어내며 새 화면 진입 | 양방향 슬라이딩 구조 |
| Slide In / Slide Out | 기존 화면은 고정, 새로운 화면이 슬라이드됨 - 디졸브가 있어 연결 자연스럼 | 탭 전환, 메뉴 팝업 |
Smart Animate란?
Smart Animate는 Figma의 가장 강력한 애니메이션 기능입니다.
두 프레임 사이에 같은 이름을 가진 레이어(객체)가 있을 경우, 위치, 크기, 불투명도, 색상, 회전 등의 차이를 자동으로 인식하고 부드럽게 애니메이션 처리해줍니다.
예시:
- 버튼 클릭 → 아이콘이 회전
- 카드가 확대되며 상세화면으로 전환
- 서브메뉴가 자연스럽게 슬라이드됨
조건:
- 동일한 오브젝트 이름이 두 프레임에 있어야 함
- 해당 속성(위치, 크기, 불투명도 등)이 변경되어 있어야 함
- Auto Layout이 있는 경우, Layout Animation도 적용 가능
세부 옵션: Easing & Duration
🕐 Duration
- 애니메이션의 속도 조절
- 기본값: 300ms
- 100ms ~ 1000ms 사이에서 조정 가능
⤴️ Easing (가속/감속 설정)
| Ease In | 느리게 시작 → 빨라짐 | 긴장감, 집중 유도 |
| Ease Out | 빠르게 시작 → 부드럽게 끝남 | 부드러운 마무리 |
| Ease In and Out | 양쪽 모두 부드럽게 | 자연스러운 흐름 |
| Linear | 일정한 속도 | 기계적, 정밀한 느낌 |
| Custom Bezier | 직접 곡선 조절 가능 | 고급 애니메이션 연출에 적합 |
실전 애니메이션 설계 팁
🔹 1. 빠른 전환 = Instant
- 단순 버튼 클릭, 링크 이동에는 Instant가 깔끔합니다.
🔹 2. 상태 전환 = Smart Animate + Ease In/Out
- Hover, Toggle, Variant 전환 시 부드러운 피드백 제공
- 실제 앱처럼 느껴지게 만드는 핵심
🔹 3. 오버레이 = Move In / Dissolve
- 메뉴, 팝업 등 등장할 때 방향성 주면 직관적
🔹 4. Tab or Drawer UI = Slide or Push
- 페이지 간 유사한 구조의 흐름 전환에 적합
- UX 패턴이 직관적으로 전달됨
1. 전환 애니메이션 기본 개념
- 전환 유형: 요소가 특정 방향으로 이동하며 화면이 전환되는 방식
- 설정 가능 요소:
- 디렉션(Direction): 전환 방향 (Left, Right, Up, Down)
- 이징(Easing) / 커브(Curve): 속도 조절
- 듀레이션(Duration): 지속 시간
- 애니메이션 매칭 레이어
- 동일한 이름의 레이어 간 움직임만 애니메이션에 반영
- 상태 표시줄, 바텀 내비게이션 등은 고정되고, 필요한 요소만 움직임 적용 가능
2. Direction 설정
- Left: 오른쪽 → 왼쪽 전환
- Right: 왼쪽 → 오른쪽 전환
- Down: 위 → 아래 전환
- Up: 아래 → 위 전환
- 시연으로 확인 가능: 클릭 시 요소가 해당 방향으로 슬라이드됨
3. 커브(Curve)와 이징(Easing)
- 이징(Easing): 애니메이션 속도 곡선 조절 (수학 함수 기반)
- 그래프 의미:
- X축: 시간
- Y축: 위치/크기/색상 등 속성 변화
📌 이징 프리셋 종류
| Linear | 일정한 속도로 전환 |
| Ease In | 느리게 시작 → 빠르게 |
| Ease Out | 빠르게 시작 → 느리게 |
| Ease In & Out | 느리게 시작 → 빠르게 → 다시 느리게 |
| Ease In Back | 시작 시 뒤로 반동 후 전진 |
| Ease Out Back | 종료 시 앞으로 반동 후 정지 |
| Ease In & Out Back | 시작과 끝 모두 반동 있음 |
커스텀 이징
- 핸들 드래그 또는 좌표값 수동 입력으로 커브 직접 조정 가능
4. 스프링(Spring) 애니메이션
- 물리 기반 애니메이션, 자연스러운 반동 효과
- 주요 속성:
- Stiffness (탄성): 클수록 더 빠르고 강함
- Damping (감쇠): 움직임 안정화 속도
- Mass (질량): 무게감 표현
프리셋 종류
| Gentle | 기본 부드러운 탄성 효과 |
| Quick | 빠르고 강한 반동, 알람 등에 적합 |
| Bounce | 공처럼 튕기는 효과 |
| Slow | 느리고 차분한 탄성 효과 |
- 역시 핸들 또는 수치 입력으로 커스터마이징 가능
5. 듀레이션(Duration)
- 애니메이션 총 시간
- 일반적으로 200ms ~ 400ms 권장 (맥락에 따라 조정)
6. Reset Scroll Position
- 화면 전환 시 스크롤 위치 초기화 여부 설정
- 기본값: 이전 스크롤 위치 유지됨
- 활성화 시: 프레임 전환 후 항상 상단에서 시작
활용 예:
- 쇼핑몰 상세페이지 → 홈 복귀 시, 스크롤 상단으로 리셋
🧠 총정리 키포인트
| 전환 애니메이션 | 방향, 시간, 속도, 곡선 설정 가능 |
| Matching Layer | 고정 요소 유지, 필요한 요소만 애니메이션 |
| Easing 종류 | 총 7가지 프리셋 + 커스텀 조정 |
| Spring | 물리적 반동감 표현, 3가지 속성 조절 |
| Scroll Reset | 이전 스크롤 유지 여부 설정 가능 |
| Smart Animate | 프레임 간 속성 비교로 자연스러운 전환 |
