15:33 질문이 있습니다. Primary가 참조하는 색상을 green400에서 Blue700으로 바꾸면 Primary Color가 참조하는 색 자체가 바뀌기 때문에 버튼 색상 뿐만 아니라 저 Primary 토큰을 참조하는 테두리 컬러, 텍스트 컬러, 아이콘 컬러 등이 모두 바뀌게 되는 것 아닌지 궁금합니다..! 저 경우에는 ButtonPrimary가 참조하고 있는 Primary 토큰을 다른 토큰으로 바꿔줘야 하는게 아닌가 해서요. 저같은 경우에는 그래서 따로 Primary 토큰을 두지 않고 bgPrimary, textPrimary, borderPrimary 토큰에 Primitive 토큰(green400과 같은)을 참조하는 식으로 구성했는데 이렇게 해도 괜찮은지도 궁금하구요!
안녕하세요. 좋은 질문 감사합니다 :) 이 영상에서는 디자인 토큰이 저런식으로 연결관계를 가질 수 있다~라는 것을 보여드리기 위해 1primitive-2semantic-3component 간의 연결로 예를 들었는데 실제로 저도 이 3단계로 이용하는 것 보다는 primitive와 2, 3단계가 섞인? 팔레트로 연결하여 사용하는 편입니다. 이 다다음 영상인 th-cam.com/video/2sbQeUuoRv0/w-d-xo.htmlfeature=shared 베리어블 실전 영상에서도 1->3단계로 바로 연결해서 사용하는걸 예제로 두었구요. 따라서 답글주신대로 시청자님이 만든 팔레트 구조처럼 저도 사용하고 있답니다 :) 참고로 borderPrimary, bgPrimary 등을 네이밍할 때 border/primary, bg/primary와 같이 슬러시로 구분해주면 카테고리구조화가 되어서 더 사용하기 좋습니다.
안녕하세요 :) 시청해주셔서 감사합니다~ 토큰개념은 '기능'으로 생각해주시면 됩니다. 원래 #03c65a라는 절대적인 명칭을 각 상황에 맞게 이름을 변경시켜줄 수 있는 '기능'인거죠. 파운데이션은 각 회사의 디자인 사전 같은 거라고 생각해주시면 될 것 같아요. 만약 a회사에서 사용할 수 있는 녹색이 뭘까 찾아보면 green100~900과 같이 a회사에서 자체적으로 골라서 네이밍해놓은, a회사만의 녹색들이 모여있는 사전인거죠. 그래서 아무 녹색을 사용하지 않고 a회사용으로 등재된 녹색을 사용하는 개념으로 보시면 됩니다 :)
primitive / sementic까지는 그래도 적용할 수 있겠는데 component 단위까지 들어가려니 리소스 부분에서 엄두가 안나는 것 같네요. :( 그래도 1인 디자이너인 상태에서는 sementic까지 적용하는 것이 내부적으로 좋을 것 같아 열심히 적용하고 있습니다! 좋은 영상 감사합니다 :)
![[소리X. 영상 설명 참고] figma의 야심작. Variables로 만드는 팔레트 A to Z! #primitive #Semantic #Component](/img/n.gif)
우와 진짜 유료강의보다 더좋아요.........정리도 너무 잘해주셨고......진짜 감사해요ㅠㅠㅠㅠ
좋게 봐주셔서 너무나 감사합니다😊 열심히 제작한 보람이 있네요👍👍
영상 퀄리티나 구성이 왠만한 유료강의보다 좋은것 같아요. 감사합니다.
좋게 봐주셔서 너무나 감사합니다 😍😍
큰프로젝트를 앞두고있는데 디자이너가 저혼자라 이런시스템을만들어야하거든요. 다음영상 기대됩니다
감사합니다😊 최대한 이해가 쉽도록 한번 준비해보겠습니다
정말.. 최고의 디자인 강의입니다!!!
반응형 강의도 정말 큰 도움 받았는데, 어쩜 이렇게 모든 개념을 초보자도 이해하기 쉽게 설명해주시는지..
양질의 강의 해주셔서 정말 감사드립니다. 앞으로의 영상도 기대하겠습니다~~!!!
도움되셨다니 저도 뿌듯합니다 😊😊 앞으로도 좋은 콘텐츠 꾸준히 제작해보겠습니다~
영상도 깔끔하게 키워드만 있고 설명도 잘하셔서 이해가 잘 되네요
유익한 영상 잘 봤습니다!
김사합니다 😍😍
감사합니다.
너무 감사합니다 😊😊
아 디자인 토큰이 뭔지 답답했는데 속 시원하게 설명 감사요
저도 감사합니다 😍😍
디자인토큰에 대해 자세하게 설명해주셔서 정말 정말 감사합니다!!🥹 구독하고 갑니다!
앞으로 효율적으로 관리할 수 있을 것 같아요 얼른 다음 영상 기대돼요 variables 토큰화하는 설명영상 기다리겠습니다 감사합니다~!
댓글 감사해요 ㅎㅎ 베리어블 영상도 곧 멋지게 준비해보겠습니다🙂🙂
댓글 잘 안다는데 감사해서 달게되네요🫶🏻디자인 토큰 찾아봐도 이해못해서 너무 답답했는데 좋은 영상감사해요ㅠ 😭 다른 영상도 열시미 보고있습니당!💃🕺💃🕺
저도 너무 감사합니다 🤗🤗
다음영상 빨리 만들어 주시요 현기증나요😢
네. 다음영상은 베리어블영상 전에 파운데이션 관련 내용인데 조속히 한번 올려보겠습니다👍
개발자한테도 유용하네요. 감사합니다
유용하셨다니 기쁩니다. 감사합니다😊😊
감사합니다
감사합니다🙂🙂
15:33 질문이 있습니다. Primary가 참조하는 색상을 green400에서 Blue700으로 바꾸면 Primary Color가 참조하는 색 자체가 바뀌기 때문에
버튼 색상 뿐만 아니라 저 Primary 토큰을 참조하는 테두리 컬러, 텍스트 컬러, 아이콘 컬러 등이 모두 바뀌게 되는 것 아닌지 궁금합니다..!
저 경우에는 ButtonPrimary가 참조하고 있는 Primary 토큰을 다른 토큰으로 바꿔줘야 하는게 아닌가 해서요.
저같은 경우에는 그래서 따로 Primary 토큰을 두지 않고 bgPrimary, textPrimary, borderPrimary 토큰에 Primitive 토큰(green400과 같은)을 참조하는 식으로 구성했는데 이렇게 해도 괜찮은지도 궁금하구요!
안녕하세요. 좋은 질문 감사합니다 :)
이 영상에서는 디자인 토큰이 저런식으로 연결관계를 가질 수 있다~라는 것을 보여드리기 위해 1primitive-2semantic-3component 간의 연결로 예를 들었는데 실제로 저도 이 3단계로 이용하는 것 보다는 primitive와 2, 3단계가 섞인? 팔레트로 연결하여 사용하는 편입니다.
이 다다음 영상인 th-cam.com/video/2sbQeUuoRv0/w-d-xo.htmlfeature=shared 베리어블 실전 영상에서도 1->3단계로 바로 연결해서 사용하는걸 예제로 두었구요.
따라서 답글주신대로 시청자님이 만든 팔레트 구조처럼 저도 사용하고 있답니다 :)
참고로 borderPrimary, bgPrimary 등을 네이밍할 때 border/primary, bg/primary와 같이 슬러시로 구분해주면 카테고리구조화가 되어서 더 사용하기 좋습니다.
@@designer_dk 답변 감사합니다! 많은 도움이 되었습니다!
안녕하세요! 혹시 4:50 컬러 사이트 알 수 있을까요? 영상 감사합니다~!
구글머티리얼디자인2 입니다🙂
@@designer_dk 감사합니다❣
감사합니다. 꾸벅
감사합니다 🙂
좋은 내용 감사합니다!!
시청해주셔서 감사합니다🤗🤗
디자인시스템에 대한 강의 잘들었습니다. 페이지가 많아지면 피그마 디자인이 한눈에 보는게 어려워 보이네요.
시청 감사합니다. 화면이 많으면 한눈에 보기 힘들긴 하죠 🥲
Can tell me about the website design system at 11:35
hi, It's probably Uber design system :) base.uber.com/
Thank you very much! 😍@@designer_dk
좋은 영상 감사합니다.
감사합니다 😊😊
파운데이션과 디자인 토큰 개념이 햇갈리네요.
green-300 => #03c65a
이렇게 되어있으면 #03c65a이게 파운데이션이고 green-300이게 디자인 토큰이라는 의미일까요?
안녕하세요 :) 시청해주셔서 감사합니다~ 토큰개념은 '기능'으로 생각해주시면 됩니다. 원래 #03c65a라는 절대적인 명칭을 각 상황에 맞게 이름을 변경시켜줄 수 있는 '기능'인거죠.
파운데이션은 각 회사의 디자인 사전 같은 거라고 생각해주시면 될 것 같아요. 만약 a회사에서 사용할 수 있는 녹색이 뭘까 찾아보면 green100~900과 같이 a회사에서 자체적으로 골라서 네이밍해놓은, a회사만의 녹색들이 모여있는 사전인거죠. 그래서 아무 녹색을 사용하지 않고 a회사용으로 등재된 녹색을 사용하는 개념으로 보시면 됩니다 :)
영상에 나온 화면들? 디자인은 어떤 프로그램으로 만드신건가요?? 깔끔하고 맘에 들어서요
피그마입니다 😆😆
primitive / sementic까지는 그래도 적용할 수 있겠는데 component 단위까지 들어가려니 리소스 부분에서 엄두가 안나는 것 같네요. :( 그래도 1인 디자이너인 상태에서는 sementic까지 적용하는 것이 내부적으로 좋을 것 같아 열심히 적용하고 있습니다! 좋은 영상 감사합니다 :)
맞습니다. 컴포넌트 단계로 가면 더 좋은 개념이고 이런건 전혀 아니랍니다 ㅎㅎ 사후 관리에 좀 더 유리한 것일 뿐, 진행하신 것 처럼 프로젝트 성격에 맞게 설정하는게 맞다고 봅니다 :) 화이팅입니다👍
디자인 시스템 설명해주시면서 컴포넌트 네이밍 같은 거 정리되어있던 자료는 웹사이트인가요? 웹사이트라면 어떤건지 알고 싶습니다!!
네 구글 머티리얼디자인과 애플 휴먼인터페이스가이드 입니다 🙂🙂
10:51 요기 사이트 궁금합니다!
애플 디자인 시스템 입니다 🙂🙂
감사합니다! 요즘 업무 관련하여 디자인 시스템 공부를 하고 있는데 많은 도움을 받고 있습니다. 좋은 영상, 정보 공유 감사드립니다!
유료 강의 하셔도 될 것 같습니다!
감사합니다 😍😍
디자이너님이 보고 계신 웹사이트 주소 혹시 공유가능할까요?
안녕하세요~ 혹시 어떤 웹사이트 이야기주신걸까요? 영상에 사이트가 꽤 많이 등장해서요 ㅎㅎ