묻고 답해요
131만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
color variable 등록 시 naming 및 색깔 기준 문의...
안녕하세요. 강의 몇 번이나 돌려보고, 자료 보면서 제가 진행하고 있는 개인 프로젝트에 맞춰서 수정/작성하고 있습니다. 그러던 중 color variable 등록할 때 궁금증이 생겨서 글을 작성하게 되었습니다. theme에서 neutral로 재정의하는 이유가 뭘까요? (primitive에 greyscale이 있음에도 불구하고)semantic color 에서 primary / secondary / tertiary가 뜻하는게 뭔가요?semantic color에서 bold와 subtle은 언제 쓰는건가요~?semantic color에서 그냥 컬러들이랑 INTERACTIVE에 넣은 컬러들이랑 사용처가 어떻게 다른지 궁금합니다 ㅠㅠㅠ
-
미해결UX/UI 시작하기 : Figma 입문 (Inflearn Original)
현재 일자 버전의 Inspect
2024-01-05 현재 일자 버전의 Inspect는 dev mode 토글로 전환하는 것인가요?
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
[실습] 색상 배리어블 등록하기
3:27~theme 등록 중에라이브러리에서 참조 브랜드 컬러 50을 주신다고 하셨는데,컬러 스타일 기본 셋팅이 안되있는 상태에서 실습이 가능한걸까요? 플러그인 설치부터 다시 해봐도같은 셋팅값 설정이 안되있어서 질문남깁니다! 아직 초~중반 수강중인데, 퀄리티가 너무 좋네요.감사합니다.
-
해결됨디자인 시스템 with 피그마
토큰 네임 작성
토큰에서 네임을 작성할때 대문자와 소문자를 번갈아가면서 쓰시던데 기준이 있나요? 소문자로시작해서 띄어쓰기 대신 대문자가 들어가는 것까진 이해가 되는데 아예 대문자로 시작하는건 어떤 경우에 이런식으로 작성하는 건가요?
-
해결됨디자인 시스템 with 피그마
반응형 문의
안녕하세요 범쌤님새해복 많이 받으세요.범쌤이 보여주신 헤더,GNB를 보다가.반응형 이론에 대해서 궁금한게 있어서 문의드립니다. 현재 저는 고정사이즈 웹을 디자인 하고 있는데요 나중에 반응형을 할거같은데 깊이 알지 않아서 겁이납니다! 그래서 범쌤님께 조언을 구하고 싶습니다. 반응형 웹에 대하여반응형 웹은 3가지 사이즈로 작업해야 한다. (핸드폰/타블렛/웹) 핸드폰 (360~743px)타블렛 (744~1024px)웹( 1025~1920px) 즉, 반응형 웹을 할때는 같은 디자인이지만, 3가지 플랫폼을 생각하여 3개로 디자인한다.(360 한개, 1024 한개, 1920 한개)ㄴ 최소크기를 기준으로 작업하고 크게 핀다. ㄴ 최소 크기로 짤리면 안되는 컨텐츠를 염두하고 작업한다 (최소크기: 360,744,1025)3개로 작업하고 개발자한테 넘기면 된다! (에셋이나 컴포넌트 사용은 공통!)여기까지가 반응형 웹 작업시, 이론으로 알고있습니다! 혹시 제가 잘못알고 있는게 있을까요 그리고 두번째 질문은 모바일은. 고정으로 작업하는걸로 알고있는데 (물론 아이폰과 안드로이드 사이즈는 다름, 기종사이즈다름) 모바일은 반응형은 없는거죠..? 궁금합니다. 질문이 많아 송구스럽습니다! 항상 감사드립니다.
-
해결됨디자인 시스템 with 피그마
디자인시스템 문의
안녕하세요 범쌤님! 저는 정말 사수가없는 직장에서 범쌤님 강의와 질문답변 읽으면서 ㅠㅠ 너무 많이 배우고 있습니다.새해복 많이 받으세요! (절) 제가 문의글을 쓴 이유는 디자인시스템을 잡다가 variant 를 할때 불편한 점이 있어서! 문의드려요.1번 질문너무 많은 버튼의 상태값이 반복되다 보니 계속....... hover 타이핑만 20번 치고있는데 제가 주로 쓰는건 EnabledHoverSelectedFoucsed 정도인데 ㅠㅠ 이걸 계속 타이핑 치다보니까 힘들어서요 혹시 범쌤님은 어떻게 하시나요?2번 질문그리고 범썜님이 자주쓰는 상태값 (hover, selected등) 알고싶습니다! 제발 알려주세요....! (내부디자이너 1명인 상황ㅠㅠ)3번 질문 오토레이아웃을 쓰면 "Fixed" "Hug" "Fill" 이 세가지 값이 있고 오토레이아웃 안에 오토레이아웃을 쓸때마다 혼란이 옵니다. 제가 아직 잘 채득을 못한거 같은데 저는 아래와 같이 이해하고 쓰고있습니다. 검토 부탁드립니다 ㅠㅠ "Fixed" - 현재 프레임 길이 값에 고정. 내부 컨텐츠가 많든 적든 현재 프레임 길이에서 벗어나지 않음."Hug" - 현재 프레임 내부에 존재하는 컨텐츠 양에 따라 프레임 길이도 변함."Fill" - 현재 프레임 내부에 존재하는 컨텐츠 양에 따라 프레임 길이도 변함. (근대 Hug와 다른이유는 프레임을 꽉채우겠다는//?) 항상 감사드립니다 범쌤님! 새해에도 좋은일만 가득하세요~~
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
[실습] 간격 배리어블 등록하기
간격 배리어블 스타일가이드 만들 때는 어떤 플러그인 사용하셨는지 알 수 있을까요..?
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
슬랙 커뮤니티 초대 문의
안녕하세요! 선생님 슬랙 커뮤니티 초대 부탁드립니다!!
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
Scale기능과의 차이점
안녕하세요! 혹시 Outline stroke 설정 후 사이즈 변경하는 것과 Scale로 2x로 변경하거나 수치를 바꿨을때 2개의 산출물 결과나 환경이 달라지나요?
-
해결됨피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
아이콘 자료 링크가 안나옵니다.
강사님 두번째 Apple 아이콘 자료 링크를 들어가 보면The page you're looking for can't be found.이렇게 나와요.찾아봤는데https://developer.apple.com/design/human-interface-guidelines/icons/여기가 맞나요?
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
아이콘 관련 문의드립니다.
안녕하세요. 선생님!아이콘 자료를 다들 공유를 받으시고 진행하시는지 궁금하며,이전에 아이콘을 모두 유니온으로 여러 벡터를 병합을 했었는데, 그 중 몇 아이콘은 버그인지 제대로 병합이 안되는 아이콘도 있었고, 선 하나로 된 아이콘도 있어서요!그래서인지 체크박스 작업 중 체크 아이콘에 inverse 컬러가라이브러리에서 없었습니다! (체크아이콘 = 선형 아이콘)추가로 혹시 위와 같은 상황에서는 어떻게 처리를 해야할지 궁금합니다.다른 질문인데요, 아이콘은 제작 후 모두 면으로 변형시켜서 작업을 진행하는 걸까요?그렇다면 선으로 제작한 아이콘은 어떤방법으로 면으로변형하는지 궁금하기도 합니다!
-
해결됨디자인 시스템 with 피그마
tocken이 바로 적용 안되요
tocken용 파일을 만들고, 다른 파일에서 libraries로 불러와서 사용하고 있습니다.문제는, tocken에서 변경 사항을 올리고 다른 파일에서 update를 받아도 바로 적용이 안될때가 많아요이땐 업데이트가 안된 컴포넌트에 가서 reset all change를 해서 사용중인데 자동으로 반영이 안되는 이유가 있을까요?
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
픽스드, 플루이드 반응형 레이아웃 그리드 적용 질문
안녕하세요, 볼드 멘토님!픽스드, 플루이드 반응형 레이아웃 중에 많이 사용되는 케이스가 어떤 것일까요? 오토레이아웃 적용해서 반응형 웹 사이트 디자인 중인데요! Pc 사이즈 먼저 제작 후 모바일, 패드 사이즈 제작하려던 중, 헷갈리는 부분이 있어서요! 콘텐츠 이미지 사이즈를 픽스드 처럼 동일하게 적용할지 고민하다가 (픽스드로 디바이스마다 이미지 사이즈를 비슷하게 적용하려니 어색해보여서요) 플루이드로 시도했는데요~ 이미지 사이즈 축소 기준을 어떻게 맞춰야 할지 헷갈려서요! 좌우마진, 거터 정해서 플루이드로 시도해봤는데요! 뭔가 설정이나 사용법이 부족한 것인지 이미지 사이즈를 수동으로 조절하게 돼서요! 콘스트레이트 설정도 안 보이구요ㅠㅠ콘텐츠(이미지, 카드ui) 플루이드 적용 방법 조언(컨스트레이트 설정 안 보임, 자동 조절처럼 안되는 이유), 또는 첨부 자료 부탁드려도 될까요?ㅠㅠ
-
해결됨디자인 시스템 with 피그마
다른 파일에서 피그마 토큰 사용 문의드립니다
안녕하세요 선생님한가지 더 문의사항이 있어 질문 드립니다.디자인 시스템 파일과 디자인 UI 파일을 각각 다른 파일에서 만들었는데요그래서 디자인 UI 파일을 만들 때 디자인 시스템 라이브러리를 불러와서 사용했습니다그런데 문제가 디자인 시스템 라이브러리에서 컴포넌트에 색상 토큰값이 매겨진 채로 다른 파일에서 에셋 인스턴스로 불러오게 될 경우, 다른 파일에서 피그마 토큰 플러그인으로 각각 라이트. 다크 모드를 적용하면 인스턴스로 불러 온 요소들은 연동이 안된다는 점 입니다.결국 다른 파일에서 피그마 토큰 플러그인 실행 후 디자인 시스템쪽에 적용했던 json코드를 불러 온 다음, 이를 Create stylees해서 local에 불러와 일일히 적용 -> 인스턴스로 불러 온 컴포넌트들도 또 다시 색상 값을 매겨야됨 이런식으로 두번씩 작업해야 되는게 맞는건가요?애초에 디자인 시스템 파일과 디자인 파일을 각각 나누면 안되는건지 연동되게 할 방법이 없는건지 문의드립니다.확인 부탁드립니다.감사합니다.
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
브랜드컬러, 시스템컬러 정의 방법 궁금합니다!
브랜드 컬러, 시스템 컬러 정의 관련 질문 있습니다!컬러 스타일을 등록하기 전에 브랜드 컬러와 시스템 컬러 색을 정하는 부분이 어렵게 느껴집니다! 브랜드 컬러와 시스템 컬러를 정하는 노하우를가 있을까요?브랜드 컬러는 기존 로고 컬러 톤이 어두워서 웹에서만 채도를 조절해서 좀 더 밝게 정했는데요! 어느 정도까지 조절할지 기준을 정하거나, 시스템 컬러를 같이 도출하는 과정이 아직 어렵습니다ㅠㅠ강사님의 조언 부탁드립니다!
-
미해결모바일 웹 퍼블리싱 포트폴리오 with Figma
제이쿼리 load 메서드 포트폴리오 연결 질문
안녕하세요 선생님! 개인 포트폴리오 홈페이지 만들다 궁금한 점이 있어 여쭤봅니다 :)해당 강의에서 만든 작업물을 변형하여 개인 포트폴리오 홈페이지에 넣으려고 하는데Header랑 GNB 부분을 제이쿼리 load 메서드로 연결해서 그런지a태그로 모바일 웹 작업물을 연결하면 Header랑 GNB 부분이안 뜨더라구요ㅜㅜ혹시 이런 경우에는 어떻게 하면 되는 걸까요?항상 알차고 좋은 강의 감사합니다!
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
섹션11 예제 링크
섹션11 예제 링크 걸어주신 두가지 중에두번째 '라이브러리 관련 예제' 링크 들어가서duplicate to your drafts 눌러서 새창 열었는데요첫번째 '스타일 및 콤포넌트 예제' 링크 자료가 나와요 ㅠㅠ
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
강의 자료 스타일 가이드(타이포그래피) 관련 문의
안녕하세요, 강의자료에서 스타일 가이드 > 타이포그래피 관련하여 질문드립니다!! 실무 경험이 부족하다보니 신입, 1인 디자이너로 반응형 웹 리뉴얼 진행 중에 스타일 가이드 제작이 쉽지 않아서요~ 강사님께서 만드신 타이포그래피 가이드를 그대로 실무에 적용해도 괜찮을지 궁금합니다!! 실무에서 많이 쓰는 타이포 그래피 사이즈인지 궁금합니다! 도움 부탁 드립니다!!
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
피그마 에듀케이션 계정 신청 관련
안녕하세요, 강의 자료에서 알려주신 피그마 에듀케이션 계정 신청이 이제는 안되는 것인지 궁금합니다. 알려주신 가이드 대로 했는데요, 학생 이메일이 아니라서 그런지 신청 버튼을 누르면 계속 초기화돼서 신청이 안 됩니다 ㅠㅠ
-
미해결모바일 웹 퍼블리싱 포트폴리오 with Figma
상품 상세페이지 아코디언 부분
/* Goods Accordion */ $('.goods-accordion .detail').eq(0).show() $('.goods-accordion .title').click(function(){ $(this).toggleClass('active') $(this).next().toggle() $(this).siblings('.goods-accordion .title').removeClass('active') })상품문의에 클레스가 들어가서 상품후기에 있는 엑티브가 빠졌는데상품문의 밑에 디테일은 안접혀졌어요 (영상강의캡쳐)이렇게 적을경우에 .title부분은 class가 빠져서 시블링이 되는데 .detail 부분은 접었다 펴는 토글이라서 계속클릭하면 .title +,- 와 .detail의 이미지가 안맞는데 이런경우에는 어떻게 하나요 ㅠ?