44,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨디자인 시스템 with 피그마
컬러 질문드립니다!
primary 컬러는 그 해당 브랜드 색상을 뜻하나요?예를 들면 네이버의 녹색처럼요그런데 사실 네이버도 제일 많이 사용되는 배경색상은화이트인건데 그럼에도 primary 컬러는 녹색으로 가는건가요? 그리고 컬러의 100~900번대를 모두 등록해두는 이유는 무엇인가요? 이건 명도 차이를 말하는 게 맞는거죠..?
- 해결됨디자인 시스템 with 피그마
프론트에서 json파일을 가공하여 사용하는 방법
안녕하세요! 디자인시스템 강의 잘들었습니다~현재 디자인/퍼블리싱을 업무를 병행하는 디자이너인데요.json파일을 푸시하고 그 후에 프론트에서는 어떻게 가공해서 사용하는지에 대해 궁금합니다. 추후 강의 계획이 있으실까요?
- 해결됨디자인 시스템 with 피그마
스타일 적용
8강 11:00똑같이 따라했는데 왜자꾸 12/Auto 로 들어갈까요ㅠㅠ
- 해결됨디자인 시스템 with 피그마
1.333배
7강 까지 듣다가 잘 몰라서 질문남겨봅니다.폰트에 1.333배를 사용하는 이유가 궁금합니다.그리고 type-scale.com 에 있는 스케일중에서도 왜 1.333 - perpect Fourth 을 사용하는지도 궁금합니다.이로인해 폰트에 소수점이 생기는건 괜찮나요?
- 해결됨디자인 시스템 with 피그마
타이포그라피 스타일 업로드 오류
또 질문드립니다 선생님 ㅠㅠ 타이포그래피 Label 값들을 잘 넣어서 create style을 했는데 값이 다르게 업로드돼요뭔가 문제인지 모르겠습니다 도륵Heading을 복사해서 했는데 그것이 문제인가요? 복사 안하고 새로 직접 만드니까 잘 되긴 합니다ㅠㅠ!!! 그리고 이 빨간부분 표시는 뭘 의미하는건가요? 제가 뭘 잘못 연동한건가요?
- 해결됨디자인 시스템 with 피그마
다른 모드에 적용한 내용을 다른 모드로 이동할 수 있나요?
안녕하세요 쌤..! 예를 들어 아래와 같이 dark모드에 적용해놓은 것들을 글로벌모드로 이동하거나 복붙할 수는 없나요???삭제하고 다시 만드는 방법밖에 없는지 궁금합니다!
- 해결됨디자인 시스템 with 피그마
컬러팔레트 질문 드립니다!
안녕하세요 범 선생님! 정말 필요했던 수업인데 덕분에 잘 듣고있습니다! 컬러 팔레트 관련해서 질문 드립니다! 저같은 경우에는 라이트모드에서 primary 컬러와, 다크모드에서 primary 컬러 다르게 가져갔는데 (grayscale 컬러 빼고는 명도차이를 줬기 때문에 테마에 따라 primary, secondary, action{강의에서는 accent에 해당}, success{positive에 해당}, warning, error{negative에 해당}컬러가 전부 다릅니다.) 그렇게 될 경우엔 피그마토큰 글로벌에서 라이트모드에서의 컬러와 다크모드에서의 컬러 바리에이션값을 전부 넣어야 하나요?
- 해결됨디자인 시스템 with 피그마
연결해제 표시
타이포그래피 설정후 불러오기를 하면 연결 해제 아이콘 표시가 뜨는데 이유를 모르겠습니다.
- 해결됨디자인 시스템 with 피그마
컬러 팔레트 관련 문의드립니다:)
안녕하세요, 강사님!컬러 디자인시스템 설계중인데 궁금한 점이 있어 문의드립니다.알려주셨던 tailwind color generator 로 컬러를 뽑았을때 9가지 컬러만 나열이 되는데 추가로 더 많은 색상의 컬러 팔레트를 구성하고 싶을땐 어떻게 해야할지 궁금합니다!또 아래와 같이 컬러 팔레트에 50부터 1000의 숫자는 어떤걸 의미하는지 궁금합니다. 컬러팔레트를 구성하고 50-1000의 숫자는 제가 임의적으로 값을 매기는건지 아무리 찾아봐도 나오질 않아 문의드려요 ㅠㅠ 항상 친절하고 자세하게 답변해주셔서 정말 감사드립니다~!
- 해결됨디자인 시스템 with 피그마
다른 파일에 피그마토큰 연동하기
안녕하세요 범쌤!파운데이션이나 컴포넌트를 모아두는 파일과 실제 화면이 있는 파일을 구분해서 사용중입니다.그동안은 라이브러리기능을 이용하고 있었구요.figma token 플러그인에 더 많은 항목을 셋팅할 수 있어서(spacing 등등) 너무 유용한데, 혹시 이걸 실제 화면을 작성하는 파일에는 어떻게 연동해야할까요?이후에 업데이트도요.늘 감사합니다. 많이 배우고있어요~
- 해결됨디자인 시스템 with 피그마
스페이싱 함수값 적용
안녕하세요. 선생님 강의를 따라서 똑같이 진행하고 있는데저는 스페이싱 함수값을 똑같이 적용했는데 왜 주황색 표시랑 아래처럼 보여지는걸까요?질문 중에 러부엉님과 같은 현상인건지 모르겠는데 왜이럴까요??ㅠㅠ아래 이미지처럼 적용했는데 틀렸나요???
- 해결됨디자인 시스템 with 피그마
*2, *3, *4 하면 안될까요?
안녕하세요 범쌤! 강의 잘 보고있습니다. 감사합니다.보던중에 궁금한 점이 있어서요.Spacing값을 직전함수?에 더하는 방식으로 작업해주신 이유가 base값이 변했을 때 반영되게라고 해주셨는데요.그냥 {Spacing.baseSpacing}*2, {Spacing.baseSpacing}*3, {Spacing.baseSpacing}*4, ...이런식으로 해주는것과 나중에 차이가 있을까요?처음에만 곱하고 나중엔 더하는게 헷갈려서요.
- 해결됨디자인 시스템 with 피그마
피그마 토큰과 로컬에서의 적용 충돌?
로컬에도 스타일이 있고피그마 토큰에도 있을때로컬에서 typography 중 스타일 선택한후토큰에서는 선택했을때 바뀌지 않는데 토큰으로는 정리를 하고 실제로 사용할땐 싱크만 맞춘후로컬이나 토큰 둘중에 한곳에서만 사용해나 하나요?
- 해결됨디자인 시스템 with 피그마
figma tokens 초기화
안녕하세요 강의 잘 보고있습니다.보면서 라이브러리를 만들고 있는데피그마 토큰을 기본값으로 초기화 시킬 수 있는 방법이 있나요?아니면 하나하나 지워줘야 하나요?감사합니다.
- 해결됨디자인 시스템 with 피그마
피그마 강좌 중 최고!!!
상동
- 해결됨디자인 시스템 with 피그마
프레임 네임에 Menu 라고 나와야 하는데 저는 없네요?
상동왼쪽 상단에 Menu라는 글자가 없어서요 설정에서 해야 하나요?
- 해결됨디자인 시스템 with 피그마
앞에 $ 표시는 저는 없는데 무엇인가요?
상동
- 해결됨디자인 시스템 with 피그마
텍스트에 폰트 사이즈가 적용이 안되는데 왜 그런가요?
텍스트에 적용이 안되네요?
- 해결됨디자인 시스템 with 피그마
문의드립니다!
안녕하세요, 강사님!친절하고 상세하게 답변 남겨주셔서 감사합니다:)남겨주신 답변 참고해서 제가 임의로 폰트 사이즈를 정한 후 피그마 토큰에 적용해 보았는데요, 제대로 작업한게 맞는지 궁금해서요. 스케일값 없이 작업했는데 한 번 확인해주시면 감사하겠습니다~!{ "140": { "value": "140%", "type": "lineHeights" }, "150": { "value": "150%", "type": "lineHeights" }, "160": { "value": "160%", "type": "lineHeights" }, "170": { "value": "170%", "type": "lineHeights" }, "Default": { "value": "16", "type": "fontSizes" }, "heading": { "H1": { "value": "{Default} * 5", "type": "fontSizes" }, "H2": { "value": "{Default} * 4", "type": "fontSizes" }, "H3": { "value": "{Default} * 3.375", "type": "fontSizes" }, "H4": { "value": "{Default} * 3", "type": "fontSizes" } }, "subtitle": { "S1": { "value": "{Default} * 2.25", "type": "fontSizes" }, "S2": { "value": "{Default} * 1.75", "type": "fontSizes" }, "S3": { "value": "{Default} * 1.375", "type": "fontSizes" } }, "button": { "button": { "value": "{Default} + 2", "type": "fontSizes" } }, "Pretendard": { "value": "Pretendard", "type": "fontFamilies" }, "bold": { "value": "Bold", "type": "fontWeights" }, "firescope_red": { "value": "#bd382b", "type": "color" }, "content primary": { "value": "#1c1918", "type": "color" }, "body": { "B1": { "value": "{Default}", "type": "fontSizes" }, "B2": { "value": "{Default}", "type": "fontSizes" } }, "caption": { "C1": { "value": "{Default} - 2", "type": "fontSizes" }, "C2": { "value": "{Default} - 4", "type": "fontSizes" } }, "Heading": { "H1": { "value": { "fontFamily": "{Pretendard}", "fontWeight": "{bold}", "lineHeight": "{140}", "fontSize": "{heading.H1}", "letterSpacing": "{letterSpacing.0}", "paragraphSpacing": "{paragraphSpacing.0}", "textCase": "{textCase.none}", "textDecoration": "{textDecoration.none}" }, "type": "typography" }, "H2": { "value": { "fontFamily": "{Pretendard}", "fontWeight": "{bold}", "lineHeight": "{140}", "fontSize": "{heading.H2}", "letterSpacing": "{letterSpacing.0}", "paragraphSpacing": "{paragraphSpacing.0}", "textCase": "{textCase.none}", "textDecoration": "{textDecoration.none}" }, "type": "typography" }, "H3": { "value": { "fontFamily": "{Pretendard}", "fontWeight": "{bold}", "lineHeight": "{140}", "fontSize": "{heading.H3}", "letterSpacing": "{letterSpacing.0}", "paragraphSpacing": "{paragraphSpacing.0}", "textCase": "{textCase.none}", "textDecoration": "{textDecoration.none}" }, "type": "typography" }, "H4": { "value": { "fontFamily": "{Pretendard}", "fontWeight": "{bold}", "lineHeight": "{140}", "fontSize": "{heading.H4}", "letterSpacing": "{letterSpacing.0}", "paragraphSpacing": "{paragraphSpacing.0}", "textCase": "{textCase.none}", "textDecoration": "{textDecoration.none}" }, "type": "typography" } }, "Subtitle": { "S1": { "value": { "fontFamily": "{Pretendard}", "fontWeight": "{semiBold}", "lineHeight": "{150}", "fontSize": "{subtitle.S1}", "letterSpacing": "{letterSpacing.0}", "paragraphSpacing": "{paragraphSpacing.0}", "textCase": "{textCase.none}", "textDecoration": "{textDecoration.none}" }, "type": "typography" }, "S2": { "value": { "fontFamily": "{Pretendard}", "fontWeight": "{semiBold}", "lineHeight": "{150}", "fontSize": "{subtitle.S2}", "letterSpacing": "{letterSpacing.0}", "paragraphSpacing": "{paragraphSpacing.0}", "textCase": "{textCase.none}", "textDecoration": "{textDecoration.none}" }, "type": "typography" }, "S3": { "value": { "fontFamily": "{Pretendard}", "fontWeight": "{semiBold}", "lineHeight": "{150}", "fontSize": "{subtitle.S3}", "letterSpacing": "{letterSpacing.0}", "paragraphSpacing": "{paragraphSpacing.0}", "textCase": "{textCase.none}", "textDecoration": "{textDecoration.none}" }, "type": "typography" } }, "semiBold": { "value": "SemiBold", "type": "fontWeights" }, "regular": { "value": "Regular", "type": "fontWeights" }, "medium": { "value": "Medium", "type": "fontWeights" }, "Button": { "Button": { "value": { "fontFamily": "{Pretendard}", "fontWeight": "{bold}", "lineHeight": "{160}", "fontSize": "{button.button}", "letterSpacing": "{letterSpacing.0}", "paragraphSpacing": "{paragraphSpacing.0}", "textCase": "{textCase.none}", "textDecoration": "{textDecoration.none}" }, "type": "typography" } }, "Body": { "B1": { "value": { "fontFamily": "{Pretendard}", "fontWeight": "{semiBold}", "lineHeight": "{160}", "fontSize": "{body.B1}", "letterSpacing": "{letterSpacing.0}", "paragraphSpacing": "{paragraphSpacing.0}", "textCase": "{textCase.none}", "textDecoration": "{textDecoration.none}" }, "type": "typography" }, "B2": { "value": { "fontFamily": "{Pretendard}", "fontWeight": "{medium}", "lineHeight": "{160}", "fontSize": "{body.B2}", "letterSpacing": "{letterSpacing.0}", "paragraphSpacing": "{paragraphSpacing.0}", "textCase": "{textCase.none}", "textDecoration": "{textDecoration.none}" }, "type": "typography" } }, "Caption": { "C1": { "value": { "fontFamily": "{Pretendard}", "fontWeight": "{regular}", "lineHeight": "{170}", "fontSize": "{caption.C1}", "letterSpacing": "{letterSpacing.0}", "paragraphSpacing": "{paragraphSpacing.0}", "textCase": "{textCase.none}", "textDecoration": "{textDecoration.none}" }, "type": "typography" }, "C2": { "value": { "fontFamily": "{Pretendard}", "fontWeight": "{regular}", "lineHeight": "{170}", "fontSize": "{caption.C2}", "letterSpacing": "{letterSpacing.0}", "paragraphSpacing": "{paragraphSpacing.0}", "textCase": "{textCase.none}", "textDecoration": "{textDecoration.none}" }, "type": "typography" } }}
- 해결됨디자인 시스템 with 피그마
추가 강의 업로드
피그마 토큰을 다른 프로젝트에서도 사용할 수 있는 방법에 대해 영상을 촬영했습니다.내보내기와 가져오기를 통해 다른 프로젝트에서도 작업한 토큰을 꾸준히 적용시켜보세요 :)