피그마 기초 강의 3-4
폰트 스타일
- 폰트스타일 : 디자인 시스템에 사용할 폰트를 모아둔 목록
- 구성
- 패밀리(Family)
- 굵기(Weight)
(개발자는 숫자로, 디자이너는 굵기 이름으로 이야기 선호) - 크기(Size)
16px에서 시작, 2px씩 줄이거나 늘린다, 10px 미만으로는 지양, 20미만 본문/ 20이상 제목, 20px 이상일 때는 4씩 차이 - 행간(Line-height)
폰트사이즈+사이여백
서체마다 디폴트 여백이 다르다(노토산스는 유난히 높다)
타이틀폰트는 120~135%, 본문폰트는 135~170% 권장 - 자간(Letter-height)
제목(headline, title) / 본문(body) 스타일만들기
피그마 기초 강의 3-5
마스터 컴포넌트와 인스턴스
컴포넌트: 구성품
파운데이션을 조합해 만들어지는 구성품
마스터 컴포넌트: 복제하여 사용하는 원본, 복제품들을 한 번에 수정하거나 편집할 수 있음. 컴포넌트를 지워도 인스턴스는 그대로 남아있음.
인스턴스: 마스터 컴포넌트의 복제품, 인스턴스 변경 가능 연결을 해제하면 일반 프레임으로 변경됨
피그마 기초 강의 3-6
디자인 시스템의 이해
디자인 시스템의 개념
어떠한 프로덕트의 문제를 찾아 디자인으로 개선하는데, 필요한 ui를 만들어놓고 필요할 때 반복적으로 가져와서 사용하기 위해서, 부서 내 디자이너들과 개발자들이 동기화하기 위해서 사용
ui키트는 단어, 디자인시스템은 문법에 비유
단점
설계 및 통일과정이 오래걸린다, 혁신이 줄어들고 틀에 갖힐 수 있다, 유지보수에 공수가 들어간다.
Atomic design system
color, radius, spacing, font, icon
피그마 기초 강의 3-7
ui 디자인 기본
<UI의 분류>
- Action_버튼
- Input_사용자의 입력
- Information_정보전달
- Container_복수의 컨테이너로 하나의 덩어리
- Navigation_페이지 이동수단
- Control_사용자가 값 수정
- 의사 상태(Pseudo State_수도, 가상의)
본질은 동일하지만, 상황에 따라 다른 스타일을 가지는 스타일
ex)마우스를 올렸을 때 색상이 변하는 것
피그마 기초 강의 3-8
ui 만들기 실습(1)
[Button Component]
Action에 해당하는 컴포넌트
누름으로써 중요한 동작을 수행하는 요소
- check point
직관적이고 익숙한 형태와 사용법
시각적인 힌트를 충분히 제공해야 한다
행동을 유도하는 속성 = 어포던스
컨테이너:프레임 / 레이블:행동 안내문구 (텍스트는 사용자가 입력하는 글자) / 리딩 엘리먼트(요소) / 트레일링 엘리먼트
문화권에 따른 방향
LTR(left to right) vs RTL(right to left)
[Textfield Component]
Input에 해당하는 컴포넌트
- 플레이스 홀더 : 입력텍스트의 조건이 아닌 예시_조건은 레이블에 입력
- 유효성 검사(Validation Check) : 사용자가 입력한 텍스트가 유효한지 아닌지 검사 / 방해가 생겼을 시 원만하게 해결하도록 도와주고 유도하는 것 / 오류가 아닌 듯 긍정적인 방향으로 안내하기
