묻고 답해요
148만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨디자인 시스템 with 피그마
타이포그래피 create style시 오류메세지
안녕하세요 선생님!타이포그래피 part2강의를 듣다가 궁금한 점이 있어서 글을 남깁니다.디자인 토큰에서 만든 스타일을 'create style' 할 경우에 이런 오류창이 뜹니다 ㅠㅠ 왜이런지 알 수 있을까요?
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
강의자료 공유 어디서 받을수있나요?
안녕하세요,앞의 강의들중에 어떤 리소스 자료나 비슷한것들을 공유해주시겠다고 말씀이 있는데, 어디서 공유받을 수 있는지 궁금합니다~!
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
B2C 이러닝 과정이 안 보여요.
B2C 이러닝 과정, B2C 웹 페이지 작성이 궁금해서 강의 등록을 했는데 그 내용이 안 보이는 같아요..그 부분은 아직 안 올라온 건가요? 아님 수업 내용에서 빠진 걸까요?
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
4분 부분에서 궁금한점이있습니다.
앞족에서 베리어블은 스타일과 베리어블을 참조받을수있따고 설명해주셧는데 3분 20초에서는 스타일을 찾을수 없다고 말씀하셔서요. 실제로도 해보니베리어블은, 기존 베리어블을 참조할 수잇고 스타일은 참조못하고스타일은, 라이브러리에서 베리어블만 적용되고 스타일은 안된느데둘이 각각 서로 참조가 안되는 부분으로 실제 적용되는데 제가 잘못 하고 잇는걸까요? 앞에서 하신 설명과 보여주신 설명이 조금 다르게 느껴져서 혼동이오네요 ㅠ
-
해결됨디자인 시스템 with 피그마
강의에 적어주신 링크가 들어가지지 않습니다.
https://bit.ly/figma_finished링크가 변경된걸까요?
-
해결됨디자인 시스템 with 피그마
토큰 오류 및 컬러 맵핑 light/dark 모드 작동이 안돼요.
토큰 색상값 미리보기 오류{white}, {black}으로 색상 지정했는데, 마우스 호버시 나오는 미리보기 값과 색상은 #fff로 뜨는 오류가 발생하는데, 단순 오류인지, 설정에 실수가 있었는지 모르겠습니다. edit token으로 토큰을 열어서 확인해보면 여기서는 정상값으로 나오는데, 미리보기 영역에서는 위에처럼 뜨는 오류가 발생하네요.이런 오류 현상 보신 적 있으신가요? 라이트/다크모드 컬러 맵핑이 되지 않습니다.1번 오류로 인해서 작동이 되지않는 것 인지, 최근 피그마 업뎃하면서 바뀐 부분이 있는것인지 모르겠습니다.1번오류에서 문제가 생기는 black, white 외의 gray 색상들도 모두 작동이 안됩니다.아예 light/ dark 컬러 맵핑 기능 자체가 작동을 하지 않는 것 같아요. 아래는 강의를 실습중인 링크입니다.https://www.figma.com/file/f5bqt7EUqi83i83aCfVxoM/%E2%9D%96-Uber-(Started)_study_2023?type=design&node-id=41-558&mode=design&t=Dix01e1uVoP3Tuwk-0
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
컴포넌트 명칭에 대한 질문
IntroComponent ChecklistunSelected, selected, partialunSelected, selected컴포넌트 명칭에 대해 질문입니다.(워크시트)대문자가 되었다가 소문자가 되었다가 하는데 이부분은 어떤 기준으로 설정하시는지 알려주실수 있을가요?항상 피그마 명칭을 작성할때 고민되는 부분입니다.
-
해결됨디자인 시스템 with 피그마
H1~6 대신 Large~XL 로 하는게 좋은점 이 있을까요?
검색 엔진 최적화 때문에 H 태그를 적극 사용하고 있는데강의에선 XL 등의 변수로 사용하셔서 H 태그로 사용하지 않아도 되는지 궁금합니다
-
해결됨디자인 시스템 with 피그마
피그마 토큰 핸드오프 질문
안녕하세요! 범쌤님수강자 이샘입니다! 저번 답변 너무 감사드립니다. 디자인토큰에서 핸드오프 부분에서 막혀서 글작성 하게 되었습니다. 보시는 페이지에서 save를 눌러서 커밋메세지까지 설정하고 다음으로 넘어가려면 저렇게 뜹니다! ㅠㅠ 이상태에서 넘어가지 못하고 있습니다!
-
해결됨디자인 시스템 with 피그마
Figma tokens create styles 오류
지금 컬러 강의 듣고 content색상을 넣어보려고 하는 중인데 Figma tokens create styles 이 제대로 다 들어가지 않아서 원인을 모르겠어서 질문드립니다 ㅠㅠ!!
-
해결됨디자인 시스템 with 피그마
타이포그라피 관련 질문
안녕하세요 선생님 타이포 그라피 단락 부분 듣다가요!궁금증이 생겼습니다.네임부분은 첫글자를 소문자로 사용하시고 폰트 웨이트 부분은 대문자로 시작하셨는데요 입력할때 대소문자 규칙 같은것이 있는 걸까요? (상관없나요 보통?)나중에 실무에서는 저런 네이밍 규칙은 보통 어떻게 진행되는지 궁금하여 질문 드립니다.! :)
-
해결됨디자인 시스템 with 피그마
안녕하세요 범쌤님!
프리텐다드 폰트 사용관련프리탠다드 홈페이지에서 다운받고 보니 다운로드가 두가지 버전이있습니다!Pretendard와 Pretendard variavle. 인데 디자이너는 어떤걸 쓰는게 좋은가요! 그리고 왜 두개로 나눠지는지 혹시 아신다면 궁금합니다!. 개인적으로 범쌤님이 자주쓰는 폰트가 궁금합니다! (프리탠다드, 슈트 등) 3가지 정도 알려주실수 있으신가요! 강의 타이포 편에 서 "heading" "label" "paragraph" 이렇게 쓰시는걸 봤습니다. 짧은 저의 지식으로는 사이즈는 다 같은데 굶기만 다른걸로 이렇게 이름을 나누시는건지 궁금하고, heading은 제목이라고 해석이 되는데 label과 "paragraph가 좀 와닿지가 않았습니다!. 현업에서도 이렇게 사용되는지 궁금합니다..! (저는 그간 참고한게 title, subtitle, body) 였습니다!. 피그마 토큰 깃허브로 핸드아웃 따라중이였는데 이제는 pro로 유료버전이 되야! 가능한가 봅니다. 2023년 피그마 업데이트에 보니까 피그마도 토큰같은 기능을 variavles이름으로 낸다고 하는데 :-)..새로운 레슨 찍어주실 생각은 없으신가요...! 다른 강의도 들어봤지만 범쌤이 짱이에요...거기다가 질문 답변도 주시고 흑흑 텍마이머니..(지갑을 흔든다) 혹시 디자인 시스템 가이드 참고하시는것 있으신가요? 저는 컬러네임 정하는게 정말 어려웠는데 범쌤 덕분에 시스템 컬러와 악센트 등 잘 참고 하고 있습니다. 항상 감사드립니다!
-
해결됨디자인 시스템 with 피그마
토큰 Font size 변경 시 네이티브로 동기화 안됨
안녕하세요, 강의 실습 중 안되는 부분이 있어 문의 드립니다.타이포그래피 02 강의에서 Font size Default 값을 16에서 14로 변경하면 네이티브 시스템에 있는 스타일 값들과 적용해둔 텍스트 들의 사이즈들이 바뀌지 않습니다.토큰에서 설정 하나만으로 한번에 일괄 적용 할 수 있어서 이렇게 설정하는건데왜 네이티브 시스템으로 적용이 되지 않는지 모르겠습니다.토큰 내에서는 각 사이즈 별로 크기 변경됩니다.혹시 pro 버전이 아니라서 그런걸까요..
-
해결됨디자인 시스템 with 피그마
피그마 토큰 등록시 텍스트 사이즈
안녕하세요! 강의를 보면서 토큰 등록을 적용해보고 있습니다. 궁금한것이 생겨 질문드려요. font size 등록할 때, {base} * {sizing} 처럼 가변으로 등록하지 않고 14px, 16px, 20px.. 처럼 각각 등록을 해도 괜찮은것인지 궁금합니다. 설명주신 부분은 추후 텍스트 사이즈 변경시 효율적으로 처리하기 위해 base 값과 sizing 의 값을 지정하고, 계산식을 통해 사용하도록 설명주신것으로 이해 하였는데요.만약 텍스트 변동이 잘 일어나지 않는다고 가정한다면, px 고정값으로 각각 등록해도 무리가 없을것일까요? 감사합니다!
-
해결됨디자인 시스템 with 피그마
피그마토큰을 이용한 간격 조정
보다 궁금한 부분이 있어 질문남깁니다!오토레이아웃을 잡고 그 사이 또는 양쪽여백등에 간격을 줄때네이티브시스템에서 숫자를 기입하는 경우도 있고피그마토큰에 저장한걸 사용하기도 하던데, 이럴 경우 나중에 전체적으로 간격을 수정할때baseSpacing 을 수정하면 피그마토큰으로 사용한것들은자동으로 변경되어 수정될테고네이티브 시스템에서 기입한경우에는 수정이 안되지 않을까요? 네이티브 시스템에서도 그냥 기입하는 이유는 무엇일까요?
-
해결됨디자인 시스템 with 피그마
타이포그래피 연결해제 표시
다른분이 연결해제 관련 질문을 올리긴 하셨는데 json 파일을 따로 안올리셔서 같이 첨부드립니다 ㅠ.ㅠ 왜 연결해제와 같은 표시가 뜨는 걸까요..?json 입니다.{ "140": { "value": "140%", "type": "lineHeights" }, "150": { "value": "150%", "type": "lineHeights" }, "160": { "value": "160%", "type": "lineHeights" }, "spacing": { "6": { "value": "{spacing.baseSpacing} *1.5", "type": "spacing" }, "8": { "value": "{spacing.baseSpacing} *2", "type": "spacing" }, "10": { "value": "{spacing.baseSpacing} *2.5", "type": "spacing" }, "12": { "value": "{spacing.8} + {spacing.baseSpacing}", "type": "spacing" }, "16": { "value": "{spacing.12} + {spacing.baseSpacing}", "type": "spacing" }, "20": { "value": "{spacing.16} + {spacing.baseSpacing}", "type": "spacing" }, "24": { "value": "{spacing.20} + {spacing.baseSpacing}", "type": "spacing" }, "28": { "value": "{spacing.24} + {spacing.baseSpacing}", "type": "spacing" }, "32": { "value": "{spacing.28} + {spacing.baseSpacing}", "type": "spacing" }, "36": { "value": "{spacing.32} + {spacing.baseSpacing}", "type": "spacing" }, "40": { "value": "{spacing.36} + {spacing.baseSpacing}", "type": "spacing" }, "44": { "value": "{spacing.40} + {spacing.baseSpacing}", "type": "spacing" }, "48": { "value": "{spacing.44} + {spacing.baseSpacing}", "type": "spacing" }, "52": { "value": "{spacing.48} + {spacing.baseSpacing}", "type": "spacing" }, "56": { "value": "{spacing.52} + {spacing.baseSpacing}", "type": "spacing" }, "60": { "value": "{spacing.56} + {spacing.baseSpacing}", "type": "spacing" }, "64": { "value": "{spacing.60} + {spacing.baseSpacing}", "type": "spacing" }, "baseSpacing": { "value": "4", "type": "spacing" } }, "black": { "value": "#000000", "type": "color" }, "white": { "value": "#ffffff", "type": "color" }, "blue": { "100": { "value": "#d4e2fc", "type": "color" }, "200": { "value": "#a9c5f9", "type": "color" }, "300": { "value": "#7da8f7", "type": "color" }, "400": { "value": "#528bf4", "type": "color" }, "500": { "value": "#276ef1", "type": "color" }, "600": { "value": "#1f58c1", "type": "color" }, "700": { "value": "#174291", "type": "color" }, "800": { "value": "#102c60", "type": "color" }, "900": { "value": "#081630", "type": "color" } }, "red": { "100": { "value": "#f9d1cc", "type": "color" }, "200": { "value": "#f3a399", "type": "color" }, "300": { "value": "#ed7566", "type": "color" }, "400": { "value": "#e74733", "type": "color" }, "500": { "value": "#e11900", "type": "color" }, "600": { "value": "#b41400", "type": "color" }, "700": { "value": "#870f00", "type": "color" }, "800": { "value": "#5a0a00", "type": "color" }, "900": { "value": "#2d0500", "type": "color" } }, "yellow": { "100": { "value": "#fff2d9", "type": "color" }, "200": { "value": "#ffe6b4", "type": "color" }, "300": { "value": "#ffd98e", "type": "color" }, "400": { "value": "#ffcd69", "type": "color" }, "500": { "value": "#ffc043", "type": "color" }, "600": { "value": "#cc9a36", "type": "color" }, "700": { "value": "#997328", "type": "color" }, "800": { "value": "#664d1b", "type": "color" }, "900": { "value": "#33260d", "type": "color" } }, "green": { "100": { "value": "#cde7da", "type": "color" }, "200": { "value": "#9bcfb6", "type": "color" }, "300": { "value": "#68b891", "type": "color" }, "400": { "value": "#36a06d", "type": "color" }, "500": { "value": "#048848", "type": "color" }, "600": { "value": "#036d3a", "type": "color" }, "700": { "value": "#02522b", "type": "color" }, "800": { "value": "#02361d", "type": "color" }, "900": { "value": "#011b0e", "type": "color" } }, "accent": { "value": "{blue.500}", "type": "color" }, "negative": { "value": "{red.500}", "type": "color" }, "warning": { "value": "{yellow.500}", "type": "color" }, "positive": { "value": "{green.500}", "type": "color" }, "gray": { "100": { "value": "#e1e1e1", "type": "color" }, "200": { "value": "#c4c4c4", "type": "color" }, "300": { "value": "#a6a6a6", "type": "color" }, "400": { "value": "#898989", "type": "color" }, "500": { "value": "#6b6b6b", "type": "color" }, "600": { "value": "#565656", "type": "color" }, "700": { "value": "#404040", "type": "color" }, "800": { "value": "#2b2b2b", "type": "color" }, "900": { "value": "#151515", "type": "color" } }, "positiveTransparent": { "value": "#0488481a", "type": "color" }, "negativeTransparent": { "value": "#e119001a", "type": "color" }, "scale": { "value": "1.333", "type": "sizing" }, "default": { "value": "16", "type": "fontSizes" }, "heading": { "S": { "value": "{default} / {scale}", "type": "fontSizes" }, "M": { "value": "{default}", "type": "fontSizes" }, "L": { "value": "{heading.M} * {scale}", "type": "fontSizes" }, "XL": { "value": "{heading.L} * {scale}", "type": "fontSizes" }, "XXL": { "value": "{heading.XL} * {scale}", "type": "fontSizes" }, "XXXL": { "value": "{heading.XXL} * {scale}", "type": "fontSizes" } }, "label": { "S": { "value": "{default} / {scale}", "type": "fontSizes" }, "M": { "value": "{default}", "type": "fontSizes" }, "L": { "value": "{heading.M} * {scale}", "type": "fontSizes" }, "XL": { "value": "{heading.L} * {scale}", "type": "fontSizes" }, "XXL": { "value": "{heading.XL} * {scale}", "type": "fontSizes" } }, "paragraph": { "S": { "value": "{default} / {scale}", "type": "fontSizes" }, "M": { "value": "{default}", "type": "fontSizes" }, "L": { "value": "{heading.M} * {scale}", "type": "fontSizes" }, "XL": { "value": "{heading.L} * {scale}", "type": "fontSizes" } }, "pretendard": { "value": "Pretendard", "type": "fontFamilies" }, "bold": { "value": "Bold", "type": "fontWeights" }, "semibold": { "value": "SemiBold", "type": "fontWeights" }, "\bregular": { "value": "Regular", "type": "fontWeights" }, "Heading": { "XXXL": { "value": { "fontFamily": "{pretendard}", "fontWeight": "{bold}", "lineHeight": "{140}", "fontSize": "{heading.XXXL}", "letterSpacing": "{letterSpacing.0}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{paragraphIndent.0}", "textCase": "{textCase.none}", "textDecoration": "{textDecoration.none}" }, "type": "typography" }, "XXL": { "value": { "fontFamily": "{pretendard}", "fontWeight": "{bold}", "lineHeight": "{140}", "fontSize": "{heading.XXL}", "letterSpacing": "{letterSpacing.0}", "paragraphSpacing": "{paragraphSpacing.0}", "paragraphIndent": "{paragraphIndent.0}", "textCase": "{textCase.none}", "textDecoration": "{textDecoration.none}" }, "type": "typography" } } }추가로 import 할 때 이런 표시도 뜹니다.
-
해결됨디자인 시스템 with 피그마
디자인 토큰 spaing 관련
안녕하세요! spacing 관련 토큰 만들어보다가 궁금한 점이 생겨서 질문드립니다. 예제처럼 baseSpaing이 4이며, 4의 배수로 커지는 토큰에서 6이나 10 정도의 spacing 값이 필요하게 되면,{baseSpaing}*1.5 = 6 {baseSpaing}*2.5 = 10이런식으로 만들어도 써도 괜찮은걸까요..?뭔가 4의 배수의 규칙에 어긋나는 느낌인 거 같아서 질문드려봅니다..ㅠ.ㅠ아니면 애초에 baseSpaing 값을 2로 두고 진행하는 게 나은 방안인지 여쭈어 봅니다!
-
해결됨디자인 시스템 with 피그마
피그마토큰 플러그인이 안보입니다.
안녕하세요, 피그마 토큰을 활용하려고 설명해주신대로 따라했는데 왜 저는 명령어 팔레트에서 보이지도 않고,커뮤니티에 가서 토큰을 검색해도저 상단을 클릭하면 아래와 같은 창이 나올까요?
-
해결됨디자인 시스템 with 피그마
디자인 시스템 컴포넌트 properties 사용 시 오류에 대해
안녕하세요! 디자인 시스템을 구축하고 사용하는 과정에서 생각지 못한 오류가 있어 질문 드립니다:) 현재 실무에서 디자인 시스템을 구축하면서 컴포넌트를 생성하고 properties를 설정한 후에이 컴포넌트를 피그마 새로운 디자인 파일을 생성하여 가져다 쓰는 경우가 많습니다. 이때에 원본 컴포넌트를 수정하는 경우에 가져다 쓴 복제된 컴포넌트도 같이 수정되어 연동되는 것으로 알고 사용하고 있었는데 연동이 되지 않는 경우가 있더라구요. 디자인 시스템을 만드는 이유가 원본 컴포넌트를 수정하면 복제된 컴포넌트들도 같이 연동되어 반영시키기 위해 사용하는 장점이 크다고 생각하는데요. 같은 디자인 파일에서 다른 페이지에 가져온 컴포넌트는 연동되는데 아예 다른 파일 페이지에 가져오면 연동되지 않아서 이동된 복제된 컴포넌트를 다시 한번 컴포넌트를 생성해주어 해당 페이지에서 원본 컴포넌트와 추가로 복제된 컴포넌트를 사용해야 하는 상황이 되었습니다. 선생님도 이렇게 사용하는 경우가 있으신지 궁금합니다! 😅
-
해결됨디자인 시스템 with 피그마
Text Type Setting에서 대문자 전환이 되지 않습니다! 도와주세요!
게시판에 이미 유사한 질문이 있지만 선생님 답변을 참고하고도 해결되지 않아서 질문 드려요!저도 Uppercase로 전환하는 선택지가 뜨지 않습니다ㅠㅠ 버전을 확인했는데도 이미 최신버전이라고 떠요!혹시나해서 재설치했는데도 잘 해결되지 않습니다해결할 수 있는 방법이 있을까요?