피그마 중급강좌 - 다크모드를 위한 컬러 Variables 기능

컬러 디자인 시스템 구축을 위한 컬러 배리어블 기능 (feat. Dark Mode)
** 2023 Figma Config에서 발표된 신규기능입니다. **

00:00 intro
00:09 Variables 기능이 중요한 이유
00:28 리펙토링 테스트를 위한 피그마 샘플 파일 복제 (Style to Variable)
01:15 파일의 위치를 팀 프로젝트로 옮기는 방법 2가지
02:02 Style to Variable, 디자인 토큰을 Variable로 변환하는 방법
02:11 디자인 토큰과 Variable의 공통점
02:34 Color Variable을 생성하는 방법(1)
02:52 디자인 토큰과 Variable의 차이점
03:26 플러그인 실행방법
03:37 Style to Variables Converter 플러그인을 이용해서 토큰을 Variable로 전환하는 방법
06:43 Dark Mode 설정(1)
09:06 Section 안에서 Dark Mode 전환 모드 설정하는 방법
10:37 Variable 실전연습 Part1 Card UI - Base Color & Semantic Color
* 샘플파일 : https://www.figma.com/community/file/...
10:51 Color Variable을 생성하는 방법(2)
11:54 Dark Mode 설정(2)
13:24 Base Color 추가
14:04 Semantic Color란? #시맨틱컬러
15:07 Base Color를 Semantic 컬러에 참조하는 방법
16:03 Variable 실전연습 Part2 Card UI
16:10 Semantic Variable을 UI에 반영하는 방법
17:10 Frame에 대해 Dark Mode 전환 모드 설정하는 방법
18:00 Variable 네이밍 Tip #변수네이밍
18:14 Dev Mode에서 Variable Code 확인하는 방법
19:14 Variable 네이밍 규칙을 정하기 위한 피그마 테스트
19:43 Variable 네이밍 정의 시 “_” 사용을 지양하는 이유
20:10 변수명 규칙 정의 및 유의 사항
20:48 변수명 규칙 정의 시 참고했던 레퍼런스 3가지
22:44 Variable 컬러 활용 예시
24:24 컬러 시스템 가이드라인
26:45 Base Color에 대한 컬러 팔레트
27:27 Outro

----------------------------------------------------------------------------------------------
연관 링크
1) 피그마 커뮤니티 샘플 파일
a. 00:28 리펙토링 테스트용: https://www.figma.com/community/file/...
b. 10:37 실습용: https://www.figma.com/community/file/...
C 22:13 최종버전: https://www.figma.com/community/file/...

2) IBM 변수 정의 가이드라인
https://www.ibm.com/docs/ko/spss-stat...

3) Lighting Design System
https://www.lightningdesignsystem.com...

4) Material Design Theme Builder
https://m3.material.io/theme-builder#...

5) Style to Variables Converter 플러그인
https://www.figma.com/community/plugi...

6) Supa Palette 플러그인
https://www.figma.com/community/plugi...

7) Color Palette Generator
https://colorffy.com/