스크롤 컨테이너와 오버플로우
1. 오버플로우(Overflow)
- 프레임 밖으로 콘텐츠가 넘어가는 것
- 프레임에 오버플로우가 발생하면, 프레임 밖으로 넘어간 콘텐츠를 스크롤로 보여 줌
- 오버플로우가 되지 않으면 스크롤은 생기지 않음
2. 스크롤 컨테이너(Scroll Container)
- 오버플로우가 생긴 프레임을 스크롤로 만들어 주는 기본적인 프로토타입 기능
- 실제로 스크롤 되어야 하는 콘텐츠와 스크롤 속성을 적용할 컨테이너가 있으면 스크롤 발생
- 스크롤 방식(Scroll Behavior)
- No scrolling: 스크롤 하지 않는 기본 값
- Horizontal: 내부의 콘텐츠들이 가로로 넘칠 때 가로 방향으로 스크롤
- Vertical: 내부의 콘텐츠들이 세로로 넘칠 때 세로 방향으로 스크롤
- Both directions: 가로 및 세로 방향 모두 스크롤
화면 디자인 연결하기
트리거와 액션
1. 플로우의 구성 요소
- 트리거(Trigger): 액션을 시작하는 조건이나 이유, 계기 (=이벤트)
- 액션(Action): 트리거로 인해 만들어지는 결과
- 애니메이션(Animation): 트리거를 통해 액션을 실행할 때 어떻게 실행할 건지
2. 트리거의 종류
- On click: 클릭 또는 탭/터치했을 때 액션 실행
- On drag: 드래그했을 때 액션 실행
- While hovering: 커서/마우스가 영역 위에 올라가 있는 동안 계속 액션 실행
- While pressing: 커서/마우스로 영역을 누르고 있는 동안 계속 액션 실행
- Key/Gamepad: 특정 키를 눌렀을 때 액션 실행
- Mouse enter: 커서/마우스가 영역 위에 올라가면 액션 실행
- Mouse leave: 커서/마우스가 영역을 벗어나면 액션 실행
- Mouse down: 커서/마우스가 영역을 누르면 액션 실행
- Mouse up: 커서/마우스가 영역을 눌렀다 떼면 액션 실행
- After delay: 일정 시간이 지난 후 액션 실행
3. 액션의 종류
- Navigate to: 페이지(프레임)를 이동하는 액션
- Change to: 컴포넌트의 다른 배리언츠로 변경하는 액션
- Back: 직전 화면으로 이동하는 액션
- Set variable: 변수를 특정 값으로 설정하는 액션
- Set variable mode: 변수를 특정 모드로 설정하는 액션
- Conditional: 분기점을 만들어서 조건에 따라 A 또는 B를 실행하는 액션
- Scroll to: 현재 프레임의 특정 지점까지 스크롤해서 이동하는 액션
- Open link: 특정 URL을 여는 액션
- Open overlay: 현재 프로토타입 화면에 다른 프레임을 위에 겹쳐서 보여 주는 액션
- Swap overlay: 라이트박스를 유지한 채 다른 프레임으로 교체하는 액션
- Close overlay: 라이트박스를 닫는 액션
항목을 선택하면 상세 페이지로 이동되는 프로토타입 생성
애니메이션
1. 프로토타입 애니메이션
- 애니메이션은 액션을 어떻게 실행할지 결정
- 화면의 전환을 어떻게 처리할지 결정
- 피그마 애니메이션 종류
- Instant: 별도의 애니메이션 없이 즉각 실행
- Dissolve: 페이드인/아웃이라고도 하며, 천천히 흐릿해지며 화면 전환
- Smart animate: 이름이 같은 프레임들이 자연스럽게 움직이도록 도움
- Move in/out: 현재 화면 위에 다음 화면을 덮거나 현재 화면이 벗겨지듯 전환
- Push: 현재 화면을 지정한 방향으로 밀면서 등장
- Slide in/out: 현재 화면을 지정한 방향으로 밀어 사라지가 하며 등장
2. 스마트 애니메이트(Smart Animate)
- 작동에 필요한 가장 중요한 요소
- 동일한 이름을 가진 움직일 요소들
- 동일한 레이어 구조
- 스마트 애니메이트를 조작할 수 있는 속성
- 크기(Scale)
- 위치(Position)
- 투명도(Opacity)
- 회전(Rotation)
- 배경색(Fill)
스마트 애니메이트를 활용하여 리스트 항목이 삭제되는 프로토타입 생성
디자인 핸드오프
핸드오프(Hand-off)
1. 핸드오프의 개념
- 개발자에게 전달하기 위해 디자인 사양을 정리한 문서
- 핸드오프 작성 원칙
- 통일된 구성
- 최대한 자세한 설명
- 쉬운 언어 표현
2. 핸드오프의 구성
- 디자인의 전체적인 구조
- 각 프레임의 크기 및 길이
- 각 프레임의 여백 및 간격
- 사용된 폰트 및 컬러 스타일 등
3. 관련 플러그인
- DesignDoc[Spectral]: 선택한 디자인의 핸드오프를 자동으로 만들어 주는 플러그인
출처: https://www.figma.com/community/plugin/1177722582033208360/designdoc-spectral-measures-annotations-and-handoff
DesignDoc을 활용한 로그인 페이지
디자인 공유하기
1. 디자인 정리하기
디자인 정리를 위한 표지 생성
UI 키트도 정렬 맞추어 정리 진행
2. 디자인 공유하기
우측 상단의 [Share] 버튼 클릭 후 링크 복사하여 공유
프로토타입 프레젠테이션 화면에서 우측 상단의 [Share Prototype] 버튼 클릭 후 링크 복사하여 공유
프레임 선택 > 우클릭 > Copy/Paste as > Copy link to selection 선택하여 공유