[Figma] 피그마활용2-3

01. 프로토타입의 개념

1. 프로토타입의 뜻

• 프로토타입(Proto-type)의 원래 뜻은 시제품
• 디지털 제품에선 실제 제품을 만들지 않고 아이디어를 테스트해볼 수 있는 것
• 구현하는 정도에 따라 낮은 단계와 높은 단계로 나눌 수 있음
• 프로토타입을 만들거나 또는 프로토타입을 사용해 테스트하는 것을 프로토타이핑이라고 함

2. 프로토타입을 만드는 이유

1) 실제 제품을 만들지 않고 아이디어를 검증해 볼 수 있음

2) 팀 구성원들과 시각적인 결과물로 소통할 수 있음

3) 부족하거나 놓친 부분을 확인할 수 있음

02. 피그마 프로토타입 소개

1. 피그마 프로토타입

피그마에서 디자인한 화면들을 바로 실제 작동하는 형태로 테스트해 볼 수 있는 유용한 기능

 📌 프로토타이핑 툴

프로토타입은 피그마 고유의 기능이 아님

프로토파이, 프레이머도 있고, 또 인비전, 마블 .. 프로토타이핑에 특화된 툴

우리가 사용하는 피그마 역시 프로토타입을 만들 수 있는 여러 툴 중 하나

💡피그마 프로토타입의 장단점

장점

1) 직관적 : 화면을 선으로 잇기만 하면 프로토타입을 만들 수 있음

2) 빠르게 만들 수 있음 : 제품이나 기능을 빠르게 테스트할 수 있음

단점

1) 실제 제품처럼 동작하는 걸 만들기 어려움 : 피그마 기능이 제한적이기 때문에 실제 제품과 흡사하게 움직이는 건 만들기 어려움

2) 효율성을 떨어뜨림 : 기능이 제한적이라 정교한 프로토타입을 만드는 시간이 오래 걸리며 복잡해질 수록 빠르게 수정하거나 만드는 게 어려움

2. 피그마 프로토타입의 구성

피그마 프로토타입은 3가지 구성요소

1️⃣ 핫스팟(Hot Spot) : 프로토타입을 시작하는 지점

- 핫스팟을 누른 채 종착점에 끌어다 놓으면 선으로 연결됨

- 핫스팟은 상하좌우 모서리 각 중앙 지점에서 끌어올 수 있음

2️⃣ 커넥션(Connection) : 화면을 서로 이어주는 연결선

- 핫스팟에서 종착점으로 방향이 정해짐

3️⃣ 종착점(Destination) : 도착하는 지점

- 핫스팟과 커넥션으로 이어져 있음

- 종착점에서 핫스팟을 끌어 다른 화면과 이을 수 있음

03. 프로토타입 둘러보기

1. 사전 설정하기 

1️⃣ 디바이스

어떤 기기 기준으로 프로토타입을 재생할 지 선택할 수 있음

아무것도 선택하지 않으면(None) 프레임 크기와 피그마 화면 크기에 따라 달라짐

2️⃣ 배경색

프로토타입 기기 바깥의 배경색을 무엇으로 할지 정할 수 있음

2. 피그마 프로토타입 모드

1️⃣ 프리뷰 모드 Preview Mode 

- 디자인하는 중간에 작업 중인 화면과 흐름을 빠르게 확인하고 논의할 때 사용

- 프로토타입 모드가 아니라 디자인 중에도 바로 실행해볼 수 있음

2️⃣ 프레젠테이션 모드 Presentation Mode 

- 프로토타입을 공유할 때 사용하거나 프레젠테이션 형태로 만들 수 있음

3. 프로토타입 실행법

1) 프리뷰 모드 실행하기

1. 확인하고 싶은 프레임이나 시나리오의 시작 프레임을 선택

2. shift + space 를 누르면 프리뷰 화면 열림 (끌 때도 shift + space)

2) 프레젠테이션 모드 실행하기

1. 확인하고 싶은 프레임이나 시나리오의 시작 프레임을 선택

2. 툴바 오른쪽 끝의 재생 아이콘 클릭

3. 새로운 탭에서 프레젠테이션이 열림

4. 피그마 미러 사용하기

💡스마트폰에 피그마 앱을 설치하면 내가 만든 화면을 스마트폰에서 실시간으로 볼 수 있음

https://www.figma.com/downloads/

Figma Downloads | Web Design App for Desktops & Mobile

1) 로그인 후, 앱 하단 메뉴에서 가장 오른쪽에 있는 Mirror 탭 클릭

2) 피그마에서 재생하고 싶은 프레임을 선택

3) 앱 미러 화면에서 Begin mirroring 클릭

(두 손가락으로 화면 길게 누르면 다시재생 or 종료)

04. 트리거와 액션

1. 플로우의 구성요소

1) 프로토타입의 흐름 하나하나는 플로우라고 부름

📌 핫스팟을 드래그해 종착점과 이으면 커넥션이 만들어지고, 자동으로 플로우 패널이 열림

파란선 하나하나가 하나의 플로우

2) 플로우는 트리거와 애니메이션, 액션으로 구성

1. 트리거 Trigger

- 액션을 시작하는 조건이나 이유, 계기

- 트리거는 ‘총의 방아쇠’ 라는 뜻

- 사건이 발생했다는 뜻에서 이벤트라고 부를 수 있음

2. 액션 Action

- 트리거로 인해 만들어지는 결과

3. 애니메이션 Animation

- 트리거를 통해 액션을 실행할 때, 어떻게 실행할 건지를 뜻함

- 즉, 인터랙션 형태를 정하게 됨

⭐️프로토타입을 설계할 땐 ‘~하면, ~하게 ~한다’ 라는 문장으로 기억하면 조금 더 쉬움

예) 버튼을 누르면(트리거), 색상이 천천히(애니메이션) 바뀐다(액션)

2. 트리거의 종류

• 트리거는 프로토타입의 플로우를 실행하는 조건
• 어떤 **이벤트(사건)**가 발생하면 실행할 건지를 설정

📌 피그마 프로토타입 트리거는 현재 10가지

1) On click : 클릭 또는 탭/터치했을 때 액션을 실행

2) On drag : 드래그했을 때 액션을 실행

3) While hovering : 커서/마우스가 영역 위에 올라가 있는 동안 계속 액션을 실행

- Mouse enter와 Mouse leave를 계속 반복하는 것과 같은 효과

4) While pressing : 커서/마우스로 영역을 누르고 있는 동안 계속 액션을 실행

- Mouse down와 Mouse up를 계속 반복하는 것과 같은 효과

5) Key/Gamepad : 특정 키를 눌렀을 때 액션을 실행

6) Mouse enter : 커서/마우스가 영역 위에 올라가면 액션을 실행

7) Mouse leave : 커서/마우스가 영역을 벗어나면 액션을 실행

8) Mouse down : 커서/마우스가 영역을 누르면 액션을 실행

9) Mouse up : 커서/마우스가 영역을 눌렀다 떼면 액션을 실행

10) After delay : 일정 시간이 지난 후에 액션을 실행

- 1초 = 1000ms

3. 액션의 종류

• 액션은 프로토타입의 플로우의 목적지이자 트리거로 인해 만들어지는 결과
• 어떤 이벤트가 발생하면 어떻게 되는지를 ****설정

📌 피그마 프로토타입 액션은 현재 10가지

1) Navigate to : 페이지(프레임)를 이동하는 액션

2) Change to : 컴포넌트의 다른 배리언츠로 변경하는 액션

- 트리거가 컴포넌트에 적용되어 있을 때만 사용할 수 있음

3) Back : 직전 화면으로 이동하는 액션

- 뒤로가기 버튼에 적용하면 언제든지 이전 화면으로 이동할 수 있음

4) Set variable : 변수를 특정 값으로 설정하는 액션

💡 변수 기능은 피그마 유료 계정부터 사용할 수 있음

- 트리거를 실행하면 변수를 원하는 값으로 설정할 수 있음

5) Conditional : 분기점을 만들어서 조건에 따라 A 또는 B를 실행하는 액션

💡 조건분기 기능은 피그마 유료 계정부터 사용할 수 있음

6) Scroll to : 현재 프레임의 특정 지점까지 스크롤해서 이동하는 액션

7) Open link : 특정 URL을 여는 액션

💡 피그마 안의 특정 영역이나 프레임으로도 이동할 수 있음

8) Open overlay : 현재 프로토타입 화면에 라이트박스와 프레임을 보여주는 액션

- 다이얼로그나 바텀시트를 프로토타입에서 보여줄 때 자주 사용

9) Swap overlay : 라이트박스를 유지한 채 다른 프레임으로 교체하는 액션

10) Close overlay : 라이트박스을 닫는 액션

4. 프로토타입 만들기

1) 화면 연결하기 

1. 프로토타입 모드로

2. 메인 화면 선택

3. 프레임의 모서리에 커서 올리고, 핫스팟을 드래그해 상세 화면에 놓기

4. 프로토타입 설정 패널에서 트리거를 On tab으로 변경

5. 프로토타입 설정 패널에서 액션을 Navigate to로 변경

2) 특정 영역 연결하기 

1. 메인 화면을 선택

2. Carousel_main 안의 Slide_avatar라는 프레임을 찾아 선택

3. 프레임의 핫스팟을 드래그해 상세 화면에 놓기

4. 트리거와 액션을 각각 On tab, Navigate to로 변경

5. 상세 화면에 있는 X 아이콘을 선택

6. 오른쪽 인터랙션 패널에 있는 + 아이콘을 눌러 프로토타입을 만들기

7. 트리거와 액션을 각각 On tab, Back으로 변경

3) 프로토타입 테스트하기 

1. 메인 화면을 선택하고, shift + space2. 화면 상단의 메인 배너 부분에 있는 아바타 영화 이미지 클릭3. 영화 상세 화면으로 이동하는지 확인4. 영화 상세 화면의 X를 눌러 메인 화면으로 다시 돌아오는지 확인

5. 컴포넌트 상태 변경하기

컴포넌트 자체에 프로토타입 연결하기 => 매번 프로토타입 걸 필요X, 효율적으로 사용 가능

- 프로토타입 기능은 디자인을 연결해서 테스트할 때 사용하는 것이 일반적

- 버튼을 눌렀을 때 버튼의 상태가 변하는 인터랙션도 만들 수 있는데, 매번 디자인할 때마다 인터랙션을 만들기엔 비효율적

- 이때 디자인 시스템 안에 있는 컴포넌트 자체에 트리거와 액션을 활용해 상태 변화를 적용하면 더 효율적으로 디자인할 수 있음

디자인 시스템 파일에 적용하기 

1) 디자인 시스템 파일을 열기

2) 프라이머리, 라지, 디폴트 버튼을 선택

3) 프로토타입 모드로 변경

4) 버튼의 핫스팟을 드래그해 프라이머리, 라지, 프레스드 버튼에 연결

5) 트리거를 While pressing, 액션을 Change to로 변경

6) 빈 프레임에 버튼 인스턴스를 넣고, 프리뷰를 실행해 확인

05. 애니메이션

1. 프로토타입 애니메이션

- 트리거는 시작하는 조건을 뜻하고, 액션은 실행하는 내용

- 애니메이션은 액션을 어떻게 실행할지를 결정

ex) 버튼을 누르면, 다음 화면으로 넘어 간다. → 버튼을 누르면, 천천히 오른쪽에서 왼쪽으로 화면이 밀려 들어온다.

- 또한 화면의 전환을 어떻게 처리할 건지도 정할 수 있음

2. 피그마 애니메이션 종류

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

2) Dissolve : 천천히 흐릿해지면서 화면을 전환 (페이드인/아웃)

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

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

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

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

3. 스마트 애니메이트

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

- 스마트 애니메이트가 제대로 작동하려면 반드시 작동하는 요소의 이름이 같아야 함

- 또한 프레임의 레이어 구조가 통일되어 있지 않거나, 구조가 다르면 정상적으로 작동하지 않음

- 만약 제대로 움직이지 않는다면 반드시 이 2가지를 확인 !! 

1) 움직일 요소의 이름이 같은지

2) 레이어 구조가 동일한지 

- 피그마 프로토타입에서 가장 중요한 애니메이션 기능

- 이름이 같은 요소가 있다면, 화면을 이동할 때 그 요소의 변화를 자연스럽게 만들어 주는 기능

- 스마트 애니메이트의 원리를 응용하면 다양한 UI 인터랙션을 구현

3-1. 스마트 애니메이트로 조작할 수 있는 속성

1) 크기(Scale)

크기를 다르게 하면 커지게 하거나 작아지게 할 수 있음

출처 : 피그마

2) 위치(Position)

위치를 다르게 하면 요소를 자연스럽게 이동시킬 수 있음

출처 : 피그마

3) 투명도(Opacity)

레이어나 색상의 투명도를 다르게 하면 자연스럽게 사라지거나 나타나게 할 수 있음

출처 : 피그마

4) 회전(Rotation)

요소를 자연스럽게 회전하게 만들 수 있음

출처 : 피그마

5) 배경색(Fill)

요소의 배경색을 칠하거나 다른 색으로 자연스럽게 변경할 수 있음

출처 : 피그마

4. 스마트 애니메이트 활용하기

1) 자연스럽게 상세페이지 이동하기

- 스마트 애니메이트 사용시 같은 구조, 같은 이름이어야 작동

2) 메뉴 이동 애니메이션 만들기

3) 리스트 삭제하기

📌 이징커브

• Linear : 일정한 속도(기본속도)로 움직임
• Ease in : 천천히 시작-속도가 점점 빨라짐
• Ease out : 빠르게 시작-속도가 점점 느려짐
• Ease in and out : 천천히 시작-중간에는 빨라지고-다시 느려짐
• Ease in back : 애니메이션이 초기 키프레임의 값을 지나서 끝 부분에 도달할 때 가속
• Ease out back : 애니메이션이 빠르게 시작되어 느려지다가 종료 키프레임의 값을 지나감
• Ease in and out back : 천천히 시작하여 초기 키프레임의 값을 지나면 빨라짐, 다시 느려지며 종료 키프레임 값을 지나감
• Custom bezier : 목록에서 커스텀 옵션을 선택하여 수동으로 설정하고 조정
• Gentle : 부드럽게 지나감
• Quick : 빠르게 지나감
• Bouncy : 튕귐 효과
• Slow : 느리게 지나감
• Custom Spring : 수동으로 애니메이션 곡선 설정 가능

06. 프로토타입 응용하기 

1. 스크롤 컨테이너 만들기

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

- 스크롤은 스크롤할 내용과 스크롤을 구현할 컨테이너로 이루어짐

- 컨테이너보다 내용이 더 길어야 컨테이너에 스크롤을 적용

1) 스크롤 방식(Scroll Behavior)

1. No scrolling : 스크롤하지 않음. 기본값
2. Horizontal : 가로 방향으로 스크롤할 수 있음
3. Vertical : 세로 방향으로 스크롤할 수 있음
4. Both directions : 가로 및 세로 방향으로 모두 스크롤할 수 있음

2) 스크롤 컨테이너 만들기 

1. 메인 화면을 선택

2. 메인 화면 안에 있는 Body의 높이를 확인

3. 메인 화면을 선택하고, 프로토타입 모드로 변경

4. 스크롤 방식을 세로(Vertical)을 선택

5. 프리뷰를 실행해서 위아래로 스크롤해보기

2. 포지션 이해하기

 Position!

- 앱과 웹사이트에 있는 모든 요소들은 스크롤하게 되면 스크롤을 따라 같이 움직임

- 하지만 웹사이트의 헤더나, 앱의 버튼처럼 위치가 고정된 요소들이 있음

- 이렇게 요소들을 고정할 때, 포지션을 조정해서 만듦

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

1) Static(스태틱)

대부분의 요소들이 가지고 있는 포지션

기본값이자 스크롤을 따라 같이 움직임

2) Fixed(픽스드)

화면이 바뀌거나 스크롤하더라도 항상 고정된 위치에 있음

웹사이트의 헤더나 앱 하단의 버튼 등이 Fixed Positio

3) Absolute(앱솔루트)

Fixed와 유사하지만, 고정되는 기준이 컨테이너 안이라는 점이 다름

즉, Fixed는 화면 전체를 기준으로 하고, Absolute는 본인이 담겨 있는 컨테이너를 기준으로 함

4) Sticky(스티키)

스크롤에 따라서 기본값과 Fixed를 전환하는 포지션

스크롤을 따라 움직이다가, 특정 위치부터는 상단에 고정되는 것을 뜻함

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

1) Static, Fixed, Sticky

- 프로토타입 패널에서 설정

2) Absolute

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

포지션 실습하기 

1) 375 * 812 프레임을 하나 만들고, 이름을 main으로 변경

2) Body 프레임을 복사해서 main 안에 넣고, 맨 위 가운데로 정렬

3) Header 프레임을 복사해서 main 안에 넣고 맨 위 가운데로 정렬

4) Tab 프레임을 복사해서 main 안에 넣고, 탭 위치에 맞춤

5) Fixed 프레임을 복사해서 main 안에 넣고, 맨 아래 가운데로 정렬

6) Header, Tab의 포지션을 Sticky로 변경

7) Fixed의 포지션을 Fixed로 변경

8) main의 스크롤 방식을 Vertical로 설정

9) main을 선택하고 프리뷰를 실행해 Header, Tab, Fixed가 어떻게 움직이는지 확인

3. 오버레이 만들기 

- 오버레이는 다이얼로그 등을 사용할 때 같이 쓰는 라이트박스와 같은 개념

- 피그마 오버레이 안에는 라이트박스의 개념이 포함

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

다이얼로그 오버레이 띄우기

1) 로그인 화면의 로그인 버튼을 선택

2) 로그인 버튼의 핫스팟을 다이얼로그에 연결

3) 액션을 Open overlay로 변경

4) 오버레이 세팅에서 다음과 같이 설정

5) 로그인 화면에서 프리뷰를 실행하고, 로그인 버튼을 눌러 다이얼로그를 테스트