ⓅⒶⓇⓉ ⑨ 3주차 학습일지 세번째 | UIUX 디자인 툴 (Figma) | Chapter 7-8 정리 및 예제

 

📋 오늘의 할 일 📋

💻 UIUX 디자인 툴 (Figma) | Chapter 7

💻 UIUX 디자인 툴 (Figma) | Chapter 8

 

 

---

 

 

💻 UIUX 디자인 툴 (Figma) | Chapter 7

 

⚡️프로토타입?

∗ 디자인한 요소와 화면 간의 상호작용을 시뮬레이션하고, 이를 시각화하는 기능이다.

∗ 편집하는 디자인 탭이 아니라, 프로토타입 탭에서 설정해준다.

∗ 어떤 기기를 기준으로 보여줄 것인지도 세팅할 수 있다.

 

⚡️베리언트?

∗ 컴포넌트에게 Property를 추가해서 어떤 상태일 때 어떤 오브젝트를 사용할 것인지 컴포넌트 하나로 관리하기 수월하다. 베리에이션의 개념.

∗ 보통 hover, abled&disabled 등 여러 상태를 나타낼 때 사용하기도 하며, 크기별로 property를 추가하기도 한다.

 

⚡️옵션?

❶ Trigger

∗ 인터랙션이 이루어지기 위한 행동을 설정하는 옵션이다.

∗ 인터랙션의 종류는 10가지로 이루어져 있다.

⌦ On tap : 모바일의 탭. pc에서는 클릭.

⌦ On drag : 모바일의 슬라이드. pc에서는 드래그.

⌦ While hovering : 마우스를 해당 오브젝트에서 올리고 있는 동안. 모바일에서는 hover 기능이 없다.

⌦ While pressing : 마우스를 해당 오브젝트에서 누르고 있는 동안. 모바일에서는 press 기능이 없다.

⌦ Key/Gamepad : 키보드 혹은 패드의 특정키를 누르면 작동.

⌦ Mouse enter : 마우스를 해당 오브젝트에 올려두는 순간. 모바일에서는 mouse enter 기능이 없다.

⌦ Mouse leave : 마우스를 해당 오브젝트에서 벗어나는 순간. 동일하게 모바일에서는 mouse leave 기능이 없다.

⌦ Touch down : 마우스를 클릭하거나, 모바일 기기에서 화면에 손가락이 닿을 때 액션을 실행.

⌦ Touch up : 마우스에서 손을 떼거나, 모바일 기기에서 손가락이 떨어질 때 액션을 실행.

 

❷ Delay 

∗ 지정된 트리거를 시작하는 데에 걸리는 시간. 

∗ 보통 0.3s, 300ms 처럼 짧은 시간으로 설정한다.

 

❸ Action

∗ 트리거 실행 시, 어떻게 행동할 것인지를 설정하는 옵션이다.

∗ 때로는 트리거 종류에 따라 활성화 되지 않는 action이 있다.

⌦ Navigate to : 지정한 화면으로 이동.

⌦ Change to : 컴포넌트를 사용해 프로퍼티를 생성 후, 해당 컴포넌트 세트 내에서 전환 가능.

⌦ Back : 바로 이전 화면으로 돌아갈 때 사용.

⌦ Scroll to : 스크롤 시 이동. 이 때, offset값으로 높이나 가로를 조절할 수 있다.

⌦ Open link : 이동할 링크를 설정, 해당 링크로 이동.

⌦ Open overlay / Swap overlay / Close overlay : 오버레이 종류. 각 오버레이의 특성에 따라 어떤 효과로 화면 전환이 이루어질지 차이가 있음.

⌦ Set variable / Set variable mode / Check if/else : 변수 관련. 원하는 변수를 지정해 전환할 수 있도록 함.

 

❹ Destination 

∗ 시작한 화면에서 어떤 화면으로 이동될 것인지, 종착지를 지정하는 옵션.

 

❺ Animation

∗ 전환 시 효과. 설정에 따라 즉시 전환하거나, 슬라이드처럼 움직여 들어오는 효과 등. 여러 효과를 설정할 수 있음.

 

∗ 추가로, 각 옵션에 따라 활성화 혹은 비활성화 되는 옵션들이 있는데 아래와 같다.

⌦ Position : 부여된 action을 어떤 방향으로 전환시킬 것인지. 화면 이동 시에 지정한 방향에 따라 전환된다.

⌦ Curve : 동작 타이밍 설정. 어떤 타이밍 함수를 부여해서 animation을 매끄럽게 할 것인지.

⌦ Duration : 전환 시에 얼마만큼의 지속 시간을 부여할 것인지.

---

📼 예시

On tap - Instant

Component set을 이용해 hover, pressed 및 화면 전환

 

On drag를 이용한 캐러셀

Scroll behavior

 

Background 및 Position Manual을 이용한 모달

 

Open overlay. Close overlay 를 이용한 drawer

 

Position Fixed를 이용한 지도 화면

 

 

 

 

---

 

 

 

 

💻 UIUX 디자인 툴 (Figma) | Chapter 8

 

⚡️디자인 시스템?

∗ 다양한 페이지의 일관성을 만들고 반복되는 작업을 줄임으로써 규모에 맞게 디자인을 관리하기 위한 표준 집합.

∗ 브랜드 정체성과 언어, 패턴, 개발 요소 등 여러가지를 포함한 표준 규칙.

∗ 이는 이해관계자들의 소통에 효율적이다.

 

⚡️스타일 가이드, 패턴 라이브러리, 시스템 가이드?

❶ 스타일 가이드

∗ 일련의 디자인 원칙을 정리한 문서

∗ 전반적인 방향성을 알려준다.

∗ Color, Typography, Icon, Shape, Component 로 이루어져있다.

 

❷ 패턴 라이브러리

∗ 일관성 있는 명칭 및 규칙을 지정한다.

∗ Title, Usage and Principle, Variations 로 이루어져있다.

 

❸ 패턴 라이브러리

∗ 디자인의 목적에 따라 디자인 시스템을 운영하고 관리하는 가이드.

∗ Goal, People, Share로 구성되어있다.