프로토타입 구조와 예시
prorotype 프로토 타입이란
디자인한 UI의 흐름과 사용자 경험(UX)을 시뮬레이션하기 위한 도구
사용자 인터페이스(UI) 및 사용자 경험(UX) 디자인 작업을 돕기 위해 개발된 웹 기반 애플리케이션입니다.
Figma는 그래픽 디자인, 웹 디자인, 모바일 앱 디자인 등 다양한 디자인 작업에 활용됩니다.
Figma 프로토타입은 디자인 요소와 화면 간의 상호작용을 시뮬레이션하고 시각화하는 기능을 제공하고 이를 통해 디자이너와 클라이언트 또는 팀 간의 커뮤니케이션을 강화하고 디자인의 동작과 흐림을 검태 하고 개선할 수 있습니다.
- 스크린 간 전환 시물레이션 : 디자인 화면 간의 이동 및 전환을 시각적으로 시뮬레이션하여 사용자 경험을 평가하고 디자인 결함을 확인할 수 있습니다.
- 상호 작업 추가 : 버튼 클릭, 드래그 앤 드롭 등의 상호 작용을 프로토타입에 추가하여 어떻게 작용하는지 미리봄으로써 디자인개선에 활용할 수 있습니다.
- 애니메이션 및 상태 변환 표현 : Figma 프로토타입은 요소의 애니메이션 및 상태 변화를 보여줌으로써 사용자 경험의 다양한 측면을 시연할 수 있습니다.
- 실제 환경과 유사한 경험 제공 : Figma는 웹 기반의 다양한 디바이스에서 프로토타입을 공유하고 테스트할 수 있어서 실제 환경과 유사한 경험을 제공할 수 있습니다.
Figma 프로토타입은 디자인 프로세스에 기초 단계부터 최종 디자인 및 개발 단계까지 활용될 수 있습니다.
디자이너와 개발자 간의 원활한 협업을 도울뿐 아니라 , 사용자 경험을 개선하고 디자인 아이디어를 효과적으로 전달하는데 도움을 줍니다.
프로토타입 종류
- 와이어프레임(Wireframe) 프로토타입: 기본적인 레이아웃 및 구성 요소의 배치를 시각적으로 나타내는 프로토타입입니다. 사용자 인터페이스(UI)의 구조를 보여주고 사용자 경험(UX)을 설계하는 데 사용됩니다.
- 로우 프로토타입(Low-Fidelity Prototype): 세부 디자인이나 인터랙션보다는 주요 기능과 레이아웃에 초점을 맞춘 프로토타입입니다. 보통 간단한 선 그림이나 모양을 사용하여 구성된다.
- 하이 프로토타입(High-Fidelity Prototype): 디자인의 세부 사항을 포함하여 실제 애플리케이션에 가까운 외관을 가지는 프로토타입입니다. 실제 컬러, 폰트, 이미지 등을 사용하여 디자인을 구현합니다.
- 인터랙티브 프로토타입(Interactive Prototype): 사용자와의 상호 작용을 시뮬레이션하는 프로토타입입니다. 버튼 클릭, 드래그 앤 드롭 등과 같은 사용자 액션에 반응하여 화면 전환 등의 인터랙션을 보여줍니다.
- 프로덕션 프로토타입(Production Prototype): 실제 제품에 가까운 완성도를 가지고 있으며, 디자인 시스템과 일관된 디자인을 적용한 프로토타입입니다. 이러한 프로토타입은 개발팀에게 실제 구현을 위한 지침을 제공합니다.
피그마 프로토타입 구성
- 핫스팟 : 사용자의 인터렉션이 시작되는 위치
- 커넥션 : 두 프레임 사이의 애니메이션, 인터렉션을 연결하는 화살표
- 데스티네이션 : 변경된 결과 화면
- Flow starting point : 프로토타입이 연결된 화면의 흐름입니다. 구분하기 쉽도록 이름을 변경할 수도 있고 , 해달 flow만 따로 공유할 수 도 있습니다.
- Interaction : 클릭, 드래그 등의 입력요소를 결정하고 여러 개의 중첩으로 적용합니다.
- Scroll behavior : 가로 스크롤, 세로 스크롤 옵션을 선택
- Show prototype settings : 목업의 디바이스 종류의 배경 색상 등을 선택
① 프로토타입선택
② 인터랙션 : 클릭 드래그 같은 입력요소
③ 트리거 : 클릭, 드래그, 마우스 호버 같은 트리거 종류 선택
액션과 종료 프레임 : 프레임이 어떻게 바뀌거나 나타나고 끝나는지 변경
④ 애니메이션 레이어 움직임
⑤ 애니메이션 미리보기
① 전환유형 선택
② 애니메이션이 나오는 방향
③ 애니메이션의 이징 조정
④ 애니메이션의 지속시간 설정
⑤ 일치하는 레이어를 Smart Animate 할지 여부 결정
⑥ 애니메이션 미리보기
Animation
Instant : 애니메이션 없이 바로 넘어감
Dissolve : 앞 프레임의 투명도가 0%가 되어 넘어감
Smart Animate : 같은 이름의 레이어가 자연스럽게
Move In : Move 애니메이션은 프레임이 연결되어야 함
A, B 프레임이 있을 때 B프레임이 슬라이드처럼 들어옴
Move Out : A, B 프레임이 있을 때 B프레임이 슬라이드처럼 나감
Push : A, B 프레임이 있을 때 B프레임이 밀려나감
Slide In : Move In과 다름점은 A프레임이 아래 있는 것 같지만 A프레임의 투명도가 0%로 변하여 B프레임이 들어옴
Slide Out : B프레임의 투명도가 0%에서 100%로 변하여 A프레임이 나감
Easing
Linear
Ease In
Ease Out
Ease In and Out
Ease In Back
Ease Out Back
Ease In and Out Back
Custom
Smart Animate
이름이 같은 요소가 있다면, 화면을 이동할 때 그 요소의 변화를 자연스럽게 만들어 주는 기능
Smart Animate 가 제대로 작동하려면 반드시 작동하는 요소의 이름이 같아야 하고 프레임의 레이어 구조가 통일되어 있지 않거나, 구조가 다르면 결과가 다르게 나옴
움직일 요소의 이름이 같은지 , 레이어 구조가 동일한지 구분
1) 크기(Scale) : 크기를 다르게 하면 커지게 하거나 작아지게 할 수 있음
2) 위치(Position) : 위치를 다르게 하면 요소를 자연스럽게 이동시킬 수 있음
3) 투명도(Opacity) : 레이어나 색상의 투명도를 다르게 하면 자연스럽게 사라지거나 나타나게 할 수 있음
4) 회전(Rotation) : 요소를 자연스럽게 회전하게 만들 수 있음
5) 배경색(Fill) : 요소의 배경색을 칠하거나 다른 색으로 자연스럽게 변경할 수 있음
효과 확인
Easing | jQuery UI
Easing Apply an easing equation to an animation. All easings provided by jQuery UI are drawn above, using an HTML canvas element. Click a diagram to see the easing in action. view source 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
jqueryui.com
https://api.jqueryui.com/easings/
Easings | jQuery UI API Documentation
Easings Easing functions specify the speed at which an animation progresses at different points within the animation. jQuery core ships with two easings: linear, which progresses at a constant pace throughout the animation, and swing (jQuery core's default
api.jqueryui.com
Trigger
트리거는 프로토타입이 앞으로 나아가게 하는 상호작용
- none : 액션 없이 바로 넘어감
- On click / On Tap : 클릭, 탭( 가장 대표적인 액션 )
- While Hovering : 마우스가 컴포넌트 위에 위치할 때
- While Pressing : 마우스 누르는 동안
- Mouse Enter : 마우스가 영역에 들어가는 순간
- Mouse Leave : 마우스가 영역에서 벗어나는 순간
- Mouse Down / Touch Press : 터치 누르기
- Mouse Up / Touch Release : 터치 해제
- After Delay : 일정시간이 지난 뒤 화면이 넘어감
Action
작업은 사용자가 핫스폿과 상호 작용할 때 발생하는 작업을 정이합니다.
다른 프레임으로 이동하거나 오버레이를 사용하거나 링크를 여는 것을 의미합니다.
Navigate to : 연결한 프레임으로 이동
Change to : 베리언트 내에서 연결했을 때 해당 컴포넌트 변경
Open overlay : 오버레이 열림
Swap overlay : 오버레이 프레임으로 변경
Close overlay : 오버레이 닫기
Back : 맨 처음 프레임으로 이동
Scroll to : 연결한 위치로 스크롤
Open URL : 외부 링크로 연결
Open link : 특정 URL을 여는 액션(피그마 안의 특정 영역이나 프레임으로도 이동)
Conditional : 분기점을 만들어서 조건에 따라 A 또는 B를 실행 (조건분기 기능→ 유료)
Set variable : 변수를 특정 값으로 설정 (트리거를 실행하면 변수를 원하는 값으로 설정 → 유료)
프로토 타입 예시
1. On click - Navigate to
- 프레임 만들기
- 도형의 원으로 원 그리기
- auto layout 설정
- 프레임 복사해서 만들기
- 가운데 원크기와 색 변경
2. On click - Navigate to
- 프레임 만들기
- 도형으로 원 만들기
- 프레임 복사하고 안에 원을 각각 하나씩 크기와 색을 변경하기
- prototype 탭 선택
- 첫 번째 도형 핫스팟 선택 첫 번째 프레임선택 연결할 프레임 선택 - On click - Smart animate 시간 지정하기 1초 1000ms
3. 스크롤 : Scroll behavior
- 프레임 만들기
- 원도형 여러 개 복사
- 도형 선택 후 이미지 넣기 ( 플러그인 사용 )
- 전체 도형 선택 Auto layout
- 보여질크기의 프레임 지정 clip content 선택
- Prototype 탭 선택
- Scroll behavior - Horizontal 선택
4. Open overlay
- 프레임에 버튼 만들기
- 버튼 누르면 띄워질 팝업 만들기
- Prototype 탭 On click - centered ( 프레임 가운데 위치 )
- Close when clicking outside - 외부 클릭 시 닫기
- Add background - 배경 넣기 색상, 투명도 지정
5. Change to : 베리언트
- 라디오 버튼 만들기
- component set 설정
- Prototype탭
- 베리언트에서 Change to
6. On drage
7. After delay - 로딩바 만들기
- 기본 로딩 화면 제작하기
- 첫 번째는 클릭 시 두 번째 프레임으로 이동하기
- 두 번째부터는 지연시간과 로딩효과 시간을 설정하기
8. scroll to
Prototype
- overflow : Horizontal
프로토타입 삭제
응용 1)
1. 사각 도형 3개 만들기
2. 플러그인 이용하여 이미지 또는 컴퓨터 안에 이미지 넣기
3. 오토레이아웃 선택
4. 프레임 등록 ( 이미지 크기만큼 조절 ) : 보이는 영역 - [ CTRL ] + [ ALT ] + [ G ]
4. 컴포넌트 등록
5. 베리언트 추가 ( 2개 )
보이는 영역 기준으로 위치 이동
프로토 타입 설정
3초 후 0.3호의 ease out 효과로 실행
전체화면
Assets에서 가져오기
응용 2 ) 해결
1. 처음 사진과 마지막 사진을 동일 ( 맨뒤에 첫 번째 사진을 복사 추가 )
2. 오토레이아웃 선택 ( 정렬부분 체크 )
3. 프레임 등록 ( 이미지 크기만큼 조절 ) : 보이는 영역 - [ CTRL ] + [ ALT ] + [ G ]
4. 컴포넌트 등록
5. 베리언트 추가 ( 3개 ) - 총 4개
6. 마지막 까지 프로토 타입 설정
3초 후 0.3호의 ease out 효과로 실행
7. 맨끝에서 처음사진 이동시 ( 0.001초 효과 즉시 )
- 처음 사진과 마지막 사진이 동일하게 때문에 아주 빠르게 이동 : 움직임이 보이지 않아요
결과
실습1 )
실습 2 )
1. 컴포넌트 등록 ( 사진 나열 )
2. 인스턴스 3개
3. 이미지 보이는 만큼의 프레임영역 ( 마스크원리 )
4. 3번을 컴포넌트 -> 베리언트 추가 ( 응용할 때는 5개 )
1. 컴포넌트 -> 상단 + 눌러서 베리언트 등록
2. 프로토타입 - After delay 지연시간 3000 효과 300
해결 : 1개 추가
효과 : instant - 처음으로 연결, 지연시간 1ms
만들어보세요
실습 3) 드래그
'figma' 카테고리의 다른 글
| [ figma ] 10. Constraints 콘스트레인트 (0) | 2023.12.25 |
|---|---|
| [ figma ] 08. variants 베리언트 (0) | 2023.12.25 |
| [ figma ] 15. 베리어블 사용하기 (0) | 2023.12.22 |
| [ figma ] 07. 컴포넌트 ( Component ) 개념과 등록 (0) | 2023.07.28 |
| [ figma ] 06. 이미지 누끼 플러그인 Remove BG (0) | 2023.07.27 |