Figma 강의 요약
# 파운데이션
- 파운데이션 : 컴포넌트를 만들기 위해 필요한 재료
- 구성 : 컬러, 폰트, 간격, 여백, 곡률, 그리드, 고도, 아이콘
# 컬러 스타일
- RGB
레드, 그린, 블루
- CMYK
시안, 마젠타, 옐로우, 블랙
- Hex code
컴퓨터에서 R,G,B 색상이 각각 256가지가 보여지는데, 이를 16진법의 코드로 표기함
- 컬러스타일
디자인에서 사용할 컬러 팔레트. 일반적으로 2~3가지를 사용한다.
정했다면 색상의 단계를 만드는 규칙을 만든다. (컬러 팔레트, 쉐이드)
- 컬러 프로파일 (컬러 프로필)
디스플레이가 헥사 코드를 해석할 때 사용하는 색 기준표, 프로그램에 따라 보여지는게 다름
- 컬러스타일의 종류
1) 포인트 컬러 : 프라이머리 컬러 or 악센트 컬러라고도 부름, 가장 중요한 곳에 사용
2) 백그라운드 컬러 : 보통 흰색 (FFFFFF) 사용
3) 세컨더리 컬러 : 서브 컬러, 포인트 컬러를 더 돋보이는 용도로 사용
- 컬러팔레트 (쉐이드)
* 색상의 확장성
컬러 스타일을 정했다면 다양한 상황에 대응할 수 있도록 하기 위해
가장 밝은 단계부터 가장 어두운 단계까지 추가로 만들어 사용한다.
보통은 10단계를 만드는데 이유는 컬러의 명도를 0~100%로 할 때,
10의 단위씩 끊어서 보면 직관적인 판단이 쉬워 커뮤니케이션을 원활하게 할 수 있기 때문이다.
* 1:3:6의 법칙
표준적으로 이상적인 색의 밸런스
포인트 컬러(1) : 세컨더리 컬러(3) : 백그라운드 컬러(6)
* 추가 정보
빛의 3원색 : 가산혼합
색의 3원색 : 감산혼합
가장 어두울 때 : 0%
가장 밝을 때 : 100%
# 컬러 _ 실습
1) 컬러스타일 정하기
피그마 홈 커뮤니티 > coolors > 북마크 및 실행 > 피그마 실행 >
바탕에서 마우스 우측 클릭 > 플러그인 > coolors 선택 >
원하는 컬러팔레트 코드 선택 > 코드 복사 및 개체 컬러에 붙여넣기
2) 컬러팔레트 설정하기
컬러스타일의 컬러를 사각형 개체에 입력 > 사각형 개체 복사 및 붙여넣기 10개 >
첫번째 개체의 Fill Custom 선택 > Hex를 HSL로 변경 >
10개의 각 개체 당 L값(3번째 칸)을 10씩 늘린다 >
각 개체의 이름을 Primary/900,800,700... 으로 설정한다 >
** 피그마 홈 커뮤니티로 가서 > Styler > 북마크 및 실행 >
전체선택 후 바탕 오른쪽 커서 클릭 > 플러그인 > Generate styler 실행 >
우측 바에 컬러 폴더 생성됨
* HSL : 색조/채도/명도의 약자
* / 를 넣는 이유 : 피그마에서 폴더를 생성하라는 명령어
# 폰트 스타일
- 구성 : 패밀리, 굵기, 사이즈, 행간, 자간
* 사이즈 : 16px를 기준으로 2px 늘리거나 줄임
일반적으로 20px 이상의 폰트는 4px씩 늘리거나 줄임
일반적으로 10px 이하로는 사용하지 않음
일반적으로 20px 미만은 본문, 20px이상은 제목에 사용함
* 행간 : Line-height, % 혹은 픽셀 단위. 글자의 크기와 그 사이의 간격.
일반적으로 제목은 120%~135%, 본문은 135%~170%가 표준임
그 중에서도 본문은 150%가 가장 표준적임.
다만 폰트마다 폰트 자체의 여백이 다르기 때문에 서체마다 이상적인 행간도 다름
- 폰트 _ 실습
폰트 설정 > Body/14px,16,18... 으로 이름 변경 >
전체선택 후 바탕 오른쪽 커서 클릭 > 플러그인 >
Generate styler 실행 > 우측 바에 폰트 폴더 생성됨
- 컴포넌트와 인스턴스
- 컴포넌트 : 구성품
- 마스터 컴포넌트 : 하나의 마스터 컴포넌트로 전체 인스턴스의 수정 및 편집이 가능함
- 인스턴스 : 마스터 컴포넌트를 복제하면 인스턴스가 생김
인스턴스 한 개체를 수정하면, 이후에 마스터 컴포넌트의 수정을 해도 적용되지 않음
인스턴스와 마스터 컴포넌트는 분리가 가능 (디태치)
마스터 컴포넌트를 업애도 인스턴스는 사라지지 않음
