💡 25-05-09 (금)
그룹, 프레임, 컴포넌트
피그마에는 화면에 배치 된 오브젝트를 그룹으로 만드는 세 가지 기능이 있다
▶︎ 그룹, 프레임, 컴포넌트
✅ 그룹 (command + G)
: 콘텐츠를 하나의 그룹으로 묶는다
-> 점선 네모 아이콘으로 표시
그룹화 된 콘텐츠는 크기, 색상, 속성이 모두 같이 변경된다
✅ 프레임 (command + option + G)
: 콘텐츠를 아우르는 컨테이너의 개념
내부 콘텐츠의 속성이나 크기에 영향을 주지 않는다
✔️ command + R : 레이어 이름 변경
✅ 컴포넌트 (command + option + K)
: 재사용 가능한 디자인 요소를 묶은 것
-> 다이아몬드 아이콘으로 표시
컴포넌트
: 디자인에서 반복적으로 사용하는 요소를 하나로 묶어 재사용 가능하게 만든 디자인 템플릿
▶︎ 여러 화면에서 반복해서 사용할 수 있도록 하는 기능
◼️ 컴포넌트 등록 - Create component
◼️ 개별 컴포넌트 한번에 등록 - Create multiple components
◼️ 여러 컴포넌트 묶음으로 등록 - Create component set
등록 된 컴포넌트는 asset에서 확인 가능하다
컴포넌트의 복사본(인스턴스)을 사용하면 원본을 수정할 때마다 복사본들도 자동으로 바뀌기 때문에 작업 속도도 빨라지고 디자인의 일관성도 유지할 수 있다 ‼️
➕ tool tip : UI 요소에 마우스를 올렸을 때 작게 뜨는 설명 문구
-> 간단한 기능 설명이나 아이콘의 의미를 알려줄 때 사용
인스턴스
: 원본 컴포넌트를 복제한 오브젝트
인스턴스에서 속성 변경한것은 오버라이드(기본 설정을 무시하고 내가 원하는 걸 새로 적용하는 것)가 적용 되기 때문에 인스턴스 자체에서만 변경된다
-> 위치, 텍스트, 색상
컴포넌트와 인스턴스의 아이콘으로 두 속성을 구분할 수 있다
⬜ 메인 컴포넌트 위치 찾기 : 오른쪽 마우스 - go to main component
⬜ 컴포넌트를 해제하기 : 오른쪽 마우스 - detach instance
⬜ 본래로 돌아가기 : 오른쪽 마우스 - reset all changes
컴포넌트와 인스턴스의 이해
#️⃣ 원본 컴포넌트는 복제한 인스턴스의 색상, 크기, 형태 변화에 영향을 주지만, 인스턴스는 원본 컴포넌트에 영향을 주지않는다
#️⃣ 복제한 인스턴스의 속성을 변경하면 원본 컴포넌트에서 독립되어 컴포넌트가 변경되어도 영향을 받지 않는다
#️⃣ Detach instance 하고 인스턴스를 복제하여 속성을 변경한 뒤 새로운 컴포넌트를 만들 수 있다
✏️ 버튼 및 카드 컴포넌트 만들기
✏️ Cafe 24 반응형 웹 사이트 만들어보기
내가 원하는대로 안 되고 헷갈리고 잘 모르겠다면 일단 AUTO를 생각해보자 ‼️
-> 자동으로 비율에 맞춰서 양옆에 끝에 갖다붙고 자동으로 간격을 조절해준다
Left + Right 는 양쪽으로 빨래집게로 잡은것이라고 생각하자
⭐⭐ Hug는 꽉 쪼그라든다 꽉 안는다 !!!!
Fill은 프레임(부모)를 나(자식)로 꽉 채우겠다 !!! ⭐⭐
늘려봤는데 공간이 남으면 Fill로 채워주면 된다
(구분하는게 너무 힘들다 ㅜ 헷갈려어어어)
✏️ 자신이 해보고싶은 서비스 선정해서 해보기
네이버 웹툰을 클로닝 디자인 해보면서 베리언트, 컴포넌트 연습을 더 했다
이제 진짜 감 잡았고 확실히 전보다 많이 늘었다 ㅎㅎ
클로닝 하면서 추가로 알게 된 것은
베리언트 하기 전 먼저 단일 컴포넌트로 만든 다음 요소별 속성을 지정하고 Variant로 묶는 것 !
