📘 [내일배움캠프 사전캠프] Figma 3주차
✨ Figma - Day 3: 컬러 스타일 & 폰트 스타일 만들기
✅ 오늘의 학습 키워드
- Foundation(파운데이션)의 개념
- 컬러 스타일 생성 및 시맨틱 컬러 구성
- 폰트 스타일 구성 요소 (패밀리, 사이즈, 행간 등)
- 플러그인 활용: Coolors, Styler
📌 오늘 학습한 내용을 나만의 언어로 정리하기
오늘은 UI 디자인의 기초 재료인 색상과 폰트 스타일을 어떻게 설정하고 활용하는지 배웠다.
**파운데이션(Foundation)**이라는 개념을 통해, 컬러와 타이포그래피가 디자인 시스템의 기반이라는 것을 이해하게 되었고,
피그마에서 컬러 팔레트를 만들고 10단계로 확장해 스타일로 등록하는 실습도 진행했다.
폰트는 기본적으로 본문용, 제목용 스타일을 3단계로 나눠 설정하고, 이를 플러그인으로 저장하는 방법을 익혔다.
❗ 학습하며 겪었던 문제점 & 에러
- 색상 명도를 HSL로 조정할 때 정확한 단계 구분이 어려웠음
- Styler 플러그인 사용 시 레이어 명명 규칙이 맞지 않아 스타일 등록 실패
📖 문제 & 에러에 대한 정의
- 색상 문제: HSL에서 Lightness 값을 잘못 계산해 색상 단계 간 구분이 모호해짐
- 플러그인 문제:
/를 포함한 이름 지정이 안 되어 있어 자동 폴더 구성이 되지 않음
🧪 내가 한 시도
- L값(Lightness)을 수치화해 10단위로 계산하고 수작업으로 적용
- 스타일 이름을
Primary/50,Primary/100처럼 명명해 재시도
✅ 해결 방법
- 색상 코드를 HEX에서 HSL로 전환해 Lightness를 기준으로 색상 단계 생성
- 플러그인에서 요구하는 명명법(슬래시 포함한 구조)으로 레이어 이름 지정 후 적용
🌱 새롭게 알게 된 점
- 컬러 스타일은 단순한 색 저장이 아니라 규칙 기반의 커뮤니케이션 도구임
- 폰트 스타일은 크기, 행간, 굵기 등을 정리한 ‘타이포 스케일’로 이해할 수 있음
- 플러그인을 사용하면 스타일 등록이 훨씬 자동화되고 실수 방지에 유리함
💻 알게 된 단축키 & 기능
Cmd/Ctrl + /: 명령어 검색HSL모드 전환: 색상 피커에서 Hex → HSL로 변경- Styler: 색상/폰트 스타일 자동 등록
- Coolors: 색상 조합 생성 도구
🤔 이 문제를 다시 만나게 된다면?
- 색상 단계는 미리 스프레드시트로 계획 후 피그마에 적용하겠다
- 스타일 등록 시 이름 규칙을 미리 정해두고, 실수 없이 맞춰 작성하겠다
📅 내일 학습할 예정
- 컴포넌트의 상태(State) 구성 방법 (hover, disabled 등)
- 디자인 시스템 구성 요소 분석 (재사용 가능한 UI)
- 실습 위주의 버튼/체크박스/라디오 컴포넌트 설계
📅 숙제
잘 부탁드립니다