1. 스타일 / 라이브러리 -> 텍스트 스타일/컬러스타일/effect 스타일/grid 스타일
2. 피그마 디자인
   1. Page --> 디자인을 탐색하는 캔버스가 있고 각 페이지별로 프로토타입을 만들 수 있다.
   2. Section --> Frame과 화면 요소를 담을 수 있다. 프레임은 섹션을 담을 수 없음.
   3. Frame --> 화면에 들어가는 요소(이미지/컴포넌트/텍스트..)와 화면을 담는 컨테이너
   4. Group --> 화면을 묶는 단위 -> 컨테이너 역할을 하지 않음.
3. 플러그인
4. (Constraints)콘스트레인트 기능 -- 프레임의 크기에 따라서 자식요소들의 위치를 지정 -- 반드시 부모요소가 프레임이어야 한다.
5. Auto Layout -- 반응형웹처럼 레이아웃의 변화를 주었을 때 원하는 디자인 레이아웃이 보여지도록 해주는 기능. / 버튼/중복된 리스트 디자인에서 유용 -- Shift + A -- 디자인 패널 -> Auto layout 버튼을 클릭 -- 요소에서 마/우 -> Add Auto layout -- 위치

1. Hug Contents

• 부모 요소가 가지는 값으로 자식요소의 크기에 영향을 받음

• 텍스트와 오토레이아웃이 포함된 오토레이아웃 요소에 적용

  2) Fill Container
  

  • 부모의 프레임에 크기를 맞춰서 요소의 크기가 확대/축소됨
  • 자식객체만 적용
  • 오토레이아웃이 포함된 프레임/벡터/이미지 /
  • 오토레이아웃이 포함된 오토레이아웃과 텍스트
  3. Fixed
  • 설정한 값으로 고정된 상태
  • 부모, 자식객체에 모두 적용
  • 최상위 부모 프레임/오토레이아웃이 포함된 프레임/벡터/ 이미지

1. 컴포넌트
   • 디자인 요소를 재사용 및 유지보수에 용이
   • 한개 / 두개이상/set 컴포넌트 등록 가능
   • ctrl + alt + k

6_1. 컴포넌트 해제

• 인스턴트 마/오 -> Detach instance
• ctrl + alt + b
• 변경 후 다시 컴포넌트 만들기 가능

6_2 컴포넌트 원본(=마스터) 해제

• 없음

• Detach component 플러그인 사용

• boolean - true / false (나타나고 사라지고)

• valiable (변수 (이름)) (ex, css에서 :root { —var-background(#eee)}

![image.png](attachment:8e4260ec-246b-4837-b9a6-a528dd954b7d:image.png)