[Figma] 오버플로우와 프로토타이핑

 

오버플로우(Overflow)란?

프레임 밖으로 컨텐츠가 넘어가는 것

 

 

프레임에 오버플로우가 발생하면, 프레임 밖으로 넘어간 콘텐츠를 스크롤(Scroll to)로 보여줄 수 있다!

 

* 여기서 중요한 것!⭐️

프레임에 스크롤을 적용하려면, 프레임 안의 콘텐츠가 프레임보다 더 커야 한다!

 

 

 

프로토타이핑 (Prototyping)

프로토타이핑 인터렉션의 구성

'트리거' 행동을 하면, '애니메이션'을 하면서 '액션'을 취한다. 

 

* 직접 해보면서 익숙해지기!

 

🔫 트리거 종류

• On click : 클릭 또는 탭/터치했을 때 액션을 실행
• On drag : 드래그했을 때 액션을 실행
• While hovering : 커서/마우스가 영역 위에 올라가 있는 동안 계속 액션을 실행
  Mouse enter와 Mouse leave를 계속 반복하는 것과 같은 효과
• While pressing : 커서/마우스로 영역을 누르고 있는 동안 계속 액션을 실행
  Mouse down와 Mouse up를 계속 반복하는 것과 같은 효과
• Key/Gamepad : 특정 키를 눌렀을 때 액션을 실행
• Mouse enter : 커서/마우스가 영역 위에 올라가면 액션을 실행
• Mouse leave : 커서/마우스가 영역을 벗어나면 액션을 실행
• Mouse down : 커서/마우스가 영역을 누르면 액션을 실행
• Mouse up : 커서/마우스가 영역을 눌렀다 떼면 액션을 실행
• After delay : 일정 시간이 지난 후에 액션을 실행

 

💣 액션 종류

• Navigate to : 페이지(프레임)를 이동하는 액션
• Change to : 컴포넌트의 다른 배리언츠로 변경하는 액션
  트리거가 컴포넌트에 적용되어 있을 때만 사용
• Back : 직전 화면으로 이동하는 액션이에요.
  뒤로가기 버튼에 적용하면 언제든지 이전 화면으로 이동
• Scroll to : 현재 프레임의 특정 지점까지 스크롤해서 이동하는 액션
• Open link : 특정 URL을 여는 액션
• Open overlay : 현재 프로토타입 화면에 다른 프레임을 위에 겹쳐서 보여주는 액션
  다이얼로그나 바텀시트를 프로토타입에서 보여줄 때 자주 사용
  • +) 라이트박스란
    팝업 같은 요소가 등장할 때, 일반적으로 ‘뒤에 가려진 화면은 사용할 수 없다’는 걸 보여주기 위해 사용하는 반투명한 화면!
    스크림(Scrim; 천 또는 장막), 딤드(Dimmed; 흐려진), 딤레이어(Dim Layer), 오버레이(Overlay) 등으로도 불려요.
• Swap overlay : 라이트박스를 유지한 채 다른 프레임으로 교체하는 액션
• Close overlay : 라이트박스를 닫는 액션

 

💣 애니메이션 종류

• Instant : 별도의 애니메이션 없이 즉각 실행
• Dissolve : 천천히 흐릿해지면서 화면을 전환
• Smart animate : 이름이 같은 프레임들이 자연스럽게 움직이도록 

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

스마트 애니메이트가 제대로 작동하려면
1. 반드시 작동하는 요소의 이름이 같아야 한다. 
2. 또한 프레임의 레이어 구조가 똑같아야 한다.

• Move in/out : 현재 화면 위에 다음 화면을 덮거나 현재 화면이 벗겨지듯 전환
• Push : 현재 화면을 지정한 방향으로 밀면서 등장
• Slide in/out : 현재 화면을 지정한 방향으로 밀어 사라지게 하면서 등장