[강의학습일지] Figma 활용법(2) 3주차 강의

프로토타입

 

• 실제 제품을 만들지 않고 아이디어를 테스트해 볼 수 있는 것
• Lo-fi(Low/High): 전체 흐름을 빠르게 맞춰볼 수 있는 수준. 와이어프레임. 피그마는 Lo-fi를 만드는데 특화됨
• Hi-fi(High Fidelity): 실제 제품과 거의 같거나 유사한 수준(사용자 대상으로 사용성 테스트, 제품 피드백 수집 가능)
• 프로토타입을 만들거나 사용해 테스트하는것을 프로토타이핑이라고 함
• 프리뷰 모드: Shift+Space
• 문장으로 이해하면 편함: ~하면(조건,트리거) 어떻게(애니메이션) ~한다(액션)

• 1) 핫스팟(Hot Spot): 프로토타입을 시작하는 지점
  • 인터랙션(Interaction)에서 +를 클릭해도 OK
• 2) 커넥션(Connection): 화면을 서로 이어주는 연결선 
• 3) 종착점(Destination): 도착 지점

트리거(Trigger)와 액션

 

• 트리거(Trigger): 프로토타입의 플로우를 실행하는 조건. 어떤 일이 생기면 실행되는지

• On Click(모바일에서는: On Tab): 클릭을 했을 때 실행
• 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 : 일정 시간이 지난 후에 액션을 실행(1초=1000ms)

액션(Action)

 

• 트리거가 무엇을 하게 했는지?
• Navigate to : 페이지(프레임)를 이동하는 액션
• Change to : 컴포넌트의 다른 배리언츠로 변경하는 액션
  • 트리거가 컴포넌트에 적용되어 있을 때만 사용할 수 있음
• Back : 직전 화면으로 이동하는 액션
  • 뒤로가기 버튼에 적용하면 언제든지 이전 화면으로 이동할 수 있음
• Set variable : 변수를 특정 값으로 설정하는 액션
  • 트리거를 실행하면 변수를 원하는 값으로 설정할 수 있음
• Conditional : 분기점을 만들어서 조건에 따라 A 또는 B를 실행하는 액션
  • 조건분기 기능은 피그마 유료 계정부터 사용할 수 있음
• Scroll to : 현재 프레임 내의 특정 지점까지 스크롤해서 이동하는 액션
• Open link : 특정 URL을 여는 액션
  • 피그마 안의 특정 영역이나 프레임으로도 이동할 수 있음
• Open overlay : 현재 프로토타입 화면에 라이트박스와 프레임을(가상의 레이어) 보여주는 액션
  • 다이얼로그나 바텀시트를 프로토타입에서 보여줄 때 자주 사용함
• Swap overlay : 라이트박스를 유지한 채 다른 프레임으로 교체하는 액션
• Close overlay : 라이트박스를 닫는 액션

컴포넌트 상태 변경

 

• 디자인 시스템 안의 컴포넌트 자체에 트리거와 액션을 활용해서 상태변화를 적용하면 효율적으로 디자인할 수 있음
• 실제 제품 프로토타입을 만드는 경우 컴포넌트 프로토타입과 충돌하지 않는지 확인 후 작업하기!

애니메이션(Animation)

 

• 어떻게 실행할것인지를 결정함
• Instant: 인터랙션 없이 바로 실행
• Dissolve: 천천히 흐릿해지면서 변함(Fade in/out)
• Smart animate: 이름이 같은 프레임들이 자연스럽게 움직이도록 만들 수 있음
  • 레이어의 이름, 구조가 반드시 같아야 함
  • 제대로 움직이지 않는다면: 움직일 요소 이름이 같은지 확인/레이어 구조 확인
  • 이름과 구조가  같은것은 프로토타입 탭에서 파란색 박스로 확인할 수 있음
  • 크기(Scale): 크기를 다르게 하면 커지거나 작아지게 할 수 있음
  • 위치(Position): 위치를 다르게 하면 요소를 자연스럽게 이동할 수 있음
  • 투명도(Opacity): 레이어나 색상의 투명도를 다르게하면 사라지거나 나타나게 할 수 있음
  • 회전(Rotation): 요소를 자연스럽게 회전하게 만들 수 있음
  • 배경색(Fill): 요소의 배경색을 칠하거나 다른색으로 자연스럽게 변경할 수 있음
• Move in/out: 현재 화면 위에 다음화면을 덮거나 벗겨지듯이 전환
• Push: 현재 화면을 지정한 방향으로 밀면서 등장
• Slide in/out: 현재 화면을 지정한 방향으로 밀어 사라지게 하면서 등장(Push+Move in/out+Dissolve)

스크롤 컨테이너(Scroll Container)

 

• 스크롤할 내용, 스크롤 구현할 컨테이너가 있어야함
• 스크롤 컨테이너보다 안의 내용이 더 길어야 스크롤이 작동됨
• No scrolling: 스크롤 안됨
• Horizontal: 가로방향 스크롤
• Vertical: 세로방향 스크롤
• Both directions: 가로, 세로 모두 스크롤 가능

포지션(Position)

 

• 개발에서도 사용하는 개념
• 디자인과 레이아웃을 위한 코드인 CSS에서 사용할 수 있음
• 스태틱(Static): 스크롤 따라 움직임
• 픽스드(Fixed): 화면이 바뀌거나 스크롤해도 그 위치에 고정되어 있음
• 앱솔루트(Absolute): 고정되는 기준이 부모 컨테이너(담겨있는 곳)
  • 프레임 패널 안에 있음
  • 오토레이아웃 프레임 안에 있을 때만 사용 가능
• 스티키(Sticky): 스크롤에 따라 움직이다가 특정 위치(상단에 닿는 순간)부터는 상단에 고정됨

오버레이(Overlay)

 

• 라이트박스와 같은 개념
• 위치(Position): 프레임 가운데부터 시작해서 오버레이가 등장할 위치를 정할 수 있음. 수동으로 직접 위치를 조절할 수도 있음
• Close when clicking outside: 오버레이로 연 프레임 외부를 누르면 오버레이가 닫히게 하는 옵션
• Add background: 오버레이로 연 프레임 외부에 라이트박스를 만들어 주는 옵션
• Close overlay는 반드시 Open overlay가 있어야 함