0:00 Intro 00:20 Variants 아이콘 샘플 리뷰 00:52 Variants 기능이 디자인 시스템을 위한 핵심 기능인 이유 01:20 피그마 커뮤니티에서 아이콘 샘플 복제하는 방법 // 버튼 컴포넌트 생성하기 영상에서 활용 예정 01:53 컴포넌트 재사용을 위한 로컬 컴포넌트를 캔버스로 불러오는 3가지 방법 02:23 컴포넌트 위젯 불러오기 단축키 : shift +i //오류 정정 "cmd + i" (X) 04:12 Shape 툴을 사용하여 아이콘 제작 및 스타일 베리에이션 도입부 04:24 Layout Grid를 활용한 아이콘 가이드라인 생성 05:13 Star Shape 비율 조절 05:27 Star 아이콘의 스타일 베리에이션, Star 도형 편집 06:43 여러개의 에셋을 일괄 개별 컴포넌트로 생성하는 방법(Create Multiple Components) 06:51 컴포넌트 그룹핑 Part 1 - Page 기준 그룹핑 07:30 컴포넌트 그룹핑 Part 2 - Rename 기능 활용하여 그룹핑한 사례 08:06 컴포넌트 그룹핑 Part 3 - Frame 활용 사례 08:53 컴포넌트 그룹핑 Part 4 - 컴포넌트 그룹핑이 중요한 이유 09:31 Frame의 Constraints기능을 활용한 아이콘 리사이징 09:54 Outline Stroke 10:59 Variants 기능으로 컴포넌트 그룹핑하는 방법 11:38 Variants의 Values 순서 수정하는 방법 11:50 Variants의 Property Name 정의하는 방법 12:10 Inspect 패널에서 Variants 컴포넌트 확인하는 방법 12:25 Variants 사용 사례 - Button 컴포넌트 *피그마 커뮤니티의 Material Design Icons 샘플 파일 링크 : figma.com/community/file/1014241558898418245
넵 편한 방법으로 선택하시면 됩니다. 다양한 방법이 있구나로 이해하시면 될 거 같아요~ 임시 더미 아이콘이 필요하다면 플러그인을 이용하시면 간편하게 아이콘을 활용할 수 있고요, 실무에 머터리얼 디자인 시스템을 사용하실 거면 이 영상에서 추천한 파일을 사용하시는 걸 추천드려요~
안되는 법은 없을 거 같아요~ 예를 들어 secondary Style이 더라도 Type(속성 이름)을 속성 값으로 outlined, filled 로 나눠 관리 할 수 있을거고요~ 또는 만약 계층상 secondary 보다 중요도가 낮은 Style(속성 이름)의 버튼이라면 thirtiary(속성 값)로 하는 걸 권장드리고요.
연정님 정말 최고세요. 설명도 하나하나 자세하고 말씀해주시는 것들도 귀에 쏙쏙 박혀요🥹 좋은 영상 올려주셔서 감사합니다🫶
02:23 오류 공유 : cmd(ctrl) + i -> shift +i (컴포넌트 위젯 불러오기)
[참고 영상] ruclips.net/video/WOQ48AL1_Rk/видео.html
자막을 잘못 입력하여 공유드립니다. 혼란을 드린점 죄송합니다. 😭
오늘도 기대했던 영상이었어요 :D 다음 영상 기다려지네요~~ 궁금했던 부분이에요
연정쌤 너무 감사합니다 여러 강의 들어도 이해가 잘 안 갔는데 자세히 알려주시고 꿀팁들도 알려주셔서 이해가 잘 됩니다 너무 감사해요🎉
지금까지의 강의가 한번에 머리에 정리되는 느낌이네요👍👍
이 영상을 보니 디자인시스템이라는 제목이 더 와닿습니다! 오늘도 좋은 강의 감사합니다.
0:00 Intro
00:20 Variants 아이콘 샘플 리뷰
00:52 Variants 기능이 디자인 시스템을 위한 핵심 기능인 이유
01:20 피그마 커뮤니티에서 아이콘 샘플 복제하는 방법 // 버튼 컴포넌트 생성하기 영상에서 활용 예정
01:53 컴포넌트 재사용을 위한 로컬 컴포넌트를 캔버스로 불러오는 3가지 방법
02:23 컴포넌트 위젯 불러오기 단축키 : shift +i //오류 정정 "cmd + i" (X)
04:12 Shape 툴을 사용하여 아이콘 제작 및 스타일 베리에이션 도입부
04:24 Layout Grid를 활용한 아이콘 가이드라인 생성
05:13 Star Shape 비율 조절
05:27 Star 아이콘의 스타일 베리에이션, Star 도형 편집
06:43 여러개의 에셋을 일괄 개별 컴포넌트로 생성하는 방법(Create Multiple Components)
06:51 컴포넌트 그룹핑 Part 1 - Page 기준 그룹핑
07:30 컴포넌트 그룹핑 Part 2 - Rename 기능 활용하여 그룹핑한 사례
08:06 컴포넌트 그룹핑 Part 3 - Frame 활용 사례
08:53 컴포넌트 그룹핑 Part 4 - 컴포넌트 그룹핑이 중요한 이유
09:31 Frame의 Constraints기능을 활용한 아이콘 리사이징
09:54 Outline Stroke
10:59 Variants 기능으로 컴포넌트 그룹핑하는 방법
11:38 Variants의 Values 순서 수정하는 방법
11:50 Variants의 Property Name 정의하는 방법
12:10 Inspect 패널에서 Variants 컴포넌트 확인하는 방법
12:25 Variants 사용 사례 - Button 컴포넌트
*피그마 커뮤니티의 Material Design Icons 샘플 파일 링크 : figma.com/community/file/1014241558898418245
10:34 아이콘을 Outline stroke 로 변환하시면 원본 백업은 주로 어떻게 하시나요? stroke이 살아 있는 파일을 따로 페이지 등으로 관리 하시는지? 컴포넌트 안에 stroke 살아있는 레이어를 눈 꺼두시는지 궁금해서요.
다음 강의가 기대되네요. 이번강의도 잘봤습니다! 연정님 감사합니다 🥰
정말 이해가 잘 갑니다 감사합니다
영상 마다 느끼지만 내용이 정말 알찹니다..! 영상을 자주 올리는 것과 상관 없이, 양질의 영상만을 고심해서 올려주시는 게 느껴져서 무료로 보는 독학 취준생 입장에서는 정말 감사드릴 뿐 입니다❤
도움이 되었나니 기쁘네요🥰
학원을 다니면서 이미 배웠던 내용이었지만 다 까먹었었는데 연정님 덕분에 새록새록 더 정확하게 이해하게 되는 것 같습니다. 학원에선느 강사님 말도 따로, 따라하는 것 따로 멀티로 다 듣기 어려웠었거든요..😅 좋은 영상 감사합니다!
큰도움 되었습니다. 정말 감사합니다~ *^^*
9:57 쯤에 커멘드+쉬프트 다 누르고 스타 아이콘을 선택하는거죠?
감사합니다!! 도움 많이 받았어요!!
좋은 영상 감사드립니다.
꺄약 영상떴다!!!!
안녕하세요 연정님.. 혹시 추후 강좌 제작하실 때 다크모드에 관해서도 자세히 다뤄주실 수 있으실까요? 다크모드 제작가이드에 대해서 자세히 나온 영상이 없는 것같아서요~
ㅎㅎ 오늘 업데이트 예정이에요 ㅎㅎㅎ👍 지금 마지막 편집중입니당~
@@yeonjung-figma 연정님 강좌는 여러번 보게되는 매력이 있습니다!! (그만큼 고퀄리티예요~~) 오늘 강좌도 너무 기대가 되네요~ 그래도 건강이 최고닌깐 건강 잘 챙기세요..^_^
연정님 알려주셔서 감사합니다🥰🥰
강의 잘 들었습니다! 질문이 있는데 10:16 아웃라인 스트로크를 하면 아이콘 수정이 어려워지지 않나요?
아이콘 swap을 고려한 리사이징이 되게하려면 어쩔 수 없는 거 같아요. 물론 수정이 예상되는 경우는 원본은 백업을 해놓아요~
메티리얼 디자인 아이콘 웹에 적용해 상업적 사용이 가능한가요?
안녕하세요!! 열심히 영상보며 공부하는중인데 궁금한게 생겨서요...13분 34초쯤 hiddenlabel을 누르면 텍스트가 없어지면서 아이콘만 보이며 원모양으로 바뀌는데..좌우 패딩값도 바뀌면서 라운딩이 되시더라구요.... 저는 텍스트를 숨기면 좌우 패딩값이 그대로라 원이 아니라 라운드된 사각형? 처럼되는데... 어떻게 패딩값이 자동으로 변하면서 원형으로 되는건가요?
안녕하세요 잘보고있습니다! 보다가 궁금한점이 생겼는데요 material design icons 커뮤니티에서 찾는거랑 Material Symbols 플러그인 이용하는 거랑 무슨 차이인가요? 좀더 편한거를 사용하면 될까요? 감사합니다
넵 편한 방법으로 선택하시면 됩니다. 다양한 방법이 있구나로 이해하시면 될 거 같아요~ 임시 더미 아이콘이 필요하다면 플러그인을 이용하시면 간편하게 아이콘을 활용할 수 있고요, 실무에 머터리얼 디자인 시스템을 사용하실 거면 이 영상에서 추천한 파일을 사용하시는 걸 추천드려요~
duplicate 버튼이 없고 해당 파일을 불러올 수가 없는데 왜 그런건가요?
저 궁금한게 있는데용~ 베리언트 Primary버튼과 Secondary버튼의 개수가 달라서요~ 그런데 Primary버튼과 Secondary버튼을 하나에 컴퍼넌트로 묶을 라고 하는데요~ 그렇게 되면....안되겠져....?
안되는 법은 없을 거 같아요~ 예를 들어 secondary Style이 더라도 Type(속성 이름)을 속성 값으로 outlined, filled 로 나눠 관리 할 수 있을거고요~ 또는 만약 계층상 secondary 보다 중요도가 낮은 Style(속성 이름)의 버튼이라면 thirtiary(속성 값)로 하는 걸 권장드리고요.
@@yeonjung-figma 오호 감사합니다~영상 잘보고있어요~연정님의 영상들이 넘 도움이 될때가 많아요~감사합니다^^
컴포넌트 그루핑에 있어서 / 를 사용해주는데요 , 슬러시앞위로 스페이스 넣어줘야만 먹히나요? 아님 버튼/컬러 로 간격없이 슬러시해도 그루핑 잡아주나요?
슬러시 앞 뒤 공백이 있어도 그룹핑 됩니다. 다만 경우에 따라(ex. 이미지, 스타일 토큰을 코드로 export 시), 없애야 했으므로 '/' 앞뒤로 공백을 없애는 쪽으로 네이밍 통일 시키는 걸 권장드려요.
@@yeonjung-figma 와~~ 그런거군요 슬래시없이 사용할께요! 답변주셔서 정말 감사합니다~
안녕하세요~ 혹시 단축키 command+i 를 눌렀는데 아무것도 뜨지 않는 건 왜그럴까요? ㅠ
02:23 shift +i 로 정정드립니다. (컴포넌트 위젯 불러오기) 현재는 자막 삭제가 불가능하여 (i)에 코멘트 추가했습니다. 제보 감사드려요.
8:56 10:35
💕