피그마	프로토파이
장점	하나의 툴만 결제해도 화면 디자인 + 애니메이션 프로토타입까지 가능함	섬세한 애니메이션에 코드까지 제공
단점	애니메이션 구현이 조금 제한됨	프로토파이 추가 개별 구매

🖥️ 앱 초기 화면 전환 구현

1. 프로토타입 패널 선택
2. 마우스 드래그로 이어주기

• 애니메이션 설정창 뜨면 After delay로 변경
  

• After delay, Open overlay로 지정
  

• 요기서 애니메이션 미리보기가 가능하다.
  

• instant로 변경했을 때
  

프로토타입 패널에서 Device 설정값 변경으로 디바이스별로 확인해 볼 수 있다.

💁🏻 약관 동의 모달 구현

---

동의하기를 누르면 모달이 올라오게 구현

1. 동의하기와 모달을 연결
2. On click, Open overlay
3. Dissolve, Bottom center
   

• 50%로 조금 진하게 변경하면
  

이렇게 좀 더 진하게 구별 가능

확인 완료 버튼을 누르면 약관동의 창으로 돌아가도록 구현

1. On tap, Navigate to
2. Move out, 방향 설정
   

📜 상세페이지 스크롤 구현

---

컨텐츠만 움직이는지 확인 ➡️ Fixed가 잘 적용 되었는지 확인

지금은 이렇게 썸네일이 바깥으로 튀는 것을 볼 수 있음

Prototype 패널에서

1. On Drag, 이동None,
2. 상위 레이어 따르기Scroll with parent,
3. 방향 Horizontal
   

4. 레이어 크기를 화면에 맞게 조정
   

🧺 장바구니 담기 모션 구현

---

스스로 해 보기

---

>> 메타코드 바로가기 링크

#피그마 #figma #피그마사용법 #디자인 #UX #UI #메타코드M #메타코드 #그래픽 #정보공유 #디자인추천 #취업준비 #취준생 #오토레이아웃 #프로토타입 #프레임 #메타코드M #메타코드 #피그마사용법 #피그마유료 #피그마다운로드 #피그마자격증 #피그마무료 #피그마강의 #피그마사이트 #피그마다운 #메타코드엠