묻고 답해요
131만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
베릴어블, 아이콘에 궁금한점이있습니다 ㅎㅎ
안녕하세요 선생님 강의 듣던 중궁금한점이 있어 질문 3가지 작성했습니다. 다음과 같이 참조된 값에 ?표가 생기는 상황이 발생합니다. 제가 잘못 적용한거 같은데 ㅠ혹시 어떤 경우의 수 때 발생할 수 있는 현상인지 궁금합니다~2. 아이콘 컬러적용 세션에서union한뒤 vector로 이름을 변경했는데 아이콘을 불러오면stroke가 0 인상태로 불러와집니다.또 가끔가다가 색도 반영이 안될때가 있는데reset all chagne?이런걸 해줘야하는지 궁금합니다.<아이콘 원본컴포넌트><버튼에서 airplay아이콘 스왑햇을때> 스위치 에러가 쓰이는 실제예시가 궁금합니다어떤 때 쓰일 수 있을까요? 질문이 좀 많은데 강의 재밌게 잘 듣고잇습니다감사합니다!
-
해결됨그 누구도 알려주지 않았던 UXUI 필수 지식, 디자인 시스템
[버전관리관련] 김주희 수강생님 질문글에서 추가 질의 드립니다.
안녕하세요. 강의 감사히 들었습니다.같은 부분에서 궁금한 수강생입니다. 저도 유료 사용자입니다.강의에서는 ui kit origin을 복제 해 origin_copy에서 작업 한다.1) 작업 종료 후 origin_copy에서 업데이트 한 작업물들 잘라내기한다.2) origin으로 돌아가서 붙여넣는다.3) origin에서 변동사항에 대한 버전 히스토리 저장한다. (v2로 기재하여 버전 기록 됨)4) origin을 퍼블리시한다. -> 하면 관련 된 제품 프로덕트들에 모두 반영/동기화 됨5) origin_copy을 삭제 하고 origin으로 돌아온다.라고 이해했고 김주희 수강생님의 질의는 5번항목 같은데 맞나요?..강의와 다르게 답변주셔서(굳이 버전1에서 버전2로 옮겨가실 필요 없다)잘 이해가 안됩니다.[관련 추가 질의]'변동사항에 대한 작업을 copy한 페이지에서 작업하고 잘라내서 origin에 붙여넣어 반영한다.'위처럼 단계적으로 진행 되야하는 이유가 피그마는 실시간 클라우드 기반 저장이 되지만ui kit이라는 것이 디자이너의 소유물이아니라 "전사적+실시간으로 누구나 접근가능한(프로젝트 권한 허가에 따라 제한 있을 수도)리소스"이기 때문에보수적으로 작업변동사항이 반영 되야한다. 라고 이해하는게 맞을까요?아니면 다른 이유가 있을지 궁금합니다.
-
해결됨디자인 시스템 with 피그마
디자인 시스템 문의드립니다
안녕하세요 선생님글자 폰트 설정하는거랑 행간 설정하는거 문의 드립니다!기존에 다른 타 기업들의 디자인 시스템을 보면 소수점이 아닌 40px, 32px, 이런식으로 딱딱 떨어지게 되어있는데요 scale로 1.333 배수로 지정할 경우 글자 뒤에 붙는 소수점이 알아볼 수 있게 적어놨을 때 한번에 인식이 잘 되지 않는데 이로 인한 문제는 전혀 없을까요?(그리고 아래처럼 그냥 딱 떨어지게 설정해서 토큰을 발행해도 되는건지 알고 싶습니다) 그리고 또 어떤 디자인 시스템을 보면 px / 옆에 rem으로 지정하는 곳이 있고 위처럼 em으로 지정하는 곳이 있는데 각각 어떤 이유로 단위를 변환해서 기재하는건지 알고 싶습니다. 행간의 경우 선생님 강의에서는 150% 160%이런 식으로 %로 주셨는데, 그렇다면 디자인 시스템을 표기할 때 이런식으로 표기가 들어가야 하는 건지 알고 싶습니다. 그리고 마지막으로 개발자는 가공을 거쳐야 한다고 강의에서 말씀하셨는데, 그러면 회사에서 개발자가 json코드를 가공하는 방법을 모른다고 하면 강의처럼 디자인 시스템을 사용할 수 없는걸까요?답변해주시면 감사드리겠습니다.
-
미해결
Figma to React에서 의도한 대로 코드가 동작하지 않습니다.
Figma에서 디자인한 파일을 Figma to Code 플러그인의 (Tailwind JSX) 옵션을 통해 변환한 후, react의 App.js에 넣었습니다. 실행된 결과는 다음과 같습니다. import './App.css'; function App() { return ( <div className="w-[1920px] h-[969px] relative bg-white"> <img className="w-[1011.68px] h-[238.57px] left-[454.16px] top-[387.92px] absolute" src={'https://via.placeholder.com/1012x239'} /> <div className="w-[230.06px] h-[64.13px] left-[878.36px] top-[697.91px] absolute"> <img className="w-10 h-10 left-[22.20px] top-[12.07px] absolute" src="https://via.placeholder.com/40x40" /> </div> <div className="left-[1380.61px] top-[913.41px] absolute text-black text-4xl font-normal font-['Inter']"> 서비스 소개 </div> <div className="left-[1584.30px] top-[913.41px] absolute text-black text-4xl font-normal font-['Inter']">|</div> <div className="left-[1624px] top-[913.41px] absolute text-black text-4xl font-normal font-['Inter']"> 만든 사람들 </div> </div> ); } export default App;궁금한 것은 원래 피그마에서 디자인했을 때는 1012x239 이미지가 화면 정중앙에서 약간 아래 왔었고 전반적으로 위치가 다 (figma에서의 그것과) 맞지 않는데 레이아웃이 들어가지 않은건가요? 어떻게 해결해야 할지 조언 부탁드립니다.
-
해결됨디자인 시스템 with 피그마
타이포그래피 create style시 오류메세지
안녕하세요 선생님!타이포그래피 part2강의를 듣다가 궁금한 점이 있어서 글을 남깁니다.디자인 토큰에서 만든 스타일을 'create style' 할 경우에 이런 오류창이 뜹니다 ㅠㅠ 왜이런지 알 수 있을까요?
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
강의자료 공유 어디서 받을수있나요?
안녕하세요,앞의 강의들중에 어떤 리소스 자료나 비슷한것들을 공유해주시겠다고 말씀이 있는데, 어디서 공유받을 수 있는지 궁금합니다~!
-
해결됨UIUX 포트폴리오 Part.1 - Figma(피그마) 깊이 있게 배우기
피그마 포트폴리오 배포?
안녕하세요 강의를 수료하고 취업 준비중인 학생입니다!피그마에서 포트폴리오 형식으로 파일을 만들었습니다.사진 및 gif 파일이 같이 있습니다.노트폴리오나 비헨스에 올려서 공유하려면 프레임을 PNG로 다운 받고 업로드시에 GIF 파일은 png로 인식되는 것 같습니다.. 피그마 프로토타입 재생 버튼을 누르고 그 URL을 쉐어해서 포트폴리오를 공유하나요?사진 위에 GIF를 같이 배치하고 싶은데... 궁금합니다!
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
B2C 이러닝 과정이 안 보여요.
B2C 이러닝 과정, B2C 웹 페이지 작성이 궁금해서 강의 등록을 했는데 그 내용이 안 보이는 같아요..그 부분은 아직 안 올라온 건가요? 아님 수업 내용에서 빠진 걸까요?
-
미해결UX/UI 시작하기 : Figma 입문 (Inflearn Original)
해당 강의 시작 때 강사님이 얘기한 예제 및 자료들을 확인할 수 없습니다.
해당 강사님 컨택할 수 있는 정보를 찾을 수 없고, 아래 답변에 언급된 아이콘 사항들도 없습니다...1강에서 강사님이 제공하겠다고 한 자료를 받을 수 있도록 변경해주세요
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
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
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
컴포넌트 명칭에 대한 질문
IntroComponent ChecklistunSelected, selected, partialunSelected, selected컴포넌트 명칭에 대해 질문입니다.(워크시트)대문자가 되었다가 소문자가 되었다가 하는데 이부분은 어떤 기준으로 설정하시는지 알려주실수 있을가요?항상 피그마 명칭을 작성할때 고민되는 부분입니다.
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
링크
예제 샘플 파일 링크는 어디서 볼수 있는건가요? ㅠㅡㅜ
-
해결됨디자인 시스템 with 피그마
H1~6 대신 Large~XL 로 하는게 좋은점 이 있을까요?
검색 엔진 최적화 때문에 H 태그를 적극 사용하고 있는데강의에선 XL 등의 변수로 사용하셔서 H 태그로 사용하지 않아도 되는지 궁금합니다
-
해결됨디자인 시스템 with 피그마
피그마 토큰 핸드오프 질문
안녕하세요! 범쌤님수강자 이샘입니다! 저번 답변 너무 감사드립니다. 디자인토큰에서 핸드오프 부분에서 막혀서 글작성 하게 되었습니다. 보시는 페이지에서 save를 눌러서 커밋메세지까지 설정하고 다음으로 넘어가려면 저렇게 뜹니다! ㅠㅠ 이상태에서 넘어가지 못하고 있습니다!
-
해결됨디자인 시스템 with 피그마
Figma tokens create styles 오류
지금 컬러 강의 듣고 content색상을 넣어보려고 하는 중인데 Figma tokens create styles 이 제대로 다 들어가지 않아서 원인을 모르겠어서 질문드립니다 ㅠㅠ!!
-
미해결UX/UI 시작하기 : Figma 입문 (Inflearn Original)
우측 도구창에
픽스포지션이 안뜹니다 ㅠ
-
해결됨디자인 시스템 with 피그마
타이포그라피 관련 질문
안녕하세요 선생님 타이포 그라피 단락 부분 듣다가요!궁금증이 생겼습니다.네임부분은 첫글자를 소문자로 사용하시고 폰트 웨이트 부분은 대문자로 시작하셨는데요 입력할때 대소문자 규칙 같은것이 있는 걸까요? (상관없나요 보통?)나중에 실무에서는 저런 네이밍 규칙은 보통 어떻게 진행되는지 궁금하여 질문 드립니다.! :)
-
해결됨디자인 시스템 with 피그마
안녕하세요 범쌤님!
프리텐다드 폰트 사용관련프리탠다드 홈페이지에서 다운받고 보니 다운로드가 두가지 버전이있습니다!Pretendard와 Pretendard variavle. 인데 디자이너는 어떤걸 쓰는게 좋은가요! 그리고 왜 두개로 나눠지는지 혹시 아신다면 궁금합니다!. 개인적으로 범쌤님이 자주쓰는 폰트가 궁금합니다! (프리탠다드, 슈트 등) 3가지 정도 알려주실수 있으신가요! 강의 타이포 편에 서 "heading" "label" "paragraph" 이렇게 쓰시는걸 봤습니다. 짧은 저의 지식으로는 사이즈는 다 같은데 굶기만 다른걸로 이렇게 이름을 나누시는건지 궁금하고, heading은 제목이라고 해석이 되는데 label과 "paragraph가 좀 와닿지가 않았습니다!. 현업에서도 이렇게 사용되는지 궁금합니다..! (저는 그간 참고한게 title, subtitle, body) 였습니다!. 피그마 토큰 깃허브로 핸드아웃 따라중이였는데 이제는 pro로 유료버전이 되야! 가능한가 봅니다. 2023년 피그마 업데이트에 보니까 피그마도 토큰같은 기능을 variavles이름으로 낸다고 하는데 :-)..새로운 레슨 찍어주실 생각은 없으신가요...! 다른 강의도 들어봤지만 범쌤이 짱이에요...거기다가 질문 답변도 주시고 흑흑 텍마이머니..(지갑을 흔든다) 혹시 디자인 시스템 가이드 참고하시는것 있으신가요? 저는 컬러네임 정하는게 정말 어려웠는데 범쌤 덕분에 시스템 컬러와 악센트 등 잘 참고 하고 있습니다. 항상 감사드립니다!