피그마 기초 3

---

파운데이션

UI를 구성하는 가장 작은 알갱이이자 기초 재료

 

파운데이션의 구성

- 색상(Coior)

- 서체(Font, Typography)

- 간격, 여백(Spacing, Gap)

- 곡률(Radius)

- 그리드(Grid)

- 고도(Elevation)

*높이의 개념

- 아이콘(Icon)

 

UI디자인에서의 컬러

ex) 225,225,225 #FFFFFF(Hex Code)

컬러스타일

디자인에서 사용할 색상을 모아두는 팔레트

- 포인트 컬러

 제품에서 가장 중요하고 핵심적인 부분에만 써야하는 색상. 🌟프라이머리 컬러🌟 또는 엑센트 컬러라고도 부른다.

- 백그라운드 컬러

 제품의 전체적인 분위기를 만들어 줄 배경색. 일반적으로 흰색(#FFFFFF)

- 세컨더리 컬러

 배경색에서 도드라지는 부분을 만들어서 포인트 컬러를 뒷받침하는 색상. 서브컬러라고도 부름.

폰트 스타일

컬러 스타일과 마찬가지로 디자인 시스템에서 사용할 폰트를 모아둔 목록. 폰트 스케일이라고도 부름.

폰트 크기가 20px 이상일 때는 4px씩 차이나게 하는것이 일반적

---

마스터 컴포넌트와 인스턴트

파운데이션을 조합해 만들어지는 구성품(디자인 단위의 개념)

마스터 컴포넌트(Master Component)

- 피그마에서 쓸 수 있는 컴포넌트 기능의 핵심

- 반복적 디자인을 빠르게 하기 위해 디자인을 복사해서 사용할 수 있도록 해줌

- 복사된 디자인들을 한 번에 수정하거나 편집할 수 있도록 해주는 중요 기능

인스턴스(Instance)

- 마스터 컴포넌트의 복제본

- 마스터 컴포넌트를 복사하면 인스턴스가 생김. 컴포넌트의 속성을 그대로 이어 받는다.

---

UI의 분류

액션(Action) : 사용자가 중요한 행동을 수행할 때 사용

ex) 버튼

인풋(Infut) : 사용자의 입력을 받을 때 사용

텍스트를 입력할 수 있는 텍스트필드 ex)셀렉트 박스 등

인포메이션(Information) : 사용자에게 서비스의 상태나 안내 사항을 전달할 때 사용

ex) 토스트 메세지, 스낵바, 라벨 등

컨테이너(Containal) : 컴포넌트 여러개가 결합되어 하나의 덩어리를 이루는 컴포넌트

카드,바텀시트, 리스트처럼 복잡한 구조인 경우가 많음

내비게이션(Navigation) : 사용자가 페이지를 이동할 때 사용

ex) 네비게이션바, 앱바, 탭바, 사이드바 등

컨트롤(Control) : 사용자가 설정이나 값을 수정할 때 사용

ex) 라디오, 체크박스, 스위치 등

---

버튼 컴포넌트

 

텍스트필드 컴포넌트