피그마 컴포넌트 완전 마스터하기 - 피그마 강좌 2-4
HTML-код
- Опубликовано: 5 фев 2025
- 이번시간에는 피그마에서 가장 중요하게 생각하는 컴포넌트에 대해서 배워보도록할게요.
UI 디자인 작업 특성상 유지보수를 위한 잦은 수정이 필요하죠. 그렇기에 꼭 컴포넌트 기능을 알아야합니다. 다양한 예시를 다뤄보면서 컴포넌트 기능을 익혀볼게요
#피그마 #figma #ui #디자인 #컴포넌트 #components
❤️🔥 피그마 UI 템플릿 180종+ : buly.kr/90Zu8sc
🚀 멤버십 가입 : / @designbase
🔥 디자인베이스 웹사이트 : designbase.co.kr/
🔥 인스타그램 : / designbasekorea
🔥 이메일 문의 : designbasekorea@gmail.com
🔥 카카오 오픈채팅방 : open.kakao.com... (참여코드 : dgoing12)
![finance UXUI design confirmation [Figma]](/img/1.gif)
- 1:19 비어있는 사각형은 인스턴스 컴포넌트라는 뜻, 다이아몬드 네개가 꽉차있는건 마스터 컴포넌트
- 컴포넌트는 마스터를 변경했을때만 인스턴스에 일괄 적용 된다
- 2:00 인스턴스 값을 조정하면 아무리 마스터를 조정해도 인스턴트에 수정된 값이 우선적으로 적용됨. 마스터 기준으로 되돌리는 법은 2:11
- 2:38 인스턴트 detach하는법 (ctrl + alt + B)
- ⭐⭐4:18 컴포넌트 자산화. 이걸 하려면 기본적으로 컴포넌트이름+상태가 설정되어 있어야함 ⭐
- 4:53 아이콘 같이 많은양의 컴포넌트 한번에 등록하는법 !!!!!!
- 5:20 인스턴스 아이콘 재빠르게 전환하는법 ⭐ 외우자..
- 5:32 컴포넌트 안에 컴포넌트 만들기
- 9:22 텍스트 넘칠때 표기법
한가지 질문이 있습니다 7:30에서 하시는 대로 액티브>디폴트 바꾸는데 이렇게 프로퍼티를 바꿀때 마다 자꾸 아이콘과 텍스트의 정렬이 틀어집니다. 마스터를 건드린것도 아닌데 자꾸 틀어지고 ctrl+Z해도 상태가 복원이 안됩니다.. 이거 왜이러나요? 그냥 하라는 대로만 따라했고 다른 설정은 안건드렸습니다 ㅠ SF pro폰트가 없어서 그런가요?
해당 폰트가 없는 경우에 그런 틀어짐 오류가 종종 발생합니다..! 폰트 설치 혹은 변경해서 해보시겠어요??
네 제가가지고있는 폰트로 하니까 괜찮더라구요! SF Pro가 iOS 전용폰트로 알고있는데.. 다운이되나요?! 제가찾았을때는 없었어서요..!
한글더미 플러그인 미이이이쳤다.... 제작해주셔서 감사합니다..🤍 영상도 이해하기 쉬워서 재밌게 잘 따라했어요 감사합니다 :)
안녕하세요! 질문 있습니다. 카드 UI를 컴포넌트화 시켰을 때, 그 안의 이미지를 unsplash 플러그인으로 손쉽게 바꾸는 경우도 있지만, 이미지를 직접 만들어서 그 안에 넣어야 하는 경우 혹은 unsplash를 썼으나 해당 이미지의 크기를 조정하여 해당 카드에 넣을 경우는 어떻게 컴포넌트에서 이미지를 변경할 수 있을까요? 인스턴스 하는 방법밖에 없는지 궁금합니다..!! 🥹
피그마를 접한지 며칠 안됐는데 참 좋은 영상을 이렇게 볼 수 있다니 감사합니다
혹시 5:50 에서 icon 24*24 위에 icon button 이라는 44*44 frame을 한번더 쌓으신 이유가 있을까요? 그부분이 이해가 조금 안되어서 asset화 한 다른 컴포넌트로 대체할 때 44*44 frame을 선택해서 해야하는 지 24*24의 frame을 선택해서 대체해야하는 지 헷갈렸어서요! (만들어둔 컴포넌트들이 24*24여서 대체할 때도 24*24의 안쪽 프레임을 선택했긴 했습니다만, 혹시 다른 이유가 있나 해서요!)
혹시 해당 icon 크기자체는 24*24여야하지만, 그 외에 icon이 역할을 할 button의 영역은 최소한의 터치영역이 44*44여야 하는 것까지 생각해서 master component화 하는게 맞아서 그러는 걸까요~?
안녕하세요. 일단 icon button을 24보다 크게 잡은 이유는 사용자 경험 측면에서 실제 터치 영역까지 고려해서 잡은거였습니다. 일반적으로 손가락 끝의 크기를 8~10mm이기 때문에 24로 하면 문제가 됩니다.
그리고 44x44는 ios가이드 기준이라서 구글 머티리얼 디자인 가이드인 48x48로 해도 괜찮습니다~!
네 맞습니다!
예제 파일이 초기 셋팅 된게 아니고 이미 강의 하시면서 완료된 상태라서 영상 보고 따라 하기가 너무 힘드네요.
초기값으로 셋팅된 예제 파일을 제공해주시면 좋겠습니다.
좋은 의견 감사합니다. 나중에 예제 파일 제공할때는 초기값으로 세팅된 상태로 제공하겠습니다~!
@@designbase 이 댓글에 동의합니다, finish 버전과 Start 버전 같이 궁유해주시면 강의 따라가는데 도움 많이 될것같습니다
기존거 그룹을 풀려면 어떻게 해야하나요? 6:10 초
미쳤다 이 정보가 너무 필요했어요
처음 피그마로 프로젝트 만들어보고 있고 아이콘 버튼 어떻게 해야하나 하나하나 다 바꿔야 하나 했는데 너무너무 감사합니다 도움이 많이 되었어요
말씀하신데로 프로펄티 만드는데 저는 왜인지 목록으로만 뜨고 아이콘 하나하나가 뜨지 않아서 당황스러운데 다음 강의로 프로퍼티 알려주신다니까 다음 영상 보러가겠습니다. 6:09 에서 복사해온 아이콘을 넣었더니 그룹화가 되어서 그룹 해제를 시켜주시던데 제가 넣었을 때는 그냥 원래 만들어두었던 더미도형 위에추가로 쌓이기만 하더라구요 어떻게 이뤄지는 과정인건지 정확히 모르겠습니다 좋은 강의 너무 감사합니다!
안녕하세요. 남겨주신 질문을 완전히 이해하지 못했는데.. 메인 컴포넌트를 제작 후 인스턴스로 불러와서 우측 네비게이션에 넣을 수 있습니다. 그리고, 이미 컴포넌트화가 되어있는 상태에서 메인 컴포넌트 내에 불필요한 Frame을 ungroup을 해준것입니다.ㅎㅎ
디자인 베이스님 답변 부탁드립니다 ㅠㅠ 6분 8초에서 10초까지 내용에서 갑자기 그룹을 풀고 동그라미가 아닌 검색 아이콘이 들어가는 과정을 모르겠습니다 저는 원을 삭제하고 레이어로 하트의 위치를 조정했습니다 디자인 베이스님의 의도가 궁금합니다!
무료로 항상 좋은 영상 공유주셔서 너무 감사드립니다! ㅎㅎ
좋게 봐주셔서 감사합니다ㅎㅎ!
질문있습니다! 글자를 바꾸려고 하면 폰트미씽이 뜹니다. 인스톨러를 설치했는데 해당 폰트가 없어서 그런거 같아요.
폰트를 어떤 것들 사용하셨는지 모르는데 일일히 다 받아야하나요? 아니면 어디에 받게 해놓으신 걸까요..?
답변주시면 감사하겠습니다ㅠ
안녕하세요. 폰트 같은 경우는 해당 폰트를 설치하시거나 기존에 있던 폰트를 받으시면 됩니다! SF Pro나 noto sans, pretendard 이런식으로 검색해서 설치해주시면 됩니다ㅎㅎ
강의 넘 좋아요 감사합니다!
감사합니다~!ㅎㅎ
피그마 UI가 바뀐건가요? 기본 창 배치자체가 달라서 따라할수가 없네요 ㅠㅠㅠ 에셋누르면 내 컴포넌트가 안나오고..
예제 파일이 완성된 파일이라 따라가기가 어렵습니다.. ㅠ 7개월 전에 이미 드린 피드백이 있는 거 같으나 혹시 예제 파일 수정 후 올려주실 수는 없으실까요??
빠른 대응하지 못한점 죄송합니다..! 휴가중이라 확인이 늦었습니다. 빠른 시일 내에 예제 파일 수정 후 업로드하겠습니다!
@ ㅠㅠㅜ감사합니다 !!
아니 적용되는걸 보여줘야지;;