Скачать с ютуб 피그마 중급강좌 - 다크모드를 위한 컬러 Variables 기능 в хорошем качестве

피그마 중급강좌 - 다크모드를 위한 컬러 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/