피그마 컴포넌트의 프로퍼티 200% 활용하기 - 피그마 강좌 2-5
HTML-код
- Опубликовано: 6 фев 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)
프로퍼티 배리언트 쓸때는 특히 size프로퍼티만들때는 컴포넌트화 시키기 전에 오토레이아웃을 꼭 걸고 만들기....
- 4:20 이름을 on/off로 지정하면 자동으로 토글로 인식하는 킹그마
- 9:55 텍스트 프로퍼티에서 동시에 변경하고싶을땐 이렇게
질문 몇가지 드립니다...
1. 혹시 4:45에 '텍스트' 컴포넌트는 어떻게 만드신걸까요? 요소를 뜯어보니 텍스트+rectangle 두개로만 만드셨던데 어떻게 투명한 네모 영역이 텍스트 영역 위에 까지 잡혀있는지 궁금합니다
2. 8:25부터 오른쪽 패널?부분이 다르게 나옵니다. 인스턴트스왑으로 연결하는 부분부터 안되네요...ㅠㅠ 왜그럴까요? 제가 따로 컴포넌트 만들어서 적용하니까 되긴하네요..!
알고 싶었던 부분을 이렇게 짧은 시간 내에 쉽게 알려주시다니, 너무너무 잘 봤습니다! 다음 강의로..
감사합니다~!ㅎㅎ
피그마 최신화 강의 필요했는데, 나이스 타이밍 입니다😄
감사합니다~!ㅎㅎ
큰 도움이 되었습니다. 웹.앱 제작을 직접해보고 있는데 많은 도움이 되고 있습니다. 감사합니다.
감사합니다ㅎㅎ
좋은 강의 감사합니다! 이해가 잘 되네요
감사합니다~!
이 시리즈 너무 유익합니다👏👏
🙏👍
8:28 인스턴스 스왑에서 그 이전단계까지 다 잘 적용시켰는데 페어런트 컴포넌트 밑에 인스턴스 스왑을 연결할 인스턴스 메뉴가 아예 안뜨네요.. 왜 안뜨는지 참..
그리고 예제 파일 올려주실때 초기화해서 올려주시면 좋을것 같습니다. 강의가 끝난 상태의 예제 파일이어서 유튜브를 따라가면서 하는게 아니라 강의를 듣다가 초기화하고 다시 처음부터 따라가게 되어 있네요..
초기화 버전으로 다시 정리해보겠습니다.
안녕하세요 영상 잘보고 있는데요! 질문이 있어 댓글남깁니다~초반에 '+확인"버튼 컴포넌츠만들고 프로퍼티 적용하고 여러경우의 수 관리에서 '+'가 없는 것을 확인했는데요. 이 부분도 프로퍼티가 적용된건가요? 그리고 불린으로 적용된거라면 아이콘이 인스탄스 말고는 불린이 따로 만들어지지 않는데 해결하는법이 있을까요?
안녕하세요. 댓글을 놓쳐서 답변이 늦었습니다..ㅠㅠ 혹시 무료 플랜 사용중이신가요?
우측 Layer칸이 어디 있나요? 불리언에서 버튼과 프로퍼티 연결을 Layer에서 하라고 하시는데 이걸 못해 진도를 못나가네요...ㅜㅜ
디자인베이스님께서 답변 주셨습니다. Appearance 에 오른쪽에 작은버튼 누르면 됩니다!
7분 30초에 나오는 그래픽들은 어떤 플러그인에서 가져오신 건가요??
2-4에서 배웠던 아이콘 컴포넌트에서 아이콘을 클릭하여 다른 아이콘을 바꾸는 것도 Swap instance 였고, 이번 2-5에서 배운 것도 Swap instance 인데, 그렇다면 2-4에서의 아이콘 또는 이미지를 컴포넌트로 설정하고 아이콘을 클릭하여 바꾸는 것과 이번 2-5는 동일한 것인가요?
안녕하세요! 강의 잘 보고 있습니다!! 저는 오른쪽 패널에 Layer창이 안 뜨는데 무료 버전이라 그런 걸까요..?
스왑인스턴스 부분을 따라할 수가 없습니다. 혹시 다른 예제를 만들어 주실 순 없으신지요? 아니면 다른분 말처럼 초기화를 시켜놓은 상태에서 파일을 주셔야 무리없이 따라 할 수 있을것 같아요.
안녕하세요. 초기화 상태로 수정해서 파일을 전달드리겠습니다~!
8:28 인스턴스 영역이랑 연결하는 아이콘이 왜 안 뜨는지 모르겠어요ㅠㅠ 몇 번 다시 해봤는데 안 떠서.. 도와주세요🫠🫠
안녕하세요. 인스턴스 스왑 연결시 그냥 레이어 혹은 프레임 선택하시면 안되고, 연결하고자 하는 인스턴스 컴포넌트를 불러온 후에 사용하셔야 합니다!ㅎㅎ 예를 들어, 그냥 graphic이 있던 Frame은 삭제하고, 음식 컴포넌트 중 임의로 인스턴스 컴포넌트를 불러와서 연결해야 합니다.,
@@designbase 답변주셔서 감사합니다!! 사실 아직도 헤매는 중인데ㅎㅎㅎ 다음번에 다시 한 번 들으면서 해볼게요~!
불리언에서 해당 요소를 레이어 우측에서 연결하려고 하는데 우측에 Layer 이라는 부분이 안뜨는데 어디에 숨어있는 걸까요? ㅠㅠ
풀스택 디자이너 구독자입니다!...그런데 피그마 UI3 에선 인스턴스 연결 방법을 찾기가 너무 어렵네요 ㅠㅠ
그사이에 UI3에서 많이 바뀌었습니다..ㅠㅠ 조만간 UI3 업데이트 강좌 만들게요!
boolean으로 우측버튼을 끄면 팔로우 버튼이 사라지면서 이름과 이메일이 가운데 정렬되는데 이건 왜 그런걸까요..?
저도 똑같네요...왜 그런지 아시나요?
인스턴스 스왑부분으로 연결할 때 오른쪽 패널이 달라서 안나와요 ㅜㅜ 어떻게 해야할까요?
안녕하세요. UI3 버전으로 하고계신가요? 그리고, 인스턴스 스왑을 연결할 때는 인스턴스 컴포넌트를 사용한 레이어를 선택해야 연결됩니다.
스왑 인스턴스 할 때 임의로 이름 지정해도 (ex. 음식 사진) 알아듣나 보네요
네 맞습니다~! 속성값을 정하는 것이라서 해당 컴포넌트에 적합한 이름을 작성하면 됩니다.