173만명의 커뮤니티!! 함께 토론해봐요.
미해결
Figma MCP × AI x Vibe Coding 4시간만에 완성하는 반응형 웹포트폴리오
안녕하세요. 첨부해주신 Figma 파일을 복사해서 제 피그마로 가져온 후, 배리어블이 잘 나오는지 보기 위해 클릭했는데요. 선생님 화면에는 윈도우 상단에 responsive-more options가 보이는데, 제 화면에서는 타이틀이 variables이고, more options 버튼이 없습니다. 설정된 배리어블 값을 어떻게 불러올수 있나요?
미해결
Figma MCP × AI x Vibe Coding 4시간만에 완성하는 반응형 웹포트폴리오
안녕하세요. 배리어블 작성법 관련하여 궁금한 점이 있습니다. 강의에서는 모든 컴포넌트에 대하여 배리어블 값을 쪼개서 등록하는것으로 이해하였는데요. 토큰에 대해 리서치 했을 때, Primitive와 Semantic을 따로 활용하라는 권장도 있었어서 실무에서 어떻게 쓰는게 좋은지 궁금합니다. 예시 상황 : Component의 상단 Padding이 20, 하단 Padding이 10일 경우 -> TypeA (현재 강의안) : margin-top-section 20, margin-top-bottom 10으로 각각 등록 -> TypeB : Primitive로 padding 20px, 10px으로 등록 후 margin-top-section-> padding 20px margin-bottom-section -> padding 10px
미해결
피그마 시작하기
아이콘 하트 클릭 후 오른쪽 패널에서 인스턴스 스왑을 하려고 하는데 강의에서 나오는 것처럼 인스턴스 스왑 아이콘이 오른쪽 패널에 보이지가 않습니다. 해결 방법 알려주세요
해결됨
디자인 시스템 with 피그마
네이티브에 등록된 borderTransparent를 토큰플러그인에 라이트/다크모드에 이중 등록이 안되고, 둘중 하나에만 등록이 됩니다. 어떻게하면 되나요? https://www.figma.com/design/sNZYxS6FzfkmvAHKOxm6rD/%E2%9D%96-Uber--Started-?node-id=41-558&t=KCo6yU95fQT5nFgL-1
해결됨
디자인 시스템 with 피그마
해결되었습니다.
미해결
[2024 업데이트] UX/UI 시작하기 : Figma 입문 (Inflearn Original)
저는 선생님처럼 왜 아래 말풍선이 안보일까요..ㅠㅠ 제 프레임 말풍선 아래(안보임) 선생님 프레임 아래 말풍선(보임)
미해결
[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
강의를 보면서 뇌를 비우고 따라 만들다보니 어느순간 궁금증이 생겼는데, style의 경우는 크기,행간,자간등을 입력해 놓고 입력된 텍스트를 style로 만들면 되는거니까 상관이없는데 배리어블의 경우엔 name을 붙히고 value에다가 값만 썼는데 그 값이 자동으로 연결되는건가요? 완성된 데이터를 넣질 않았는데 피그마가 자동으로 인식하는건가요? 어떤식으로 물어봐야될지 몰라서, 두서가 없는점 죄송합니다. 폰트 패밀리로 다시 여쭤보자면 name은 제가 임의로 붙히는거니까 상관이없고 문제는 value입니다. inter라는 텍스트 파일을 따로 넣지를 않고 단순 텍스트로만 Inter라고 적었는데 피그마프로그램에서 알아서 찾아서 연결지어주는지가 궁금합니다. 만약 그렇다고 한다면 텍스트 이름을 대소문자, 띄어쓰기를 유의하면서 적어야할까요?
미해결
[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
semibold에 짝대기가 생겼는데 연결이 깨졌다는 의미일까요? 짝대기가 없어지려면 어떻게 해야하나요?
미해결
[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
Navigation Mobile 베리어블 만들었는데 오른쪽 위 옵션에 안떠요.. 그리구 Appearance의 눈모양 우클릭하면 거기에는 Navigation Mobile 옵션을 선택할 수 있는데 그걸로 설정하면 네비가 랩탑일때는 꺼지고 모바일일때는 보이는 방식으로 설정이 돼요 영상과 같이 랩탑모드로 하면 랩탑네비로 모바일일때는 모바일네비로 프레임 모드 클릭 한번에 바뀌게 하는 방법을 모르겠어요ㅠ.ㅠ
해결됨
사용자 흐름 설계부터 프로토타입 구현까지
안녕하세요, 24강 컨디셔널 설정 중 클릭한 라디오 버튼을 true로 변경하는 조건문을 강사님께서 아래와 같이 별도로 분리 하셨는데, 아래 두번째 스크린샷처럼 모든 라디오버튼을 false로 변경하는 조건문 다음에 가장 마지막으로 일어나게끔 포함 시켜도 상관 없는걸까요? 감사합니다!
미해결
피그마 시작하기
실습 파일은 어디서 다운로드 받을 수 있나요?
해결됨
사용자 흐름 설계부터 프로토타입 구현까지
안녕하세요, 23강 배리어블을 활용한 캘린더 화면 실습 강의 를 진행하면서 2가지 질문 이 있어 글을 올립니다. 프로토타입 오류 질문 해당 강의에서 진행한 프로토타입 설정을 모두 동일하게 적용하였는데 아래와 같이 프로토타입을 확인하는 과정에서 의도하지 않은 오류가 지속적으로 나타납니다. 아래는 현재 저의 피그마 프로토타입이 작동하는 것을 보여주는 자료와 제가 피그마 내 설정한 모든 프로토타입 설정 화면들입니다. 혹시 해당 오류를 수정하기 위해서 어떻게 하면 좋을지 알 수 있을까요? 수작업 자동화 질문 강사님께서 배리어블을 활용하는 것은 수많은 불필요한 프레임 생성과 같은 수작업을 줄여주기 위함 이라고 말씀해주셨습니다. 다만, 만약 해당 캘린더 날짜가 10개가 아니라 30개 라면 아무리 배리어블 기능을 사용하더라도 이 또한 번거로운 수작업은 마찬가지로 느껴질 것 같습니다. 이에 따라 요즘 현업에서 AI(예: 클로드코드, 러버블 등)를 활용하여 좀 더 간편하고 빠르게 해당 강의에서 만든 동일한 프로토타입을 구현할 수 있는 다른 방법 은 없을까요? 로직은 제가 프롬프트로 지시하되 반복작업은 AI가 대신 진행해줬으면 하는데 가능한 방법이 있을지 궁금합니다. 감사합니다!
미해결
[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
따라해보고있는데 Mobile 모드로 했을때 표현되는건 40/48로 잘 적용이 됐는데 우측 Typography 창에는 60/68 이라고 뜨고 뜯어봐도 60 / 68 로 등록되어있어요 40/48 이어야되는데 왜이럴까요..?
해결됨
사용자 흐름 설계부터 프로토타입 구현까지
안녕하세요, 17~20강 관련 강의자료를 PDF로 다운받을 수 있게 정리해주셨는데 혹시 강사님께서 강의에서 직접 활용하신 노션 자료 또한 복제 가능한 버전으로 공유 가능할까요? PDF 버전은 ebook처럼 평소에 바로 참고하기에 좋지만, 노션 형식은 수강생이 Task Flow, User Flow 등을 직접 작성해볼 때 이미 존재하는 템플릿을 활용하면 더욱 편리할 것 같기에 문의드립니다. (현재 제가 직접 Flow를 구성해보고 싶은 프로젝트 프로토타입이 있어서 개인적인 니즈를 위하여 요청드리는 점도 있습니다.) 고려해주신다면 진심으로 감사하겠습니다!
해결됨
Figma MCP × AI x Vibe Coding 4시간만에 완성하는 반응형 웹포트폴리오
25강 javascript를 활용한 인터렉션 구현 내용이 없습니다!
미해결
기초부터 실무까지 제대로 배우는 피그마 UI 디자인 클래스
4월 13일 무언가 업데이트 되었다는데 업데이트 내용은 어디서 확인할 수 있을까요? 인프런 강의 새소식 및 디스코드에 관련 내용이 없길래 질문드립니다.
해결됨
사용자 흐름 설계부터 프로토타입 구현까지
안녕하세요 모멘트 강사님, 먼저 좋은 강의 만들어주셔서 감사합니다! :) 다름이 아니라 6강을 수강하는 와중에 'Scroll To' 액션에 대한 부분 중 'Offset' 수치의 음수와 양수를 선택하는 기준을 어떻게 이해하는게 가장 좋을지 궁금하여 질문 남깁니다. 강의 내에서는 스크롤하고자 하는 두번째 이미지가 상단 메뉴에 가려져 y축 기준으로 120px 내려보이게 하기 위해 y축의 offset 값을 '-120'으로 설정해야한다고 설명해주셨는데, 해당 부분이 직관적으로 이해되지가 않아서 다소 헷갈리는 것 같습니다. 관련 개념을 처음 접한 사람으로서 그동안 피그마 position 값을 y축 기준으로 +수치를 더할수록 아래로 내려간다고 이해하였는데, offset을 설정할 때는 이와 반대의 개념이어서 이에 대해 좀 더 쉽게 이해할 수 있는 방법이 없을까 궁금합니다. 긴 글 읽어주셔서 감사합니다! 🙂
미해결
[2024 업데이트] UX/UI 시작하기 : Figma 입문 (Inflearn Original)
안녕하세요 예제 파일을 다운로드 받았는데 잦은 오류 발생으로 원활한 수업 진행이 되지 않는 상황입니다.가능하시다면 답변에 예제 파일을 기재해주시면 보다 쾌적한 수업 진행이 될 것으로 사료되어 요청드립니다.감사합니다.
미해결
[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) : p 2. Base(category) : color 3. Base(property) : bg 4. Role : interactive 갑자기 롤이 왜나오는지? 5. Modifier(Variant): subdeued 6. Modifier(State) : hover 앞선 강의내용대로 맥락을 파악했으나 뜬금없이 Role나와서 이해가 되지 않습니다.. 그리고 2번째 질문입니다. 배리어블 계층 구조가 뭔지 모르겠습니다. "Raw value - Primitive - Theme - Semantic" 이런 계층 구조가 디자인 시스템 이름 짓는 순서에 연관되는건지 폴더별 분류를 할때 쓰는건지 무언가 정리되지 않아서 혼란스럽습니다.
