[3강] 03. 마스터 컴포넌트와 인스턴스,디자인 시스템 .

 

컴포넌트 :  구성품

• 파운데이션을 조합해 만들어지는 구성품
• 마스터 컴포넌트 : 원본. 피그마에서 쓸 수 있는 컴포넌트 기능의 핵심. 반복적인 디자인을 빠르게 하기 위해 디자인을 복사해서 사용할 수 있도록 하며, 복사된 디자인들을 한 번에 수정하거나 편집할 수 있도록 하는 중요한 기능.
  원본 그대로이기 때문에 변하지 않으며, 수정/삭제 같은 작업을 여기서 실행할 수 있다. 복제하면 복제본인 인스턴스가 생성.

인스턴스 

• 마스터 컴포넌트의 복제본.
• 마스터 컴포넌트를 복사하면 생기며, 이에 따라서 컴포넌트의 속성을 그대로 이어 받는다.
• 컴포넌트를 수정하면 인스턴스에도 반영되지만, 반대로 인스턴스의 수정은 컴포넌트에 반영되지 않는다.
• 컴포넌트를 삭제해도 인스턴스는 남아있으며, 컴포넌트와의 연결을 분리Detach하면 일반 프레임이 된다.

 

디자인 시스템

• 필요성 : 다른 디자이너와 개발자들이 같은 생각을 가지고 똑같은 방법으로 만들고 쓸 수 있게 하기 위해서.
• 목적 :
  반복적인 UI를 효율적으로 관리 : 반복적으로 사용하는 UI를 미리 만들어서 효율 적으로 사용
  팀 전체가 같은 정도로 이해 : 어떤 디자이너가 UI를 쓰더라도 일관된 사용법을 지키거나 어떤 개발자가 개발해도 디자이너 생각을 이해하고 만들 수 있어야한다.
• UI 키트와의 차이 : UI를 모아둔 UI 키트와 달리, 디자인 시스템은 UI 구조, 쓰는 방법, 유의법 등 상세한 부분까지 적혀있는 문서의 형태를 가추고 있다.
• 장단점
  장점 : 디자인을 반족적으로 사용할 수 있어 시간과 비용 절약이 가능하다. 시스템을 기반으로 동일한 품질 제품을 누구나 설계 가능하다.
  단점 : 하나로 통일하는 과정이 오래 걸린다. 필요한 양 대비 UI가 과해질 수 있으며, 기존 시스템 활용으로 변화가 줄어듬.
• 분류
  액션 : 사용자가 중요 행동 수행시 사용 ex.버튼
  인풋 : 사용자의 입력을 받을 시 사용
  인포메이션 : 컴포넌트 여러 개 결합. 하나의 덩어리 이루는 컴포넌트
  내비게이션 : 사용자가 페이지 이동할 때 사용
  컨트롤 : 사용자가 설정/값 수정시 사용. 라디오, 체크박스, 스위치 등이 속함.