실습1 - 네비게이션 바 디자인하기
Material 3 Design Kit
segment의 설정값 적용
- 활성화 되어있는 창
- Label text
- 업데이트 뱃지
등 세그멘트의 여러 속성값을 상황에 맞게 적용 가능
Icon 선택
Icon 목록에서 각 라벨에 적절한 아이콘으로 적용
상황에 맞는 색상 선택
Design 패널의 Layer에서 색상 변경
네비게이션바 Fixed
디바이스 프레임 안에 Navigation bar 인스턴스 집어 넣고 위치 조정
Scroll behavior Position을 Fixed로 고정
스크롤을 해도 네비게이션바는 움직이지 않도록 적용됨
실습2 - 모달 템플릿 디자인하기
모달을 디자인할 때 어떤 점을 유의해야 하는지,
라이브러리를 활용해서 디자인할 때 모달에서는 어떤 값들을 유념해야 하는지
북마크를 눌렀을 때 올라오는 bar
Assets 에서 불러오기 - Bottom sheet
컬러도 변경해 보자.
Fixed로 고정해서 스크롤해도 고정이 되어 있도록 설정
작업하기 편하게 SCROLLS에 위치해 있는 뒤쪽 레이어들을 레이어 패널에서 잠금 처리
Assets 에서 불러오기 - Lists
레이어 패널에서 SCROLLS에 있는 List를 FIXED로 옮겨주고 인스턴스 설정값 변경 (색상, 아이콘 등)
🖥️ 강의를 듣고 혼자 실습한 화면 !
실습하면서 Fixed를 어디서 적용하는지 한참 찾았는데 Prototype 패널에서 확인할 수 있었다 ...⭐
Material 3 Design Kit을 Assets에서 불러와야하는데 ... 무료버전이라 공유가 되지 않는 건지.. 내가 뭔가 좀 잘못한건지 모르겠는데 Material 프로젝트에서 publish를 누르면 결제창이 떴음..
어헝ㅇ헝 무료버전의 서러움.. 내가 무료버전이라 안 되는 건지 옮기는 과정에서 실수한 건지 헷갈렸음 ㅠㅠㅠㅜ
그래서 그냥 복붙으로 적용하면서 사용했음 ^0^0^꼭 유료결제를.....할...거...다...
#피그마 #figma #피그마사용법 #디자인 #UX #UI #메타코드M #메타코드 #그래픽 #정보공유 #디자인추천 #취업준비 #취준생 #오토레이아웃 #프로토타입 #프레임 #메타코드M #메타코드 #피그마사용법 #피그마유료 #피그마다운로드 #피그마자격증 #피그마무료 #피그마강의 #피그마사이트 #피그마다운 #메타코드엠
