피그마 컴포넌트의 프로퍼티 200% 활용하기 - 피그마 강좌 2-5
HTML-код
- Опубликовано: 29 апр 2024
- 이번시간에는 피그마에서 가장 중요하게 생각하는 컴포넌트에 대해서 배워보도록할게요.
UI 디자인 작업 특성상 유지보수를 위한 잦은 수정이 필요하죠. 그렇기에 꼭 컴포넌트 기능을 알아야합니다. 다양한 예시를 다뤄보면서 컴포넌트 기능을 익혀볼게요
#피그마 #figma #ui #디자인 #컴포넌트 #components
🚀 디자인베이스 멤버십 가입하면 다양한 고급 강좌와 예제 파일을 받아볼 수 있어요
┗ / @designbase
🌟예제 다운은 멤버십 회원 전용 커뮤니티에 올린 링크에서 받으실 수 있습니다.🌟
*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커멘드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요.
☞ 공식 웹사이트 : designbase.co.kr/
좋은 강의 감사합니다! 이해가 잘 되네요
감사합니다~!
이 시리즈 너무 유익합니다👏👏
🙏👍
프로퍼티 배리언트 쓸때는 특히 size프로퍼티만들때는 컴포넌트화 시키기 전에 오토레이아웃을 꼭 걸고 만들기....
- 4:20 이름을 on/off로 지정하면 자동으로 토글로 인식하는 킹그마
- 9:55 텍스트 프로퍼티에서 동시에 변경하고싶을땐 이렇게
피그마 최신화 강의 필요했는데, 나이스 타이밍 입니다😄
감사합니다~!ㅎㅎ
질문 몇가지 드립니다...
1. 혹시 4:45에 '텍스트' 컴포넌트는 어떻게 만드신걸까요? 요소를 뜯어보니 텍스트+rectangle 두개로만 만드셨던데 어떻게 투명한 네모 영역이 텍스트 영역 위에 까지 잡혀있는지 궁금합니다
2. 8:25부터 오른쪽 패널?부분이 다르게 나옵니다. 인스턴트스왑으로 연결하는 부분부터 안되네요...ㅠㅠ 왜그럴까요? 제가 따로 컴포넌트 만들어서 적용하니까 되긴하네요..!
8:28 인스턴스 스왑에서 그 이전단계까지 다 잘 적용시켰는데 페어런트 컴포넌트 밑에 인스턴스 스왑을 연결할 인스턴스 메뉴가 아예 안뜨네요.. 왜 안뜨는지 참..
그리고 예제 파일 올려주실때 초기화해서 올려주시면 좋을것 같습니다. 강의가 끝난 상태의 예제 파일이어서 유튜브를 따라가면서 하는게 아니라 강의를 듣다가 초기화하고 다시 처음부터 따라가게 되어 있네요..
초기화 버전으로 다시 정리해보겠습니다.
안녕하세요 영상 잘보고 있는데요! 질문이 있어 댓글남깁니다~초반에 '+확인"버튼 컴포넌츠만들고 프로퍼티 적용하고 여러경우의 수 관리에서 '+'가 없는 것을 확인했는데요. 이 부분도 프로퍼티가 적용된건가요? 그리고 불린으로 적용된거라면 아이콘이 인스탄스 말고는 불린이 따로 만들어지지 않는데 해결하는법이 있을까요?
안녕하세요. 댓글을 놓쳐서 답변이 늦었습니다..ㅠㅠ 혹시 무료 플랜 사용중이신가요?
인스턴스 스왑부분으로 연결할 때 오른쪽 패널이 달라서 안나와요 ㅜㅜ 어떻게 해야할까요?
안녕하세요. UI3 버전으로 하고계신가요? 그리고, 인스턴스 스왑을 연결할 때는 인스턴스 컴포넌트를 사용한 레이어를 선택해야 연결됩니다.
스왑 인스턴스 할 때 임의로 이름 지정해도 (ex. 음식 사진) 알아듣나 보네요
네 맞습니다~! 속성값을 정하는 것이라서 해당 컴포넌트에 적합한 이름을 작성하면 됩니다.