사전캠프 TIL | 10월 14일 파운데이션, 플러그인(컬러스타일, 폰트스타일)

Today I Learned !

피그마 실습하기

<파운데이션>

 

UI를 구성하는 기초 재료

Color / Radius / Spacing / Font / Icon

 

<컬러스타일>

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

① Primary Color (포인트컬러)
② Background Color (배경색)
③ Secondary Color (서브컬러) / Tertiary Color (서브서브컬러)

 

 

• 컬러정하기
  커뮤니티 -> Coolers 검색 -> Open it (즐겨찾기) -> Plug-in 열기 -> 색상 Pick
  
  
• 컬러칩 만들기
  Rectangle 만들고 복사 -> 선택한 색상 Hex 코드 복사&붙여넣기
  
  
• 음영 단계 만들기
  10개 복사 & 붙여넣기로 만든 후 HSL 명도값에 +-10 씩 수정하여 단계 만들기
  
  
• 스타일 추가하기
  이름 변경 Primary/50, 100, 200 ......
                  Secondary/50, 100 .......
                  Tertiary/50 ......
  * ( / ) 넣는 이유는 폴더를 나눠주는 기준이 되기 때문이다!

        전체선택 -> Styler -> Generate Style

<폰트스타일>

구성 ①패밀리 ②굵기 ③크기 ④행간 ⑤자간
폰트는 Body (본문용), Title (제목용) 으로 크게 나눈다.

• 본문용
  텍스트 입력 -> ①폰트 변경 -> ②Regular -> ③14 p, 16p, 18p -> ④행간 150%
  
  
• 제목용
  텍스트 입력 -> ①폰트 변경 -> ②Bold -> ③14 p, 16p, 18p -> ④행간 135%
  *행간은 폰트마다 적용되는 차이가 있기 때문에 폰트에 대한 연구가 많이 필요함. 
• 스타일 추가하기
  이름 변경 Title/14p, 16p, 18p
                  Body/14p, 16p, 18p
  
  전체선택 -> Styler -> Generate Style