묻고 답해요
131만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결UX/UI 시작하기 : Figma 입문 (Inflearn Original)
figma mirror 어플
현재는 figma mirror 어플이 사라진 걸까요? 아이폰 사용 중인데 검색해도 뜨지 않습니다.
-
해결됨UIUX 포트폴리오 Part.1 - Figma(피그마) 깊이 있게 배우기
Figma로 디자인이 끝난 디자인 소스를 개발자에게 어떻게 전달하나요?
개발자와 어떻게 협업하는지 궁금합니다.
-
미해결UX/UI 시작하기 : Figma 입문 (Inflearn Original)
아이콘 사이즈 변경 문의
안녕하세요! :) 아이콘을 그리면서 궁금증이 생겨 질문드립니다! 사이즈는 24*24Px, 선굵기는 1px로 그렸을 때 그린 아이콘을 웹 화면 등 크게 사용 할때가 있는데 그때 스케일의 3배수를 이용합니다. 그러면 선 굵기가 3px로 굵어지는데, 웹화면에서의 가독성을 위해서 3배수로 사용하는게 맞나요? 처음 그렸던 1px 선굵기로 유지하고 싶다면 처음부터 사이즈를 3배수(72*72px)상태에서 그리는 방법 밖에 없을까요?
-
해결됨디자인 시스템 with 피그마
토큰 Font size 변경 시 네이티브로 동기화 안됨
안녕하세요, 강의 실습 중 안되는 부분이 있어 문의 드립니다.타이포그래피 02 강의에서 Font size Default 값을 16에서 14로 변경하면 네이티브 시스템에 있는 스타일 값들과 적용해둔 텍스트 들의 사이즈들이 바뀌지 않습니다.토큰에서 설정 하나만으로 한번에 일괄 적용 할 수 있어서 이렇게 설정하는건데왜 네이티브 시스템으로 적용이 되지 않는지 모르겠습니다.토큰 내에서는 각 사이즈 별로 크기 변경됩니다.혹시 pro 버전이 아니라서 그런걸까요..
-
미해결UX/UI 시작하기 : Figma 입문 (Inflearn Original)
수업중 카드 UI 예제 부분은 어디서 받을 수 있어요?
수업중 카드 UI 예제 부분은 어디서 받을 수 있어요?
-
해결됨
figma glitch 효과 만들기
figma를 이용해 glitch효과를 만들고 싶어요예시 자료(위에 예시 자료는 marpple shop의 "최케빈"님의 상품 사진입니다)이런 느낌인데이런 색의 느낌으로 figma로 구현할 수 있을까요 도움 주세요!!
-
해결됨UX/UI 시작하기 : Figma 입문 (Inflearn Original)
figma에 폰트 추가
figma에 폰트를 추가하려고 figma fonts install 그것도 깔고 다른 곳에서 폰트 파일 TTF 다운로드하고window -> fonts 파일에 잘 들어갔는데 figma에서는 폰트가 안 뜨네요..고령딸기체라는 폰트인데 폰트에 문제가 있는 건가요? 새로고침 같은 걸 해봐도 안되고..도와주세요
-
해결됨그 누구도 알려주지 않았던 UXUI 필수 지식, 디자인 시스템
자료관련질문
안녕하세요 자료다운받기 버튼 눌렀는데 png 한장 나오는데 원래 자료는 없는건가요? 인프런 사이트 문제인건지 자료 첨부가 원래 없는 강의인지 문의드립니다
-
해결됨UIUX 포트폴리오 Part.1 - Figma(피그마) 깊이 있게 배우기
관심사 선택 페이지 디자인 - 2 부분 학습 중에 질문
제 피그마에는 Constraints에 Fixed position when scrolling 체크박스 자체가 없는데 어떻게 하면 스크롤 시에 버튼과 상단 바를 고정시키게 만들 수 있을까요?
-
해결됨디자인 시스템 with 피그마
피그마 토큰 등록시 텍스트 사이즈
안녕하세요! 강의를 보면서 토큰 등록을 적용해보고 있습니다. 궁금한것이 생겨 질문드려요. font size 등록할 때, {base} * {sizing} 처럼 가변으로 등록하지 않고 14px, 16px, 20px.. 처럼 각각 등록을 해도 괜찮은것인지 궁금합니다. 설명주신 부분은 추후 텍스트 사이즈 변경시 효율적으로 처리하기 위해 base 값과 sizing 의 값을 지정하고, 계산식을 통해 사용하도록 설명주신것으로 이해 하였는데요.만약 텍스트 변동이 잘 일어나지 않는다고 가정한다면, px 고정값으로 각각 등록해도 무리가 없을것일까요? 감사합니다!
-
미해결모바일 웹 퍼블리싱 포트폴리오 with Figma
개별페이지 HTML+CSS+JS 퍼블리싱(프리로딩)에서 배경 이미지 관련 질문
안녕하세요.모바일 웹 퍼블리싱 수업을 차근차근 잘 듣고 있습니다.강의 중간중간 설명해주시는 부분이 많은 도움이 되고 있습니다. ^^오늘 프리로딩 퍼블리싱 파트를 들었는데요,배경 이미지가 피그마에서 완성한 디자인과 배율이 달라보이는데 이 부분을 효과적으로 조절하려면 css background 에서 어떻게 조절하면 좋은지 궁금합니다.
-
해결됨디자인 시스템 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로 전환하는 선택지가 뜨지 않습니다ㅠㅠ 버전을 확인했는데도 이미 최신버전이라고 떠요!혹시나해서 재설치했는데도 잘 해결되지 않습니다해결할 수 있는 방법이 있을까요?
-
해결됨디자인 시스템 with 피그마
컴포넌트 프로퍼티 지정하는 경우 리스트가 다릅니다
안녕하세요. 우선 유익한 강의 감사드립니다!강의를 보다가 아무리 보아도 제가 보는 화면과 다른 것 같아서 질문 올립니다. 이렇게 컴포넌트를 만들고 프로퍼티 기능을 추가할 때 + 버튼을 누르면 나오는 메뉴가 강사님께서 보여주시는 화면에는 Variant 아래에 Boolean, instance swap, text 가 다른 목록으로 분류되어 나오는데요. 제가 작업할 때 화면은 위와 같이 Variant, Boolean, instance swap, text가 나오는데 어떻게 해야 강사님이 작업하신 화면처럼 나오는건가요??그리고 아래에 Nested instances 라는 기능은 어떤 경우에 쓰는건지 궁금합니다!
-
해결됨디자인 시스템 with 피그마
안녕하세요 선생님 질문있습니다.
안녕하세요 선생님! 강의 너무 유익하고 잘 시청하고 있습니다.궁금한게 있습니다. 타이포 강의를 듣던 중에,1.333배를 입력해서 전체 가이드를 가지고 기준이 되는 "디폴트"값을 정해놓고. 디폴트 값만 변경해도 다 맞춰서 변경되니까 이런 좋은 점은 알겠는데폰트가 12가 티폴트이면 +2pt 만큼 늘어난다 이런거는 안되나요?배수로 정해 놓으면 소수점으로 끝나는데 디자이너한테 이런 부분이 생소해서요!!! {디폴트}+2pt = xl 이런식은 불가능한건지 궁금합니다.그리고 소수점이 문제가 안되는지 궁금합니다(보통 다 디자이너는 1px 이 최소단위니까 궁금해요!_
-
해결됨디자인 시스템 with 피그마
인풋 밑에 헬프 텍스트가 두가지일 경우 컴포넌트 구조
플레이스 홀더 영역을 만들고 아래에 힌트텍스트가 하나있을 때는 오토레이아웃과 불린 기능을 이용해서 힌트 텍스트가 제거되었을 때 플레이스홀더 영역만큼만 보여지게 할 수 있는데힌트텍스트 우측에 텍스트 카운터가 있을 경우(헬프 텍스트가 2가지인 경우) 어떻게 짜야 하나씩 껐을 때 한쪽으로 치우치지 않고 제거했을 때 해당 영역이 사라지고 플레이스 홀더 영역만큼만 잡히게 하는지 모르겠습니다..