오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서
피그마 프로그램의 스크롤/장바구닝 담기 구현에 대해서 알아보겠습니다.
피그마 - 스크롤 구현
디자인할 때 화면이 길어져서 스크롤 애니메이션이 필요한 경우가 있는데
파일에서 고정되어 움직이지 않아야 하는 개체들만 빼고
중간의 컨텐츠들만 스크롤로 움직이도록 구현해보겠습니다.
(제공되는 fig파일이 있는데 혹시 없으신 분은 기존의 파일을 길게 만들면 될 것 같습니다)
Fixed 된 부분을 확인해보면 스테이터스바, 앱 바,하단의 버튼 입니다.
프레젠트를 해보면 Fixed 된 부분은 움직이지 않고
중간의 컨텐츠만 움지이는 것을 알 수 있습니다.
유사한 상품 내역의 썸네일들이 무작위로 움직이는 것을 알 수 있습니다.
너비 값에 딱 맞춰서 스크롤하기 위해서는 썸네일 레이어를 선택한 후
프로토타입 패널에 Interactions에서 Drag를 선택하고 None을 선택하고
Scroll behavior에서 Scroll with parent와 Horizonal을 선택합니다.
Horizonal에 느낌표가 뜨는 경우에는 오류가 있다는 뜻인데
썸네일 레이어를 선택하고 영역을 줄여서 프레임에 딱 맞게 맞춥니다.
그리고 프로토타입을 수행하면 프레임이 어긋나는 것 없이 오른쪽으로 이동됩니다.
상단의 큰 썸네일에는 다른 썸네일이 3가지 들어가있는데
영역에 맞게 줄이고 프로토타입 설정을 하게 되면
프리젠트 실행하면 드래그하면 사진이 이동하게 됩니다.
피그마 - 장바구니 담기 모션 구현
동일하게 제공되는 fig파일을 통해 알아보겠습니다.
중간에 장바구니에 담겼다는 스낵바가 나오도록 만들어 보겠습니다.
'장바구니에 상품이 잘 담겼어요'라는 텍스트를 생성하고 오토 레이아웃 설정합니다.
복붙하고 다중 선택하여 오토 레이아웃 설정합니다.
우측의 텍스트를 '확인하기'로 변경하고 배경색과 글자색을 변경하고 라운드화 합니다.
좌측의 장바구니 버튼에서 드래그하여 스낵바로 연결합니다.
On click에 Open overlay를 선택하고
Move in을 선택하고 방향은 위,속도는 600ms로 설정합니다.
Manual로 변경하고 체크박스 2개를 다 선택하고 완료합니다.
스낵바에서 장바구니 화면으로 드래그하여 연결합니다.
On click으로 선택하고 크게 바꾸는 것 없이 완료합니다.
다시 장바구니 화면에서 메뉴 상세 화면으로 넘어가야하기 때문에
장바구니 화면의 뒤로 가기 버튼을 드래그하여 메뉴 상세 화면과 연결합니다.
프리젠트를 수행하면 장바구니 버튼을 누르면
장바구니에 담겼다는 스낵바가 나오고 확인하기 버튼을 누르면
장바구니 화면으로 넘어가고 뒤로가기 버튼을 누르면
다시 메뉴 상세 화면으로 돌아오게 됩니다.
오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서
피그마 프로그램의 스크롤/장바구닝 담기 구현에 대해서 알아보았습니다.
지금까지의 내용은 강의를 통해
보실 수 있습니다
https://mcode.co.kr/
메타코드M
빅데이터 , AI 강의 플랫폼 & IT 현직자 모임 플랫폼ㅣ메타코드 커뮤니티 일원이 되시기 바랍니다.
mcode.co.kr
- 메타코드M 사이트에서는 취업특강 신청도 가능하고, 다양한 강의가 무료/유료로 제공되고 있으니 이용하기 바랍니다😄
'Figma > METACODE_Figma' 카테고리의 다른 글
| Figma[피그마] 피그마 입문 A to Z 부트캠프 메타코드_히스토리 관리, 커뮤니케이션 (0) | 2024.02.20 |
|---|---|
| Figma[피그마] 피그마 입문 A to Z 부트캠프 메타코드_에니메이션 프로토타이핑 툴/수행 (0) | 2024.02.19 |
| Figma[피그마] 피그마 입문 A to Z 부트캠프 메타코드_검색 화면,장바구니 화면 구성 (0) | 2024.02.19 |
| Figma[피그마] 피그마 입문 A to Z 부트캠프 메타코드_약관 동의 화면,메뉴 화면 구성 (1) | 2024.02.19 |
| Figma[피그마] 피그마 입문 A to Z 부트캠프 메타코드_작업파일 구분,스플래쉬,로그인 화면 (1) | 2024.02.18 |