UI

피그마를 통하여 만들고자 하는 것은 결국 UI다.
※UI - 기초재료인 파운데이션과 이 파운데이션을 조합하여 만드는 컴포넌트로 나눌 수 있다.

파운데이션의 구성

• 색상
• 서체
• 간격, 여백
• 곡률
• 그리드
• 고도
• 아이콘

빛의 3원색 정보를 16진법으로 변환한 코드를 헥스코드(Hex Code)라고 한다.
ㄴ 디스플레이가 코드를 해석할 때 사용하는 색 기준표를 컬러프로파일(Color Profile)이라고 한다.
ㄴ전세계적으로 사용할 수 있어야 하기 때문에 공신력이 있는 기관이나 기업에서 만들어서 배포한다. 예)Adobe RGB, sRGB, Display P3

컬러스타일

컬러스타일은 디자인에서 사용할 색상을 모아두는 팔레트를 뜻한다.

1) 포인트 컬러
제품에서 정말 중요하고 핵심적인 부분에만 써야하는 색상. 프라이머리 컬러 또는 엑센트 컬러라고 부른다.

2) 백그라운드 컬러
제품의 전체적인 분위기를 만들어주는 배경색. 일반적으로 흰색이다.

3) 세컨더리 컬러
배경색에서 도드라지는 부분을 만들어서 포인트 컬러를 뒷받침하는 색상. 서브 컬러라고도 불린다.

가장 중요한 색상 즉, 포인트 컬러는 화면의 10% 정도의 비율만 써야한다.
전체적인 배경이 60% 정도 비율로 쓴다.
포인트 컬러를 돋보이게 하기 위한 세컨더리 컬러를 나머지 30% 정도 사용한다.

폰트스타일

디자인 시스템에서 사용할 폰트를 모아둔 목록. 다른 말로는 폰트 스케일이라고도 한다. 스케일은 일정한 규칙에 따라 정렬된 하나의 세트를 뜻한다.

폰트스타일의 구성

•패밀리
•굵기
•크기
•행간
•자간

컴포넌트

컴포넌트는 구성품이라는 뜻을 가지고 있다.
UI디자인에서 컴포넌트는 파운데이션을 조합해 만들어지는 구성품을 말한다.

마스터 컴포넌트

피그마에서만 쓸 수 있는 컴포넌트 기능의 핵심. 반복적인 디자인을 빠르게 하기 위해 디자인을 복사해서 사용할 수 있도록 해준다. 복사된 디자인들을 한번에 수정하거나 편집할 수 있게 해주는 중요한 기능.

마스터 컴포넌트는 원본이다. 이 마스터 컴포넌트를 복제하면, 복제본 인스턴스가 생긴다.

인스턴스

컴포넌트의 속성을 그대로 이어 받는다.

컴포넌트를 수정하면 인스턴스에도 영향이 간다.
인스턴스를 수정하는 것이 컴포넌트 변경사항을 이어 받는 것보다 우선 적용된다.
컴포넌트를 지워도 인스턴스는 남아 있다.
연결을 해제하면 분리 되고, 일반 프레임으로 변경된다.

디자인 시스템

머터리얼 디자인 시스템
라인 디자인 시스템
밀리의서재 디자인 시스템
라이트닝 디자인 시스템

UI의 분류

•액션 : 사용자가 중요한 행동을 수행할 때 사용한다
•인풋 : 사용자의 입력을 받을 때 사용한다.
•인포메이션 : 사용자에게 서비스의 상태나 안내 사항을 전달할 때 사용한다.
•컨테이너 : 컴포넌트 여러개가 결합되어 하나의 덩어리를 이루는 컴포넌트
•내비게이션 :사용자가 페이지를 이동할 때 사용
•컨트롤 : 사용자가 설정이나 값을 수정할 때 사용