디자이너 맥신, 성장일기

피그마 프로토타입 - 트리거

프로토타입을 실행하는 조건 - 어떤 사건, 이벤트가 발생해야 실행할 것인지

• On click (가장 기본) 부터 Key/Gamepad까지 - 지속
• Mouse enter 부터 Mouse up까지 - 단발성
• After delay : 특정 시간이 지난 후에, 1초 = 1000ms(밀리세컨), 3초 이후에 실행시키고 싶으면 3000ms을 기입한다.

피그마 프로토타입 - 액션 (10가지)

프로토타입 목적지에 도달하는 방법, 트리거로 인한 결과, 이벤트가 발생하면 어떻게 반응하는지 설정할 수 있다.

• Naviage to (가장 기본) : 페이지 이동
• Change to : 컴포넌트의 베리언츠를 바꿔줌
• Back : 바로 직전 화면 이동
• Set variable : 피그마에 변수라는 개념이 있다. 이 변수를 특정값으로 설정하는 액션 *(유료기능)
• Conditional (자주 쓰임) : 분기점을 만들어서 트리거가 실행됬을 때 조건에 따라서 A 또는 B 액션으로 나눌 수 있다.
• Scroll to : 특정 지점으로 이동하는 기능, 설정 프레임 안에서만 가능, 위치 이동 가능
• Open link : 링크를 여는 액션, 링크를 통해 피그마의 특정 프레임으로 이동할 수 있다.
• Open Overlay, Swap Overlay, Close Overlay : 현재 프로토타입 화면에 라이트박스 + 프레임을 보여주는 액션. 다이얼로그나 바텀 시트를 보여줄 때 자주 사용.
  
  
• Open Overlay : 현재 화면 위에 가상의 레이어 (라이트 박스)를 깔아주는 셈

• Swap Overlay : 오픈 오버레이 된 것을 다른 것으로 교체해줌.
• Close Overly : 오픈 오버레이 된 것을 닫아줌.

프로토타입 기능은 디자인을 연결해서 테스트할 때 사용하는 것이 일반적이다.
✅ 버튼을 눌렀을 때 버튼의 상태가 변하는 인터렉션도 만들 수 있는데, 매번 디자인할 때마다 인터렉션을 만들기엔 비효율적.
✅ 이 때 디자인 시스템 안에 있는 컴포넌트 자체에 트리거와 액션을 활용해 상태 변화를 적용하면 더 효율적으로 디자인할 수 있다. (단, 오류가 잘 나서 충돌하지 않는지 확인해야 함)

피그마 프로토타입 - 애니메이션

• 트리거 : 시작하는 조건
• 액션 : 실행하는 내용
• 애니메이션 : 액션을 어떻게 실행할지를 결정

Instant : 별도의 애니메이션 없이 즉각 실행

Dissolve : 천천히 흐릿해지면서 화면을 전환

Smart animate : 이름이 같은 프레임들이 자연스럽게 움직이도록 함

Move in/out : 현재 화면 위에 다음 화면을 덮거나 현재 화면이 벗겨지듯 전환

Push : 현재 화면을 지정한 방향으로 밀면서 등장

Slide in/out : 현재 화면을 지정한 방향으로 밀어 사라지게 하면서 등장해요.

📌 스마트 애니메이트에서 가장 중요한 것

스마트 애니메이트가 제대로 작동하려면 반드시 작동하는 요소의 이름이 같아야 한다. 또한 프레임의 레이어 구조가 통일되어 있지 않거나, 구조가 다르면 정상적으로 작동하지 않는다. 만약 제대로 움직이지 않는다면 반드시 이 2가지를 확인!

✅ 움직일 요소의 이름이 같은지
✅ 레이어 구조가 동일한지 

• 피그마 프로토타입에서 가장 중요한 애니메이션 기능
• 이름이 같은 요소가 있다면, 화면을 이동할 때 그 요소의 변화를 자연스럽게 만들어 주는 기능. 스마트 애니메이트의 원리를 응용하면 다양한 UI 인터랙션을 구현할 수 있다.

피그마 프로토타입 응용하기- 스크롤 컨테이너

✅ 스크롤 컨테이너는 피그마에서 가장 많이 사용하는 기본적인 프로토타입 기능

✅ 스크롤은 스크롤할 내용과 스크롤을 구현할 컨테이너가 있어야 한다.

✅  컨테이너보다 내용이 더 길어야 컨테이너에 스크롤을 적용할 수 있다.

스크롤 방식(Scroll Behavior)

스크롤 방식은 프로토타입 패널에서 선택할 수 있다ㅏ.

1. No scrolling : 스크롤X. 기본값
2. Horizontal : 가로 방향으로 스크롤
3. Vertical : 세로 방향으로 스크롤
4. Both directions : 가로 및 세로 방향으로 모두 스크롤

포지션 이해하기

포지션 = 실제 개발에서도 사용하는 개념. 디자인과 레이아웃을 위한 코드인 CSS에서 사용할 수 있다.

• 앱과 웹사이트에 있는 모든 요소들은 스크롤하게 되면 스크롤을 따라 같이 움직인다.
• 하지만 웹사이트의 헤더나, 앱의 버튼처럼 위치가 고정된 요소들이 있다.
• 이렇게 요소들을 고정할 때, 포지션을 조정해서 만든다.

피그마에서 설정할 수 있는 포지션의 종류

Static(스태틱) : 대부분의 요소들이 가지고 있는 포지션. 기본값이자 스크롤을 따라 같이 움직인다.

Fixed(픽스드) : 화면이 바뀌거나 스크롤해도 항상 고정된 위치에. 웹사이트의 헤더나 앱 하단의 버튼 등이 Fixed Position.

Absolute(앱솔루트) : Fixed와 유사하지만, 고정되는 기준이 컨테이너 안이라는 점이 다름.
✅ 즉, Fixed는 화면 전체를 기준으로 하고, Absolute는 본인이 담겨 있는 컨테이너를 기준으로 해요.

피그마에서 포지션 설정하기

Static, Fixed, Sticky : 프로토타입 패널에서 설정 가능

Absolute

• 프레임 패널 안에 있음
• 오토레이아웃 프레임 안에 있을 때만 사용 가능
• 오토레이아웃에 영향받지 않고, 일반 프레임에 배치하는 것처럼 움직일  수  있다.

피그마에서 포지션 설정하기

• 오버레이는 다이얼로그 등을 사용할 때 같이 쓰는 라이트박스와 같은 개념
• 피그마 오버레이 안에는 라이트박스의 개념이 포함됨

피그마에서 프로토타입으로 오버레이를 만드는 건 가상의 라이트박스를 만드는 것과 같다.

실무에서는 단 한 번도 써보지 못한 피그마 프로토타입 기능.
까먹고 있던 그 기능을 다시 배워 복습하는 시간을 보냈다.

PPT 템플릿 만들기 강의에서 몰랐던 유용한 플러그인을 알게되었다.

무조건 저장각 :)