파일 페이지 레이아웃

---

파일이 만들어지는 과정

• 파일이 가장 작은 단위
• 그 파일들이 속해있는 프로젝트
• 그 프로젝트를 소유하는 팀

팀이 프로젝트를 만들면 그 프로젝트에 대한 파일들을 생성하게 된다. 그렇게 파일이 탄생 자잔,,

파일 구성요소

파일은 페이지로 구성되어 있으며, 페이지는 레이어로 구성되어 있다.

작업 환경에서 확인해 보면
Page는 Pages로 묶여있고,
layer는 layer를 포함하는 Page의 이름으로 묶여있는 것을 확인할 수 있다.

파일 불러오기

---

1. Drafts에서 불러오기

파일 이름의 오른쪽 마우스 - Move to project.. 를 통해 원하는 프로젝트 위치로 옮길 수 있다.

2. 로컬에서 불러오기 import

Import 버튼을 눌러 From your computer를 클릭하면 로컬에서 파일을 불러올 수 있다.

나도 유료로 바꿀거ㅑ야...

나는 무료버전이라 파일이 3개인 상태에서 파일을 불러오려고 하니 실패했다.
그러면 그냥 안 쓰는 파일 정리하거나 다른 파일에 옮기고 불러오면 된다 ~>~

권한 및 모드별 화면

---

권한별

• 뷰어: 편집 도구 보이지 않음 ➡️ Ask to edit 버튼을 통해 편집 요청을 할 수 있음(추가 요금)

• Assets: 화면을 만들 때 사용했던 구성요소가 모인 탭, 뷰어는 볼 수 없음
  

  위: 편집 권한 화면
  아래: 뷰어 권한 화면

모드별

• 디자인 모드 화면 설계 및 비주얼 편집 특화
• 개발 모드 설계된 화면의 코드 확인에 특화 ➡️ 데모버전이라 언제 유료화...될지 모름 ㅜㅜ
• 저 위에 토글 탭으로 모드를 변경할 수 있음
  

  개발자 모드 시작 전 선택사항

  • Platform ➡️ CSS iOS Android More..
  • Unit ➡️ px rem
  • 테마 변경 가능(다크, 라이트)
  • 다른 툴들과 호환이 가능

개발자 모드 개꿀 기능

개발자 모드에서 알고 싶은 요소를 클릭하면 그림처럼 간격이 어느 정도 되는지 확인할 수 있고
디자이너가 의도한 대로 개발이 가능하다 ! 와 너무 좋다..,,

이렇게 Inspect에서 css layout 값을 알 수 있다.
약간 웹사이트의 개발자도구랑 비슷한 역할을 하는 것 같다.

---

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

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