20:10 프로그래밍에서는 크게 4가지 네이밍(작명) 스타일이 있습니다. PascalCase: 두 단어를 대문자로 구분합니다. camelCase: 파스칼케이스와 같지만 맨앞은 소문자입니다. snake_case: 대문자는 쓰이지 않고, 두 단어를 _ 로 구분합니다. kebab-case: 스네이크 케이스와 같지만 _ 대신 - 를 사용합니다. 일반적으로 단일 언어나 프로젝트에서는 하나의 네이밍 스타일을 고수합니다. 다만 드물게 두개 이상의 스타일을 섞어쓰는 경우가 권장되는 경우도 있습니다. 또는 특정 위치에서 _ 나 - 를 하나만 쓰는 것이 아니라 두개를 쓴다던지 하는 경우도 있습니다. _ 나 - 는 주로 단어 사이에 위치하지만, 맨 앞이나 뒤에 (특히 두개) 사용하는 경우도 있습니다. 이렇게 위 4가지 네이밍 스타일을 벗어나는 변형들은 관례적으로나 기술적으로 특별한 구분자로서 뜻이 있는 경우가 대부분입니다. 개발시 css 의 var(...) 에서는 맨 앞에 -- 가 붙을 수 있도록 변형된 kebab-case 가 사용됩니다. 디자이너가 아무리 camelCase나 PascalCase 등 다른 스타일을 사용해서 소통해도, 개발에 들어가면 개발자는 결국 스타일을 바꾸어야 합니다. 때문에 figma 에서 디자이너가 어떤 네이밍 스타일을 선택하던지간에 dev mode 에선 kebab-case 로 변경되도록 설계된 것 같습니다.
목차(*재생시간: 총 30분) 00:00 intro 00:09 Variables 기능이 중요한 이유 00:28 피그마 샘플 파일 복제 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 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 리펙토링 테스트용: www.figma.com/community/file/1181033239638925044 b. 10:37 실습용: www.figma.com/community/file/1258919460377655072 2) IBM 변수 정의 가이드라인 www.ibm.com/docs/ko/spss-statistics/saas?topic=view-variable-names 3) Lighting Design System www.lightningdesignsystem.com/design-tokens/#category-border-color 4) Material Design Theme Builder m3.material.io/theme-builder#/custom 5) Style to Variables Converter 플러그인 www.figma.com/community/plugin/1253585487427690087 6) Supa Palette 플러그인 www.figma.com/community/plugin/1103648664059257410 7) Color Palette Generator colorffy.com/
목소리도 차분하시고 말투도 예쁘셔서 강좌를 여러번 들어도 편안하게 들을 수 있네요..^_^ 강좌내용은 피그마 강좌 중에 단연 최고가 아닐까 생각이 듭니다. 실무에 실제로 사용되는 스킬들까지도 알려주셔서 정말 도움이 됩니다. 피그마를 처음 배우시거나 피그마가 초급단계이신 분들에게는 이보다 좋은 강좌는 없을 것 같습니다.
온라인 사수님 오늘도 좋은 강의 영상 너무나 감사합니다. 공부하는 입장에서 큰 도움이 되었습니다. 여러 기업들에서 제공하는 디자인 시스템에 대한 가이드를 정말 소화하기 쉬운 형태로 알려주시네요! 염치없지만 혹시 24:24 에 소개된 컬러 시스템 가이드라인은 유료로 판매하실 계획은 없으신가요...
현직 UI디자이너로서 영상들 너무 잘보고있습니다. 한가지 궁금한게 있는데 이렇게 영상으로 봐서는 세팅하는데에만 시간이 너무 오래걸리는거같아서 필드에서 일일히 색상값을 지정하여 다크모드 디자인을 새로 하는게 낫지 않을까 싶은 생각이 들어서요 이렇게 할때의 장점이 있을까요??
컬러 시스템 구축에 있어서 딱히 정답이 있다기 보다, 제가 아는 선에서 당시 피그마 개발 버전 기준으로 가장 적합한 방법을 소개드렸기에 이 방법을 채택하는 지 여부는 시청자 분께서 선택하시는 거라 생각돼요~ 저도 영상을 하나만 보지 않고 다양한 사례를 참고했었어요. 그리고 베리어블 기능이 현재 베타버전이라는 점도 참고해주세요~😀
22:13 Color Variables 최종 파일(피그마 커뮤니티): www.figma.com/community/file/1260476622953189095 추가 업데이트 했습니다.
*최신 리소스는 여기서 확인 가능: www.figma.com/@yeonjung
유료 강의에서 자세히 못 들었던 내용들을 들을 수 있어서 좋네요. 감사합니다.
20:10 프로그래밍에서는 크게 4가지 네이밍(작명) 스타일이 있습니다.
PascalCase: 두 단어를 대문자로 구분합니다.
camelCase: 파스칼케이스와 같지만 맨앞은 소문자입니다.
snake_case: 대문자는 쓰이지 않고, 두 단어를 _ 로 구분합니다.
kebab-case: 스네이크 케이스와 같지만 _ 대신 - 를 사용합니다.
일반적으로 단일 언어나 프로젝트에서는 하나의 네이밍 스타일을 고수합니다.
다만 드물게 두개 이상의 스타일을 섞어쓰는 경우가 권장되는 경우도 있습니다.
또는 특정 위치에서 _ 나 - 를 하나만 쓰는 것이 아니라 두개를 쓴다던지 하는 경우도 있습니다.
_ 나 - 는 주로 단어 사이에 위치하지만, 맨 앞이나 뒤에 (특히 두개) 사용하는 경우도 있습니다.
이렇게 위 4가지 네이밍 스타일을 벗어나는 변형들은 관례적으로나 기술적으로 특별한 구분자로서 뜻이 있는 경우가 대부분입니다.
개발시 css 의 var(...) 에서는 맨 앞에 -- 가 붙을 수 있도록 변형된 kebab-case 가 사용됩니다.
디자이너가 아무리 camelCase나 PascalCase 등 다른 스타일을 사용해서 소통해도, 개발에 들어가면 개발자는 결국 스타일을 바꾸어야 합니다.
때문에 figma 에서 디자이너가 어떤 네이밍 스타일을 선택하던지간에 dev mode 에선 kebab-case 로 변경되도록 설계된 것 같습니다.
ㅠㅠ상세하고 친절한 설명 피린이 감동받고 갑니다ㅠㅠb 진짜 최고이십니다!
좋은 강의 너무 감사드려욤~~🤩
바쁜 시간 쪼개어 영상 만들어주셔서 감사합니다~
건강하시고 좋은 하루 되세여~
목차(*재생시간: 총 30분)
00:00 intro
00:09 Variables 기능이 중요한 이유
00:28 피그마 샘플 파일 복제
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
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 리펙토링 테스트용: www.figma.com/community/file/1181033239638925044
b. 10:37 실습용: www.figma.com/community/file/1258919460377655072
2) IBM 변수 정의 가이드라인
www.ibm.com/docs/ko/spss-statistics/saas?topic=view-variable-names
3) Lighting Design System
www.lightningdesignsystem.com/design-tokens/#category-border-color
4) Material Design Theme Builder
m3.material.io/theme-builder#/custom
5) Style to Variables Converter 플러그인
www.figma.com/community/plugin/1253585487427690087
6) Supa Palette 플러그인
www.figma.com/community/plugin/1103648664059257410
7) Color Palette Generator
colorffy.com/
다른 강좌도 좋았지만, 이번은 역대급인 것 같습니다.
너무 감사해요~
목소리도 차분하시고 말투도 예쁘셔서 강좌를 여러번 들어도 편안하게 들을 수 있네요..^_^ 강좌내용은 피그마 강좌 중에 단연 최고가 아닐까 생각이 듭니다. 실무에 실제로 사용되는 스킬들까지도 알려주셔서 정말 도움이 됩니다. 피그마를 처음 배우시거나 피그마가 초급단계이신 분들에게는 이보다 좋은 강좌는 없을 것 같습니다.
시청해 주셔서 감사합니다!! 💕 너무나 힘이되네요!! ✨✨✨😍
선생님 몇명을 멱살잡고 살리시는 겁니까ㅎㅎ 영상 감사합니다
ㅎㅎㅎㅎㅎ 저도 감사합니다. 덕분에 웃네요 😀
평소에 너무 궁금했던 내용들을 헤매지 않게 잘 가르쳐 주셔서 너무 감사하게 공부하고 있습니다. 정말 고맙습니다^^ 망고 보내드리고 싶어요~^^
감사합니다💕💕💕💕💕💕
와 센세 진심감사드립니다 ㅠㅠㅠㅠ
정말 너무너무 감사드립니다 ㅠㅠㅠㅠㅠㅠ
업데이트 궁금했는데 깔끔히 정리해주셔서 감사합니다!!
♥
9:10 19:28 유익한 영상 감사합니다
10:38 실습용 파일 피그마 커뮤니티에 추가 업데이트 했습니다.
--> Link : www.figma.com/community/file/1258919460377655072
와~ 진짜 퀄리티 엄청납니다~ 오늘도 잘 배우고 갑니다
덕분에 쉽게 이해했습니다. 감사합니다.
감사합니다🥰
온라인 사수님 오늘도 좋은 강의 영상 너무나 감사합니다. 공부하는 입장에서 큰 도움이 되었습니다.
여러 기업들에서 제공하는 디자인 시스템에 대한 가이드를 정말 소화하기 쉬운 형태로 알려주시네요!
염치없지만 혹시 24:24 에 소개된 컬러 시스템 가이드라인은 유료로 판매하실 계획은 없으신가요...
저 2년 전에 연정님 영상으로 시작했었는데 어느 덧 스타트업에서 UI디자인을 하고 있네요 ㅎㅎ
혹시 디자인시스템이랑 개발자에게 전달하는 프로세스 정리하신 강의있다면 바로 수강하고 싶습니다
선배가 없이 독학으로 하다보니 뭘 더 어떻게 해야할지 감이 없어서요 ㅠㅠ
감사히 잘 봤습니다! 😊
☺️
너무 감사합니다 오랜만에 영상 반가워요!!!!
저도 반가워요~ 오늘은 오래간만에 편안한 밤이 될거 같네요.😀
너무 좋은 강좌 감사합니다~~
🥰❤️
그저 빛..
연정님 무조건 시맨틱 컬러 상태여야만 dark mode 적용이 가능한 걸까요? 저는 구글의 머터리얼 기준으로 네이밍을 했었는데 그 상태에서는 적용할 수 없나요?
Local Variables에 시멘틱까지 설정해서 다 등록을 해놨는데... 이걸 개발팀에서는 어떻게 전달할 수 있을까요? 편집권한은 저(디자이너)만 가능한 상황인데 개발자분들은 local variables 옵션 자체가 보이질 않더라구요...
헷갈리는부분이 있어서 질문합니다! 베리어블 공부하면서 다양한회사의 디자인시스템 파일을 열어보는데 베이스컬러 / 시멘틱컬러 / 컴포넌트컬러 토큰을 따로쓰는것같은데 시멘틱 컬러=테마 컬러? 라고 생각하는게 편할까요? 컴포넌트컬러에 베이스토큰을 바로 사용하지않고 시멘틱토큰을 사이에만들어서 컬러명보다는 primary같은식으로 대체해서 붙이는지 궁금합니다!
현직 UI디자이너로서 영상들 너무 잘보고있습니다.
한가지 궁금한게 있는데 이렇게 영상으로 봐서는 세팅하는데에만 시간이 너무 오래걸리는거같아서
필드에서 일일히 색상값을 지정하여 다크모드 디자인을 새로 하는게 낫지 않을까 싶은 생각이 들어서요 이렇게 할때의 장점이 있을까요??
컬러 시스템 구축에 있어서 딱히 정답이 있다기 보다, 제가 아는 선에서 당시 피그마 개발 버전 기준으로 가장 적합한 방법을 소개드렸기에 이 방법을 채택하는 지 여부는 시청자 분께서 선택하시는 거라 생각돼요~ 저도 영상을 하나만 보지 않고 다양한 사례를 참고했었어요. 그리고 베리어블 기능이 현재 베타버전이라는 점도 참고해주세요~😀
오이오이 믿고 있었다구!!
감사합니다 !! ♥
24:26 안녕하세요 컬러시스템 가이드라인은 파일 안 올라와 있는 건가요..?
넵 공유범위가 아니에요~
혹시 local variavles 에 collection 자체의 위치는 못 바꾸나요? 못찾겠네요 ㅠㅠ
현재 베타버전에는 방법이 없는 거 같아요~ㅜㅡ
아하 ㅠ 감사합니다!!