묻고 답해요
167만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
배리어블 Value에 관해 질문있습니다.
강의를 보면서 뇌를 비우고 따라 만들다보니 어느순간 궁금증이 생겼는데, style의 경우는크기,행간,자간등을 입력해 놓고 입력된 텍스트를 style로 만들면 되는거니까 상관이없는데배리어블의 경우엔 name을 붙히고 value에다가 값만 썼는데 그 값이 자동으로 연결되는건가요? 완성된 데이터를 넣질 않았는데 피그마가 자동으로 인식하는건가요? 어떤식으로 물어봐야될지 몰라서, 두서가 없는점 죄송합니다. 폰트 패밀리로 다시 여쭤보자면name은 제가 임의로 붙히는거니까 상관이없고문제는 value입니다. inter라는 텍스트 파일을 따로 넣지를 않고 단순 텍스트로만 Inter라고 적었는데 피그마프로그램에서 알아서 찾아서 연결지어주는지가 궁금합니다. 만약 그렇다고 한다면텍스트 이름을 대소문자, 띄어쓰기를 유의하면서 적어야할까요?
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
Body>font weight 에서 semibold에 짝대기가 생기는 이유?
semibold에 짝대기가 생겼는데 연결이 깨졌다는 의미일까요? 짝대기가 없어지려면 어떻게 해야하나요?
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
Navigation Mobile 토글 베리어블이 안됩니당
Navigation Mobile 베리어블 만들었는데 오른쪽 위 옵션에 안떠요..그리구 Appearance의 눈모양 우클릭하면 거기에는 Navigation Mobile 옵션을 선택할 수 있는데 그걸로 설정하면 네비가 랩탑일때는 꺼지고 모바일일때는 보이는 방식으로 설정이 돼요영상과 같이 랩탑모드로 하면 랩탑네비로 모바일일때는 모바일네비로 프레임 모드 클릭 한번에 바뀌게 하는 방법을 모르겠어요ㅠ.ㅠ
-
해결됨사용자 흐름 설계부터 프로토타입 구현까지
24강 상품 상세화면 실습 컨디셔널 질문
안녕하세요, 24강 컨디셔널 설정 중 클릭한 라디오 버튼을 true로 변경하는 조건문을 강사님께서 아래와 같이 별도로 분리하셨는데, 아래 두번째 스크린샷처럼 모든 라디오버튼을 false로 변경하는 조건문 다음에 가장 마지막으로 일어나게끔 포함시켜도 상관 없는걸까요? 감사합니다!
-
해결됨사용자 흐름 설계부터 프로토타입 구현까지
23강 캘린더 화면 실습 강의 2가지 질문
안녕하세요, 23강 배리어블을 활용한 캘린더 화면 실습 강의를 진행하면서 2가지 질문이 있어 글을 올립니다. 프로토타입 오류 질문해당 강의에서 진행한 프로토타입 설정을 모두 동일하게 적용하였는데 아래와 같이 프로토타입을 확인하는 과정에서 의도하지 않은 오류가 지속적으로 나타납니다. 아래는 현재 저의 피그마 프로토타입이 작동하는 것을 보여주는 자료와 제가 피그마 내 설정한 모든 프로토타입 설정 화면들입니다. 혹시 해당 오류를 수정하기 위해서 어떻게 하면 좋을지 알 수 있을까요? 수작업 자동화 질문강사님께서 배리어블을 활용하는 것은 수많은 불필요한 프레임 생성과 같은 수작업을 줄여주기 위함이라고 말씀해주셨습니다. 다만, 만약 해당 캘린더 날짜가 10개가 아니라 30개라면 아무리 배리어블 기능을 사용하더라도 이 또한 번거로운 수작업은 마찬가지로 느껴질 것 같습니다. 이에 따라 요즘 현업에서 AI(예: 클로드코드, 러버블 등)를 활용하여 좀 더 간편하고 빠르게 해당 강의에서 만든 동일한 프로토타입을 구현할 수 있는 다른 방법은 없을까요? 로직은 제가 프롬프트로 지시하되 반복작업은 AI가 대신 진행해줬으면 하는데 가능한 방법이 있을지 궁금합니다. 감사합니다!
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
Typography 모드 적용시 표현된 값과 우측에 표시되는 값다름
따라해보고있는데 Mobile 모드로 했을때 표현되는건 40/48로 잘 적용이 됐는데우측 Typography 창에는 60/68 이라고 뜨고 뜯어봐도 60 / 68 로 등록되어있어요 40/48 이어야되는데왜이럴까요..?
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
디자인 시스템에 그룹명을 숨길 수도 있나요?
안녕하세요! 강의를 수강중 다른 회사의 디자인 시스템은 계층구조를 잘 쓰고 있을까? 궁금해서 피그마에 원티드 디자인 시스템을 살펴보았는데요아무레이어를 만든 후 semantic이라는걸 보고 계층구조를 쓰고 있는건가? 해서 배리어블 창을 여니까semantic이라는 그룹명이 보이지가 않습니다.. <질문>semantic은 외부 라이브러리의 잔여물인건지 아니면 숨길 수가 있는건지 궁금합니다.이 회사의 게층 구조는atomic(강의의 primitive)theme(theme,semantic) 이런 2구조 인지 궁금합니다.component와 frame은 role이지만 따로 포함하기엔 복잡해도 예외로 빼둔 걸까요?semantic의 역할이 궁금합니다!primitive는 재료, theme는 브랜드 스타일, 컨셉이면 semantic은 강의 내용에서는 라이트모드, 다크모드라 되어있지만 text,bg,icon등 전부를 포괄하는 ui 요소라고 봐도 될까요?
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
디자인 시스템 네이밍에 관한 질문드립니다.
네이밍 순서에서 막혀서 한동안 수강하지않다가 다시 마음다잡고 처음부터 보고 있는 수강생입니다.1. 첫번째 질문입니다.여기부분에서 Namespace - Object - Base - Modifier의 구성요소랑 내용이 머리속에 입력이안되어서 종이에 써가면서 맥락을 파악했는데요. 그다음 설명에서위에 해당 이미지가 뜨면서 "외계어이지만 이제는 좀더 이해가하기 쉬울 것"이라고 말씀해주셨는데 혼란스럽습니다. 1.system(namespace) : p2. Base(category) : color3. Base(property) : bg4. Role : interactive 갑자기 롤이 왜나오는지?5. Modifier(Variant): subdeued6. Modifier(State) : hover앞선 강의내용대로 맥락을 파악했으나 뜬금없이Role나와서 이해가 되지 않습니다.. 그리고 2번째 질문입니다.배리어블 계층 구조가 뭔지 모르겠습니다. "Raw value - Primitive - Theme - Semantic" 이런 계층 구조가 디자인 시스템 이름 짓는 순서에 연관되는건지 폴더별 분류를 할때 쓰는건지 무언가 정리되지 않아서 혼란스럽습니다.
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
next step?
현직 디자이너이지만, 여기서 정말 많은 걸 배우고 큰 도움이 되고 있어요. 혹시 시스템 디자이너와 엔지니어의 협업 방식, 그리고 프로덕트 디자인을 피그마에서 어떻게 핸드오버하는지에 대한 수업도 만들어주실 수 있을까요? 그런 내용이 있다면 정말 도움이 많이 될 것 같아요. 이렇게 잘 만들어진 시스템을 이용한 디자인 페이지를 데브들이 어떻게 사용하고, 디자이너가 어떻게 딜리버리 하는지 궁금하네요
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
16강 Print Variables 출력 질문
안녕하세요. 수업 재미있게 잘 듣고 있습니다!!16강 마무리부분에서 Print Variables에서저는 강사님과 조금 다른 아웃풋이 나와서옵션을 조절해보려고 해도 그런 부분이 없더라구요.이 부분은 큰 문제 아닐것 같은데Varibales 세팅에서 제가 뭔가 잘못해서 이렇게 나오는 건 아닌지 궁금해서 질문 남깁니다 ^^감사합니다 .
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
open in Figma 누르고 ui kit 다운?받았을 때
25강에서 피그마 커뮤니티에서 open in Figma 누르고 다운받고 Drafts 가면 썸네일로 표시되는게 안에 color 페이지 이미지와 Icons 페이지 이미지 들로 나오는데 강의에서 나오는 썸네일 이미지로는 안뜨는데 왜 그런걸까요?
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
variables 이름 지을때 소문자,대문자 사용에 관해..
19:51 에 italic 등록 할 때 Name은 소문자로 시작하고 Value는 대문자로 시작하도록 값을 넣으셨는 데 이유가 있나요?bold님 만의 규칙인가요? 아니면 실무에서 보통 그렇게 하는지 궁금합니다.
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
디자인 시스템 네이밍 순서에 대해 질문남깁니다!
섹션3을 수강중입니다. 강의의 내용은category - property - role - variant - state - scale로 이어지고 vriant안에 primary등이 쓰여집니다.이미지는 대한민국 정부 디자인 시스템의 내용인데여기서 primary는 type이고 쓰는 순서나 역할군도 다른거 같아서 너무 헷갈리는 것 같습니다..네이밍 순서를 어떻게 외워야할지 고민입니다..!
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
이미지 캐러셀 영상
영상 10분 쯔음에 Shift 누르고 뭔가를 두번 누르면 사이간격이 8 이 된다고 하시는데, 뭐를 누르는지 모르겠습니다.
-
해결됨사용자 흐름 설계부터 프로토타입 구현까지
베리어블 에듀 계정
안녕하세요 베리어블 에듀계정을 할려고 하는데 하는 법을 알려주시면 감사하겠습니다. 제가 처음 인트로 강의 때 알려준다 했는데 제가 못찾는건지 하는 방법은 안보이네요
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
아이콘 사이즈 컴포넌트 구성 방식 관련
안녕하세요. 요즘 Figma Variables 강의를 통해 실무에서 많은 도움을 받고 있습니다. 28강 수업을 수강하던 중 질문이 있어 문의드립니다. 아이콘 사이즈 설정 방식과 관련된 내용입니다. 강의에서는 하나의 아이콘을 기준으로 아이콘 플레이스홀더(컴포넌트 영역)를 별도로 구성한 뒤, 4가지 사이즈로 나누어 설정하신 것으로 이해했습니다. 다만 실제 디자인 시스템에서는 아이콘이 아주 많이 구성되어 있다보니, - 모든 아이콘을 각각 동일한 방식으로 개별 컴포넌트화하여 보여주신 것처럼 4가지 이상의 사이즈를 모두 만들어야 하는지,- 아니면 아이콘 전체를 하나의 규칙으로 관리한 뒤, 사이즈만 공통적으로 분리해서 사용하는 방식이 가능한지 어떤 방식으로 접근하는 것이 적절한지 판단이 어려워 질문드립니다. 디자인 시스템 관점에서 권장되는 구조나 설정 방식이 있다면 안내해주시면 감사하겠습니다. 감사합니다.
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
완강/리뷰 이벤트 후 강의자료
우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요. 안녕하세요!완강 후 리뷰 이벤트까지 하였는데 강의 자료는 어떻게 받을 수 있나요?pmr7348@naver.com 메일 공유드립니다.회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기로 인프런 쪽으로 연락 주시기 바랍니다.
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
Stack 컴포넌트 관련하여 궁금한 점이 있습니다.
Stack 컴포넌트 관련하여 궁금한 점이 있습니다.해당 컴포넌트의 실용성은 '다양한 화면에서 동일한 간격으로 컴포넌트를 사용할 수 있다' 정도일까요?더한다면, 추후 사용하는 Slot 컴포넌트를 활용하기 위함일 것 같은데 제가 현재 Slot 컴포넌트는 활용하고 있지 않아서..궁금한 점이, 만약 버튼의 간격같은 것을 토큰화하여 해당 토큰으로만 사용을 한다면, 버튼 스택 컴포넌트의 활용도가 다소 떨어지게되는 것이 아닌가? 하는 생각에서 볼드 선생님의 의견이 궁금합니다Stack 형태로 여러 컴포넌트를 활용하는 라이브러리들을 봤지만, 결국에는 적절한 수만큼 자유롭게 늘리는것이 어려워서, 처음에는 2개만 쌓아놨다가, 3개, 4개, 드롭다운 메뉴 등에서는 10개 20개까지 늘려버리는 경우를 종종 본 터라, 어떻게 생각하시는지 궁금합니다.
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
컴포넌트별 베리어블 구축
해당 강의를 듣고 실무에 적용을 해보려고 하고있는데, 진행할수록 단순히color/bg/interacitve/primary와 같은 버튼과 체크박스 등 다양한 곳에 적용할 수 있는 통합(?) 배리어블보다는color/FAB/bg/primary 와 같이 특정 컴포넌트를 위한 배리어블로 세분화를 해야할까? 하는 생각이 종종 들게됩니다예를들어, 일반 CTA버튼(파란색)에서는 color/bg/interacitve/primary와 같은 범용 배리어블을 적용했을 때 문제가 없지만,세그먼트 버튼같은 회색 박스 안에 있는 흰색 버튼에는 해당 배리어블을 활용할 수가 없겠는데..? 하는 생각이 들면서요. 그래서 결국 디자인 라이브러리가 발전하고 배리어블이 성숙해 나가면서부터는 컴포넌트별로 배리어블이 다양해지겠다는 생각이 드는데이에 대해서 어떻게 생각하시는지, 필연적이라고 생각하시는지, 주의할 부분은 없을지 궁금합니다...!
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
인풋 텍스트필드에서는 왜 'interactive/bg' 배리어블을 활용하지 않는 것인가요?
버튼과 같이 '클릭' 액션이 있는 인터랙티브한 부분에는 bg/interactive 그룹에 있는 컬러를 사용하는 것으로 이해하고있는데Text field의 bg는 그냥 일반형 컬러를 사용하는 것으로 보입니다. 강의상에서 빠른 제작을 위해 시적 허용...? 을 하신 것이죠?실제 현업에서 사용할때는 interactive 컬러와 일반 컬러를 구분해서 사용해줘야할 것 같다는 생각이 드는데, 이것은 제 일차적인 생각이고interactive라는 그룹을 색상 자체가 변동되는 (Hover, Press 액션이 있는) 컬러들의 그룹이라고 가정하면, 해당 텍스트 필드에서는 배경의 변화가 없으니 interactive가 아닌 컬러그룹을 사용하신 것인가? 라는 생각도 듭니다.물론 정답은 없겠고, 사용하려는 방향과 정책에 따라 다들 다르겠지만 강의에서는 어떤 의도로 사용하셨는지가 궁금합니다