피그마 개념 및 기본 구성요소

피그마 (Figma)

• 시제품 기획을 위한 협업 툴
• 디자이너, 개발자 외 관계자들이 모두 한 공간에서 작업할 수 있음
• 재사용 가능한 디자인 요소 활용 가능

구성요소

컴포넌트

• 재사용 가능한 디자인 요소
• Main component (원본) - Instance (복제)
  • 원본의 변경사항 -> 복제에 영향 O
  • 복제의 변경사항 -> 원본에 영항 X
• 컴포넌트 별로 이름 규칙 명명 가능
  • example) button/navy, button/yellow
  • Swap Instance 기능을 통해 동일 요소 디자인을 사전 지정한 규칙에 맞게 변경 가능

스타일

• 재사용 가능한 "색상, 스타일, 효과" 요소

그리드

• 디자인 요소 배치를 위한 가이드라인
• 디자인 요소들이 동일 간격을 유지할 수 있도록 설정가능
• 종류
  • Grid (바둑판)
  • Columns (세로 마진)
  • Row (가로 마진)
• 설정 파라미터 (Column, Row 기준)
  • Count : 그리드 갯수
  • Margin : 그리드 외곽 (좌-우) 간격
  • Gutter : 그리드 개별간 간격
• Constraint
  • 그리드에 배치된 디자인 요소의 Position 설정

오토 레이아웃

• 디자인 요소들의 자동 정렬, 반응형으로 크기 조절 가능
• hug content : 콘텐츠 크기에 따라 프레임/컴포넌트 자동 크기 조절
• fixed size : 콘텐츠 크기에 상관없이 프레임/컴포넌트 크기 고정
• fill container : 프레임/컴포넌트 크기 조절에 따라 콘텐츠 크기가 자동으로 조절

---

• 참고자료
  • 유튜브 : 스태리빛나 유튜브 (https://www.youtube.com/watch?v=ASlOHtOps-s)