TIL 23.02.15

오늘은 UI,UX에 대해서 공부를 하며 Figma의 사용법을 익히고,
High Fidelity 프로토타입 예제를 만들어보았다.

초기에 주어진 와이어프레임은 아래와 같다

와이어프레임만 구성된 상황에서, 실제 서비스에서 구현되는 듯하게,
UI를 구현하며 인터렉션도 구현해 보려고 한다.

헤더 생성 및 인터렉션 생성

우선 헤더를 실제 서비스에서 제공하는 것 처럼 제작한 뒤, 컴포넌트로 바꾸어준다.
그 후 동그란 프로필 창에 클릭하면, 프레임이 나타나게 인터렉션을 추가해준다.

이제 이 컴포넌트를 구현하고자 하는 위치에 (shirt+option)을 이용하여 인스턴스로 생성한 뒤,
메뉴 창을 누르면 오버레이를 켜고, 끌수 있는 인터렉션을 추가해준다.

좌우 스크롤 기능

우선 보여주고 싶은 사진들을 하나의 프레임으로 생성한뒤, 사진의 개수 만큼 프레임을 복사한다.
그 후 프레임마다 보여줄 사진들을 선택하여 프레임크기를 조정한다.
하나의 사진만 보여주는 프레임들을 모두 선택하여, 컴포넌트 set를 생성한다.

그 후, 시간에 따라 전환되게 인터렉션을 준 뒤, 인스턴스를 생성하여 원하는 곳에 위치시킨다.

호버 기능 및 오토 레이아웃

우선 보여주고자 하는 컴포넌트를 생성하고, property를 추가해준다.

그 후 컴포넌트의 인스턴스를 생성해주고, hover시 propery로 전환되게 인터렉션을 추가해준다.
컴포넌트가 여러개 일 경우, 모두 선택한 뒤 오토 레이아웃을 주어, 프레임으로 만들어준다.
컴포넌트 각각에도 오토 레이아웃을 주어 margin을 설정해준 뒤,
보여주고자 하는 화면크기에 맞추어 프레임을 조정해준다.
그 후 스크롤 효과를 가로로 준 뒤, 원하는 곳으로 이동시켜 위치해준다.

Figma툴에 익숙하지 않아서 생각보다 시간이 오래걸렸는데,
프로젝트를 진행할 때, 이렇게 먼저 예시를 만들고 진행하면 개발할 때 따라 만들면 되니
훨씬 수월할 것 같다고 생각이 들었다.
조금 더 공부해보면서 프로젝트 시에도 적용시켜봐야겠다.