1. 라이브러리 파일과 작업 파일 분리하기
라이브러리 불러오기
Assets 패널의 책모양 아이콘에서 Add to file로 불러오면
Assets 패널에 디자인 라이브러리가 들어옴
아이콘 추가
다른 아이콘을 추가하고 싶으면 해당 라이브러리 파일에 아이콘을 추가하면 작업 파일에 들어왔음을 확인 가능
라이브러리 파일에서 publish를 했기 때문에 영향 받는 디자인 파일(현재 작업 파일)에도 자동으로 들어오게 됨
2. 스플래쉬, 로그인 기본 화면 만들기
스플래쉬
프젝명
- outline stroke
- 유니온
- 프레임으로 묶기
- snap to Pixel grid 해제해서 중앙 맞추기
로그인
로그인 창에 들어갈 텍스트 구상
- 인사
- 회원가입
- 계정
- 소셜로그인
- 이메일 로그인
오토레이아웃 활용
색 지정 - 스플래쉬 색 적용
라이브러리 파일에 도형 그려서 색상코드 적용
색상 라이브러리화하고 시작하면 좋음
3. 약관 동의 화면 만들기
Status bar
- 리소스 파일 불러오기
- 두 개의 컴포넌트 선택하고 Combine as variants로 color 변수 설정
- 라이브러리 파일을 수정하면 꼭 publish 하기
- 만든 Status bar 라이브러리를 불러와 스플래쉬, 로그인, 약관동의 화면에 붙여주기
다크모드
fill 눈 감겨주기
- 약관동의 이유
- 약관동의 항목
- 버튼
글꼴 스타일 라이브러리화
section을 활용해 묶어봅시다
버튼에 체크박스를 추가해봅시다잇
state
라이브러리 파일에서 체크박스 컴포넌트 생성
작업파일의 assets 에서 라이브러리 체크박스 인스턴스 가져오기
swap instance 창에서 등록한 체크박스 설정값 변경 가능
4. 배달 메뉴 상세 페이지 만들기
[1] 컴포넌트화
아이콘 하나하나 컴포넌트화하고 모두 선택해 Combine as variants로 결합한다.
[2] Assets에서 Publish
Publish를 통해 라이브러리화하고 다른 파일에서 가져와 쓸 수 있게 한다.
그러면 유료버전을 쓰라고 한다....
괜..찮아 나는 플러그인이 있어..
Material Symbols에서 가져다 쓰자..
요즘 빠진 모동숲...
너구리가 집 증축하고 싶으면 돈달라고 하는 화면을 만들자.
status-bar는 이 키트의 화면 일부를 가져와 수정했다..
[3] Menu bar
아이콘을 양쪽에 삽입하고 세 개체에 오토 레이아웃을 걸었다.
간격을 Auto로 변경하고 프레임에 맞추면 ~~ 🪄 짜잔 예쁘게 간격이 자동으로 조정된다.
[4] Thumbnail
썸네일 사진 추가
검색 화면 만들기
장바구니 화면 만들기
#피그마 #figma #피그마사용법 #디자인 #UX #UI #메타코드M #메타코드 #그래픽 #정보공유 #디자인추천 #취업준비 #취준생 #오토레이아웃 #프로토타입 #프레임 #메타코드M #메타코드 #피그마사용법 #피그마유료 #피그마다운로드 #피그마자격증 #피그마무료 #피그마강의 #피그마사이트 #피그마다운 #메타코드엠
