피그마 기초 강의 3-1
3주차 수업 목표
- ui 디자인 환경을 이해하고 적합한 디자인 원칙을 수립할 수 있다.
- 피그마에서 스타일을 생성하고 관리할 수 있다.
- 컴포넌트의 개념을 이해하고 기능 및 형태에 따라 분류할 수 있다.
- 컬러와 폰트
- 컴포넌트와 인스턴스
피그마 기초 강의 3-2
파운데이션(=엘리먼트 요소)
파운데이션 = ui를 구성하는 가장 작은 알맹이, 요소
UI는 기초 재료인 파운데이션, 이 파운데이션을 조합해 만드는 컴포넌트로 나뉘어짐
파운데이션의 구성
- 색상(color)
- 서체(font, typography)
- 간격, 여백 (spacing, gap)
- 곡률 (radius)
- 그리드 (grid)
- 고도(elevation)
- 아이콘 (icon)
피그마 기초 강의 3-3
컬러 스타일
-RGB(빛의 3원색, 가산혼합)와 Hex code (RGB 각각 0~255의 값 지정하여 16진법으로 변환한 지정값)
- 컬러 프로필, 컬러 프로파일 (Color Profile)
디스플레이가 코드를 해석할 때 사용하는 색 기준표
ex)Adobe RGB나 sRGB, Display P3 등
- 컬러 스타일의 개념
디자인에서 사용할 색상을 모아두는 팔레트
색상의 단계를 만드는 규칙을 만들어야 한다.
- 컬러 스타일을 만드는 일반적인 방법
- point color(primary color) _ 아주 중요한 경우에만 사용
- background color (일반적으로 #ffffff)
- secondary color (Neutral color, sub color)
- 위 세 색상을 정했다면, 명도별로 10단계 만들기(색상의 확장성) (꼭 10단계일 필요는 없다)
- 1:3:6 법칙
[plug-in] shift + I
coolors-컬러추천 플러그인
**컬러팔레트 10단계 만드는 방법
색상 정보값을 HSL로 바꾸고, 명도 L값을 10씩 더하거나 빼서 시멘트 컬러 스케일을 만든다.
컬러 레이블 시스템
가장 밝은 색 이름 =50
가장 어두운 색 이름 = 900
ex) primary/20 ,primary/100 ,primary/200....
!! 레이어 이름들은 복수선택하여 한 번에 변경할 수 있다._순서대로 숫자 라벨링도 가능
!! /는 피그마에서 폴더 구조를 만든다
[rename] ctrl + R
styler-복수의 컬러들을 선택하고 플러그인 실행하면 컬러 스타일 등록
