피그마 컴포넌트 완전 마스터하기 - 피그마 강좌 2-4
HTML-код
- Опубликовано: 29 апр 2024
- 이번시간에는 피그마에서 가장 중요하게 생각하는 컴포넌트에 대해서 배워보도록할게요.
UI 디자인 작업 특성상 유지보수를 위한 잦은 수정이 필요하죠. 그렇기에 꼭 컴포넌트 기능을 알아야합니다. 다양한 예시를 다뤄보면서 컴포넌트 기능을 익혀볼게요
#피그마 #figma #ui #디자인 #컴포넌트 #components
🚀 디자인베이스 멤버십 가입하면 다양한 고급 강좌와 예제 파일을 받아볼 수 있어요
┗ / @designbase
🌟예제 다운은 멤버십 회원 전용 커뮤니티에 올린 링크에서 받으실 수 있습니다.🌟
*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커멘드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요.
☞ 공식 웹사이트 : designbase.co.kr/
![왜 출산 안 하냐고? 인구소멸 찐 실제 상황 "남녀 한 쌍 결혼에만 평균 3억"- [한눈에 이슈] / KBS 2024.07.09.](http://i.ytimg.com/vi/5Z8aJd8qMNY/mqdefault.jpg)
![Try various ui designs [Figma]](/img/1.gif)
피그마를 접한지 며칠 안됐는데 참 좋은 영상을 이렇게 볼 수 있다니 감사합니다
강의 넘 좋아요 감사합니다!
감사합니다~!ㅎㅎ
질문있습니다! 글자를 바꾸려고 하면 폰트미씽이 뜹니다. 인스톨러를 설치했는데 해당 폰트가 없어서 그런거 같아요.
폰트를 어떤 것들 사용하셨는지 모르는데 일일히 다 받아야하나요? 아니면 어디에 받게 해놓으신 걸까요..?
답변주시면 감사하겠습니다ㅠ
안녕하세요. 폰트 같은 경우는 해당 폰트를 설치하시거나 기존에 있던 폰트를 받으시면 됩니다! SF Pro나 noto sans, pretendard 이런식으로 검색해서 설치해주시면 됩니다ㅎㅎ
예제 파일이 초기 셋팅 된게 아니고 이미 강의 하시면서 완료된 상태라서 영상 보고 따라 하기가 너무 힘드네요.
초기값으로 셋팅된 예제 파일을 제공해주시면 좋겠습니다.
좋은 의견 감사합니다. 나중에 예제 파일 제공할때는 초기값으로 세팅된 상태로 제공하겠습니다~!
혹시 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로 해도 괜찮습니다~!
네 맞습니다!
한가지 질문이 있습니다 7:30에서 하시는 대로 액티브>디폴트 바꾸는데 이렇게 프로퍼티를 바꿀때 마다 자꾸 아이콘과 텍스트의 정렬이 틀어집니다. 마스터를 건드린것도 아닌데 자꾸 틀어지고 ctrl+Z해도 상태가 복원이 안됩니다.. 이거 왜이러나요? 그냥 하라는 대로만 따라했고 다른 설정은 안건드렸습니다 ㅠ SF pro폰트가 없어서 그런가요?
해당 폰트가 없는 경우에 그런 틀어짐 오류가 종종 발생합니다..! 폰트 설치 혹은 변경해서 해보시겠어요??
네 제가가지고있는 폰트로 하니까 괜찮더라구요! SF Pro가 iOS 전용폰트로 알고있는데.. 다운이되나요?! 제가찾았을때는 없었어서요..!
- 1:19 비어있는 사각형은 인스턴스 컴포넌트라는 뜻, 다이아몬드 네개가 꽉차있는건 마스터 컴포넌트
- 컴포넌트는 마스터를 변경했을때만 인스턴스에 일괄 적용 된다
- 2:00 인스턴스 값을 조정하면 아무리 마스터를 조정해도 인스턴트에 수정된 값이 우선적으로 적용됨. 마스터 기준으로 되돌리는 법은 2:11
- 2:38 인스턴트 detach하는법 (ctrl + alt + B)
- ⭐⭐4:18 컴포넌트 자산화. 이걸 하려면 기본적으로 컴포넌트이름+상태가 설정되어 있어야함 ⭐
- 4:53 아이콘 같이 많은양의 컴포넌트 한번에 등록하는법 !!!!!!
- 5:20 인스턴스 아이콘 재빠르게 전환하는법 ⭐ 외우자..
- 5:32 컴포넌트 안에 컴포넌트 만들기
- 9:22 텍스트 넘칠때 표기법