[새싹X스나이퍼팩토리] 기업연계 실무특화 UX/UI 디자인 마스터 과정 13일차 "컴포넌트”

 

 

오늘은 컴포넌트에 대해 배웠습니다.

 

컴포넌트

 

아이콘, 버튼, 레이아웃 등 많이 사용하는 오브젝트를 저장해 두고 반복해서 사용하는 요소입니다.
프로젝트 전반에 걸쳐 일관된 디자인을 만들고 관리하는 데 도움이 됩니다.
버튼, 아이콘, 레이아웃, GNB, Tab bar 등을 컴포넌트로 만듭니다.

 

컴포넌트 만들기 실습

 

디자인 패널 상단 컴포넌트 아이콘
✅ 단축키 Ctrl + Alt + K  or 마우스 우클릭 - create component
Main component: 처음에 만든 원본 메인 컴포넌트는 디자인에 사용하지 않는다.

 

- 인스턴스
컴포넌트를 복사한 요소로 메인 컴포넌트에 영향을 받는다.

- 컴포넌트 해제
해제가 없다.
플러그인 사용 - Detatch component

 

- 인스턴스 해제
More action - Detatch instance
✅ 단축키: Ctrl + Alt + B

 

 

컴포넌트 세트

 

컴포넌트를 그룹핑하는 것이다. 

- 베리언트
변형이라는 뜻이다. 동일한 컴포넌트지만 디자인이 다른 컴포넌트를 논리적으로 그룹핑한다.

 

 

오늘 안 꿀팁

 

[Assets] - [UI kits] 에서 애플/구글 디자인 시스템에서 간편히 가져올 수 있다. 진짜 편함!!!

 

그 이후, 프로토타입 실습과 팀 프로젝트 진행했습니다.

 

 

 

---

본 후기는 [스나이퍼팩토리] 기업연계 실무 특화 UX/UI 디자인 마스터 과정 (B-log) 리뷰로 작성 되었습니다.