173만명의 커뮤니티!! 함께 토론해봐요.
미해결
[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
볼드님 강의에서 디자인시스템 구축 내용이 총망라되어있어서 너무 큰 도움이 되었습니다. 정성스러운 수강평을 올려보았는데 노션파일은 언제쯤 받아볼 수 있을까요.
미해결
[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
안녕하세요. 강사님의 강의 보면서 스타일도 추가하고 스타일에 추가한 것들을 베리어블에 옮기는 작업을 하고 있습니다. 궁금한 점은.. 스타일에 굳이 추가하지 않고 바로 베리어블에 콜렉션을 추가해서 신규 베리어블을 추가하는 방법을 쓰는 방법도 있을 것 같거든요. 그런데 머티리얼 디자인이나 애플 디자인 시스템 피그마 파일을 열어보면 베리어블에 콜렉션이 있고, 오른쪽 스타일 패널에서도 스타일을 추가한 것을 볼 수가 있어요.. 어차피 베리어블 한가지만 쓸텐데 왜 스타일도 추가가 되어있는지 궁금합니다
미해결
[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
안녕하세요 강의를 듣다가 line-height 부분에 대해 궁금한 점이 있어서 글을 남깁니다. 수업에서는 PX의 값을 사용하였는데 혹시 %로 작업할 수 있는 방법은 없는것일까요? 피그마에서는 원래 어쩔 수 없는 사항일까요? 폰트 종류마다 leading 값이 제각각이라 어떤건 같은 사이즈인 24 이더라도 line-height 값을 26을 주면 다른 결과물이 나오더라고요 퍼블리셔 분께서 line-height: 1.5; 와 같은 값으로 하면 폰트에 상관없이 균등하다고 하시는데 저 값을 입력하면 PX로 인식을 해서 안되던데 방법이 없는지 궁금합니다.
미해결
[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
브랜드 구조와 모드를 활용한 통합 브랜드 구현하기 이 부분도 강의 파일이 없어요 ㅠ_ㅠ
미해결
[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
다크모드 수업에서 사용하는 피그마 파일은 뭔가욤? 수업에 나오는 페이지를 찾을수가 없어요 ㅠ_ㅠ
미해결
[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
image aspect ratio 이거 관련된 플러그인이 없어진거 같은데 그래서 강의 내용대로 만들기 힘듭니다 ㅠ_ㅠ 이부분은 강의 다시 업데이트 안될까요?
미해결
[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요. 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변 드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크 를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문 이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기 로 인프런 쪽으로 연락 주시기 바랍니다.
미해결
[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
안녕하세요. 피그마에서 아이콘이 있는 버튼을 만드는데 어려움이 있어 문의드립니다. 내용과 함께 gif를 첨부드렸는데 같이 확인부탁드립니다. 아이콘 사이즈 : 24 / 20px 버튼 사이즈 : default / X-small 아이콘 : Leading(앞) / Tralling(뒤) Instant swap property를 한후, ->Leading icon , ->Trailing icon을 사용하고 싶은데요. 아이콘 사이즈도 자동으로 사이즈별로 관리하려면 어떻게 해야할까요? 아이콘 Instant swap property를 하고나면, 사이즈가 하나로만 인식을 하는지 전체 사이즈가 변경되는 현상이 있습니다. 사이즈별로 연동되지 않고 전체가 같이 바뀌는 현상이 있습니다 (* 아래 처럼 20px 작은아이콘 영역을 Instant swap property 하면 24px로 커지게 됩니다. 사이즈에서 설정을 바꾸면 기존에 큰 사이즈도 똑같이 따라가고 있습니다.) 두개의 아이콘 사이즈를 각각 다르게 설정하는 방법을 찾고있는데 혹시 좋은 방법 있으시면 알려주시면 감사하겠습니다. 잘부탁드립니다. 감사합니다.
미해결
[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
Lock Aspect Ratio 플러그인을 안써서 제 Image Placeholder는 그룹이 안생긴걸까요? 14:22초 처럼 Image placeholder-Dynamic에 붙여넣을 [Place image]나 하위 개념이 없습니다. Frame 새로 만들고 그룹으로 만들고 컴퍼넌트화해서 구조를 비슷하게는 해봤는데 (아래에 두번째 사진첨부)그렇게 하면 되는건지 궁금합니다.
미해결
[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
영상 18:13초에는 Icon Placeholder를 선택해서 Create Instance swap Property를 하게 되어있는데 왜 저는 안뜰까요..?
미해결
[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
우선 좋은 강의 정말 감사합니다. 저는 B2B 회사에서 PM/기획자로 일하고 있는데요 회사 내 디자이너는 없이 기획자와 프론트 엔지니어 협의를 통해서 서비스를 만들고 있습니다. 서비스를 만드는 건 괜찮으나 통일된 UI/UX를 제공하기에는 많이 아쉽다보니 이번에 강의를 듣게 되었어요 디자인 업무를 하진 않았어서 강의를 반복으로 들어야 할 것 같은데요... 강사님이 보시기에...디자이너 없이 디자인 시스템을 회사에 적용하는 것이 가능할까요? 또는 효과적일까요? 강의에서 말씀해주신대로 초기 시간/인력이 투여되지만 해놓으면 확실히 좋을 부분이라서..고민이 좀 되네요 디자이너가 없다면 아무래도..더 시간이 걸릴 것 같은데요 강사님의 의견을 듣고 싶습니다.
미해결
[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
우선 좋은영상 감사드립니다! 제목과 같이 아이콘 등록하는 방법에서 초반에 24 사이즈의 아이콘을 데려왔는데 왜 FrameAll이라는 플러그인을 사용해서 더 작게 만드는지 이유가 궁금합니다~!
해결됨
[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
안녕하세요. 피그마 계정을 인프런 교육용계정으로 승인받아 사용하고 있었습니다. 초반에 너무 짧게 설정을 해서 그런지, 아직 강의를 다 못들었는데 6일이 남았다고 해서요. 혹시 추가 연장이 가능한가요? 확인부탁드립니다. 감사합니다.
미해결
[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
베리어블을 등록해서 개발할려고하는데 플러그인으로 해도 등록한 토큰들이 잡히지 않아요.. 뭐가 문제일까요 ?
미해결
[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
안녕하세요 잘 듣고 있습니다. 37강까지 무리없이 잘 따라와서 듣고 있는데요 2:37 Option에서 Nested instances 부분에 저는 Text 까지 같이 뜨더라고요? 선생님이 체크, 라벨, 라디오 3개만 있는것과는 다르게.. 라벨을 처음 가져 올 때부터 잘못된건지... 아무리 다시 뒤로 돌아가서 따라해봐도 text가 뜨는데 그래서 대한민국~ 치는것부터가 안되네요. 안보여요 label이.. 왜 일까요. 제가 무엇을 놓친걸까요..
미해결
[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
피그마 무료로 프로페셔널 기능을 활용하고 싶어서 노션에 나온 방법대로 했는데 부트캠프관리자에게 문의하라는 페이지가 나왔습니다. 노션에 적힌 것과 다른데 확인 부탁드립니다.
해결됨
[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
Global Navigation 컴포넌트 배리언트가 최종적으로 Device - Desktop, Mobile로 나뉜 것 같은데 64강의에서 Global Navigation에 hamburger menu 토클 버튼이 있는데 어디서 추가 된 건가요??저의 Global Navigation에는 안보여서요! 몇 강에서 알 수 있을까요??
해결됨
[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
탭이나 네이게이션 할때 포커스링이 저런식으로 묻히는데 어떻게 처리해야 할가여? 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변 드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크 를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문 이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기 로 인프런 쪽으로 연락 주시기 바랍니다.
해결됨
[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
쌤 안녕하세요, 아이콘 버튼 제작 (selected) 질문 드립니다! selected 아이콘 버튼은 타입(primary, secondary, destructive), 스타일(filled, outline, transparent), 등 배리언트는 여러개 이지만, 강의에서 selected 는 한 가지만 제작하고, 나머지는 selected false 상태로 배우고 제작해봤습니다만 다른 타입, 스타일의 selected는 제작한 1개로 공통으로 사용해도 되는 건가요? 타입, 스타일에 따라 selected 버튼을 각각 추가로 제작해야하는지 헷갈려서 질문드립니다!! 시멘틱 컬러에서 selected는 한 가지 톤의 컬러만 있어서요~ 나머지 타입, 스타일의 selected 버튼은 추가 제작하지 않아도 되는 것 같은데요~ 아직 디자인 시스템 제작 및 활용이 능숙하지 않아서 헷갈려서 질문드립니다~ 도움 부탁드립니다!! 항상 실무에 유익한 좋은 강의 감사합니다!!
미해결
[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
안녕하세요. 항상 강의 잘 듣고 있습니다! : ) 아이콘 등록하는 방법 강의에 관련하여 질문드립니다. 아이콘이 포함된 버튼의 인터렉션에 색상 반전되는 부분이 있어서 아이콘 강의 들으면서 해결은 했는데 정확한 이유도 함께 이해하고 싶어서 문의드립니다. 강의 17:10 부분입니다. 1. 임의 아이콘 생성 2. Icon placeholder 3. Component 4. Variant 추가 5. Size property : md-24px, sm-16px, lg-32px, xl-40px (Scale 설정) 6. md-24px 아이콘 Instance > Frame > Component 24px 7. Component 40px 생성 8. Component 24px > Instance swap 9. 각각 Instance 생성 10. Icon placeholder 색상을 Instance swap이랑 동일한 색상으로 변경 11. Component 24px 버튼 부분 Primary, 아이콘 부분 Inverse 색상으로 변경 12. Component 24px의 Instance > Reset all changes 13. 그 다음 Instance swap을 해야 색상이 변경됨. Q1. Component 24px 예시에는 icon placeholder의 색상을 맞춰주셨는데 Component 48px 예시에는 왜 직접 success 색상으로 바꿔주셨나요? Override 개념이랑 조금 헷갈리는 것도 있어서 설명 부탁드릴게요. Q2. Icon placeholder는 아이콘 기본 색상으로 맞춰주고 하는 이러한 과정을 위 순서대로 해야하는 이유가 정확히 어떤 이유인지가 궁금합니다. Q3. Icon placeholder에서 나온 아이콘을 각 component 24/48px은 새로운 버튼으로 만든 컴퍼넌트인데 이 관계가 어떻게 되는건지 이해가 안되어서요. Q4. Reset all changes 버튼은 정확히 이 과정에서 어떤 역할일까요? Q5. 이 과정이 없으면 inverse가 적용이 되지 않는다면 Instance swap으로 아이콘을 변경해도 아이콘 색상을 유지하고 싶으면 정확히 Icon placeholder와 Instance swap한 아이콘 색상을 동일하게 맞추고 Inverse로 바꾼 것을 다시 reset하는 일련의 과정이 항상 필요한 것일까요? 잘 부탁드립니다. 감사합니다.
