#1 컴포넌트란? 두 번 이상 재사용될 UI Asset. 컴포넌트 만들기 ( Ctrl + Alt + K ) 메인 컴포넌트에 내용물이 바뀌면 인스턴스도 영향을 받는다. #2 인스턴스란? 재사용이 가능한 컴포넌트를 복제한 UI Asset 디자인 패널에서 다른 이미지(아이콘) 으로 스왑가능함. Assets 패널에서도 호버 + Alt (현재버전 기준) 로 스왑가능했음. *인스턴스의 Override 기능. 컴포넌트의 복제된 인스턴스지만 독립(?) 할 수 있음. 그냥 인스턴스를 따로 원하는 객체를 수정하면 되는데 수정된 객체는 컴포넌트의 동일한 객체 변화에 영향을 받지않음. EX) 객체 = 텍스트 다른 객체 (배경색) 같은 경우는 수정을 하지 않았기에 컴포넌트의 영향을 받는다. 언제든지 *Reset Override를 통해 현재 컴포넌트의 상태로 복원할 수 있다. *Push overrides to main component 기능 해당 인스턴스의 설정값을 본 컴포넌트에 덮어 씌운다. #3 컴포넌트와의 연결 해제하는 방법 ( Detach instance ) = 일반 레이어로 돌아감 단축키 ( Ctrl + Alt + B ) #4 Show / Hide 단축키 ( Shift + Ctrl + h ) #5 Variant 수많은 컴포넌트를 한곳에 정리하여 여러가지 속성값들을 편리하게 스왑할 수 있도록 도와주는 기능
참고 글 : 영상에는 담지 못했는데 예전에 variants 기능이 업데이트 되기 전에는 편의상 버튼 컴포넌트를 복제한 인스턴스를 다시 create component 해서 중첩하여 hover나 disabled 상태의 컴포넌트를 생성했었습니다. 요즘은 그 방식은 지양하고 있습니다. 그 점도 참고해주세요~ 대신 form, input, 버튼처럼 다양한 베리에이션 상태를 가지는 컴포넌트의 경우 variant 방식을 지향하고 있습니다. 중첩하여 사용하다보면 현 피그마 구조에서는 여러가지 불편한 사항이 발생했습니다. 예시) 1. Layer가 중첩되다 보니 가장 안쪽의 객체를 선택하는 것 불편하다는 점이 가장 컸습니다.(이 이슈는 command(ctrl)키로 해결 가능), 2. Layer의 depth가 깊어지는 점.. 3. 중첩된 컴포넌트의 경우 버튼 안의 텍스트가 버튼 상태 예를들어 디폴트에서 비활성화 상태의 버튼으로 전환 시 텍스트의 내용이 초기화가 되는 현상.
피그마가 궁금해서 유튜브 찾아봤는데 좋은 강의 올려 주셔서 뒤늦게 독학 중입니다^^ 협업에서 쓸 일은 없을 듯하지만.. 일러스트레이터와 웹 관련 지식이 전무한 건 아니라서 취미삼아 공부해보려 했는데 제가 아는 것이 정말 먼지 같구나 싶은 생각이 듭니다😅 지식 나눔해 주심에 감사드리고 날씨는 너무나.. 춥지만ㅎ 따뜻한 크리스마스와 연말되시길 바랍니다👍👍🙏🙏
피그마 커뮤니티에 올라온 클럽 하우스 figma 오픈 리소스가 있어서 함께 공유 드립니다. 1) www.figma.com/community/file/943978304161218300 2) www.figma.com/file/bF33wlb8aggERReX5HyfoU/Clubhouse-UI-(Community)?node-id=0%3A1
피그마 기초 - 컴포넌트의 개념 - designer-story.tistory.com/m/18 00:00 intro *컴포넌트 기능 00:58 버튼 컴포넌트 생성하기 01:36 메인 컴포넌트와 인스턴스 구분하는 방법 02:25 인스턴스의 옵션 살펴보기 04:34 인스턴스의 Text Override 기능 06:10 Detach Instance(인스턴스를 메인 컴포넌트와의 연결을 해제하는 방법) 10:54 Create multiple components(여러개의 UI Asset을 한꺼번에 컴포넌트로 변환하는 방법) *컴포넌트 Swap 기능 02:35 아이콘 인스턴스를 Design 패널에 있는 다른 아이콘으로 변경 하는 방법 03:41 아이콘 인스턴스를 Assets 패널에 있는 다른 아이콘으로 변경 하는 방법 * Variant 기능이란? 베리에이션 된 컴포넌트들을 하나의 컴포넌트로 합치는 방법 09:12 Variant 기능 11:09 컴포넌트 합치기(Combine as Variants) 12:04 신규 속성 추가(Add new property) 12:51 버튼에 아이콘이 있을 경우 Variant 값 정의 1(yes, on, true) 13:11 버튼에 아이콘이 없을 경우Variant 값 정의 2(no, off, false) 13:58 버튼의 상태 속성(pressed) 추가하기 16:00 Secondary 버튼 Type 추가하기 17:09 Design 패널에서 버튼 컴포넌트 최종 결과물 확인하기 17:34 Inspect 패널에서 버튼 컴포넌트 최종 결과물 확인하기 17:52 다음편 예고
질문이 있습니다. Variants 만들 때, 최초 버튼 컴포넌트를 복사하여 인스턴스를 만든 후 그 인스턴스를 detach 한 다음 컴포넌트화 해서 variants 를 만드셨는데, 인스턴스 상태에서 바로 컴포넌트화 해서 variants를 만들면 안되나요? Detach 하시는 이유가 궁금합니다. Detach 하면 인스턴스가 플려서 나중에 버튼 크기나 모양을 조금 수정해야는 일이 생기면 불편할 것 같습니다. 인스턴스 상태를 유지한 체 만들면 원래 버튼만 수정하면 variants 들도 다 수정되서 편할 것 같은데, Detach 하는 이유가 무엇인가요? 좋은 강의 감사합니다.
Variants 적용 시 오류를 최소화 하기 위해 버튼 컴포넌트의 경우 인스턴스 상태를 유지한체로 Variants 생성하시는 건 권장드리지 않습니다. 무엇보다, 이번에 업데이트된 Boolean property 기능을 사용하기 위해서는 중첩될 경우 기능이 제대로 작동이 안될 수 있어요. (이는 직접 테스트 해보시는 걸 권장 드려요. ) Instance 로 Base를 만들고 컴포넌트를 생성 했다가 오히려 수정 이슈가 많았던 경험이 있습니다. (ex. 팀 라이브러리 업데이트 시 제대로 반영이 안되는 경우) [참고용 피그마 공식 가이드] help.figma.com/hc/en-us/articles/5579474826519-Create-and-use-component-properties
강의 너무 잘봤습니다! 기획자는 아니지만... 기획해야할일이 있어 피그마를 사용하는데 너무 도움이 많이됩니다! 특히 이번 영상은 피그마에서 제공하는 튜토리얼보다 훨씬 이해가 잘됩니다. 그저 갓..... 한가지 질문이 있습니다. 오늘 강의에서 이해한 variants 기능을 활용해 캘린더를 만들어봤는데요, 요일별로 기본(흰색), 호버(회색), 클릭(븕은색)으로 세팅 > 인터랙션을 설정 > 미리보기를 작동시켜봤는데요 호버와 클릭은 잘 되는데.... 다른 날짜를 선택하니 중복선택이 됩니다... 혹시 이런 경우, 다른버튼을 클릭했을때 기존 클릭영역(붉은색)이 기본(흰색)으로 돌아가게 하는 방법이 있을까요? ㅎㅎ
@@yeonjung-figma 답변 감사합니다! 말씀해주신 부분을 찾아서 세팅 완료했습니다. 한가지만 더 여쭤보면, 다른 날짜를 클릭했을때 기존 선택된 날짜가 선택해제(기본값)으로 돌아가게 하려면.... interaction deail의 트리거 설정을 어떻게 해야 할까요? 이부분은 아무리 찾아봐도 모르겠어서.. 도움주실 수 있을지 여쭤봅니다 :)
먼저 좋은 영상 감사드립니다. push overrides to main component를 했을 때 컴포넌트의 텍스트만 바뀌고 버튼 배경이 텍스트 길이에 맞게 자동으로 늘어나거나 줄어들지 않는데요. 2강부터 다시 해봐도 원인을 모르겠습니다. 이런 경우는 어떤 문제때문에 발생하는지 아시는 분 설명 부탁드립니다.
질문이 있습니다~14:47 쯤에보면 State property를 생성한후 variant값의 Default를 소문자로 수정하시는데요. 이 작업은 왜 하시는건가요? variant 값은 무조건 소문자로만 표기해야 하나요? 사이즈 표기 Md/Sm을 보면 그런거같지는 않은데, 수정하시는 이유가 궁금합니다~ 추가로, 각 property의 상하 순서를 한번씩 바꿔주시는데요. 그것도 중요한 의미가 있는건가요? 그리고 마지막으로 예고된 다음 영상은 아직 업로드되지 않은건가요?
두번 째 질문 답변: 순서도 중요도에 따라 정렬 한 것이에요.(주관적) 순서를 변경할 수 있다는 것을 보여 주기 위한 행동이라고 보시면 될거 같아요. 마지막에 예고 드렸던 부분은 아직 제작하지 않았고(찍다가 보류한 상태)앞으로 어떤 영상을 제작할지는 고민하고 있습니다. 최근에 개인 사정으로 영상 제작을 하지 못하고 현재는 회사일에 전념 중입니다. 어제 마침 구독자 6,000명이 넘은 기념으로 새 영상 제작할 계획 가지고 있고요~ 그 시기는 언제가 된다고 추후에 공지 예정입니다.
한 가지 더 질문드리겠습니다. Variants 만들 때 버튼 인스턴스를 detach 할 때 그 안에 있는 아이콘 인스턴스는 따로 detach 하지 않으셨습니다. Variants 할 때 detach 해야하는 인스턴스는 최상위 인스턴스만 detach 하면 된다고 이해하면 될까요?
버튼 안쪽의 swap 하고자 하는 요소(버튼의 경우 아이콘 인스턴스)는 detach 하지 않았어요~ 버튼 컴포넌트를 인스턴스로 만든 상태로 컴포넌트화하면 인스턴스 바깥쪽으로 프레임이 한 번 더 감싸지는 상태가 되요~ 구조상 깔끔하지 못하기 때문에 지양하고 있습니다.(불필요한 depth 발생) . 제가 이전 댓글에서 MC님께 직접 테스트 해보시라고 요청 드린 부분을 실제로 구현해 본 결과, Boolean Property 기능이 작동되지 않았어요. 인스턴스를 다시 컴포넌트화 하는 건 반드시 하면 안된다는 아니지만 Variants 기능을 활용할 시에 그러한 이슈가 발생하니 참고해주세요~ (특히 버튼 컴포넌트)
12:10 저는 오른편에 variants창이 아예 없고, Properties의 오른쪽 +를 선택하면 variant, boolean, instant swap, text 를 선택할 수 있게 하는 창이 뜨는데요. 여기서 어떤걸 선택하면 좋을까요? 아마 피그마가 업데이트되서 창이 다른 것 같아요 ㅜ오늘도 감사합니다!!
1) 왜 28프로인지를 묻는 것이냐 묻는 것이냐에 대한 답변: 배경 컬러 대비 가장 나은 수치라고 생각하여 28프로로 조정하였습니다. (기존 클럽 하우스 UI 스크린샷을 참고함) 2) 왜 컬러를 변경하지 않고 투명도로 텍스트 컬러를 조정 했는지에 대한 답변 : 텍스트 컬러에 대해서 불투명도로 정의할 경우, 주변 컬러와 조화되는 컬러를 만들 수 있기 때문에 텍스트 컬러 정의 시 불투명도로 위계를 정하고 있습니다.(저의 개인 성향) 제가 한 방식이 반드시 일반화된 디자인 법칙이나 정답이라고 할 수는 없으니 저의 영상은 한 디자이너의 figma 작업 스타일이라고 생각하고 참고 하시면 좋을 거 같아요~
인터렉션에 대한 커뮤니케이션 용도로 괜찮은 툴인 거 같아요~ 어떤 플랫폼이냐 서비스냐에 따라 다르겠지만 1)프로토타입에 프로토파이를 쓸 정도의 일정상의 여유가 보통 없기 때문에😭 2) 노력과 시간 대비 비효율적인 리소스가 투입된다고 생각되어(case by case) : 개발자가 구현해야 하는 시간과 맞먹는 제작 시간 3) 재활용이 어렵다. 4) 수정이 어렵다. 의 이유로 지금은 사용하지 않고 있습니다. (작년 3월 버전 사용에 대한 리뷰) User flow에 대한 프로토타입핑은 피그마의 기본 기능으로도 충분히 프로토타입핑 구현이 가능합니다. 무엇보다 수정이 용이하죠 🤩(트렌지션 효과, 딜레이 효과 등) /피그마에선 안되고 프로토파이만으로만 구현 가능한 인터랙션의 경우, 개발 일정에도 이중으로 부담을 주게되어 디자인쪽에서 힘들게 만들어도 개발로 이어지는 경우가 드물더라구여.(일정 때문에 안타깝게도 애니메이션 효과 스펙들이 과감히 삭제됨 ㅠㅜ) 그러한 현실이다보니 프로토파이는 보통 개인 포폴용으로 제작을 하게 되더라구요. 만약 고급 인터렉션 프로토타입핑 툴에 대한 니즈가 있으시다면 코드 친화적인 webflow나 framer 또는 에프터이펙트 툴 추천드려요. webflow.com/
