Figma

디자인 협업 툴로 디자이너, 기획자, 개발자 등이 실시간으로 협업이 가능한 툴이다.

컴포넌트

디자인 요소를 컴포넌트화 해서 사용가능하다.

• 재사용성 증가
• 계층 구조
• 일관성 유지
• 변경 용이성

Master 와 Instance 컴포넌트

컴포넌트에는 두 가지 타입이 존재한다.

마스터 컴포넌트(Master Component)

• 원본 컴포넌트로, 모든 인스턴스 컴포넌트의 기준
• 마스터 컴포넌트 수정시 모든 인스턴스에 변경사항이 반영

인스턴스 컴포넌트(Instance Component)

• 마스터 컴포넌트의 복사본
• 마스터 컴포넌트와 연결되어 있어 마스터의 변경사항이 자동으로 적용
• 개별적으로 요소의 값 수정가능 (size, color, font 등등)
  • 단 해당 값은 마스터 수정시에 반영이 안될 수 있음
• 개별적으로 요소의 구조를 변경할 수 없다.
• 인스턴스도 요소이므로 다른 요소로 감싸서 새로운 마스터 컴포넌트 생성가능
  • 단 해당 마스터의 요소는 인스턴스 컴포넌트 이므로 마스터의 변경 내용이 적용된다. (일관성,변경 용이성)
    

학습하기

주의! - 본인은 유료 플랜이라 무료에서는 제약이 있을 수 있음

figma Material 3 Design Kit으로 학습한 경험이 좋았다.
피그마에 추가해주고 열어보기

둘 중 원하는 방법으로 컴포넌트 둘러보기!(Shift + I시 resource 검색가능)

• 툴바를 Layers에 놓고 커멘드로 컴포넌트 찾는것을 추천

예시

Top app bar를 예시로 사용

하나씩 클릭해보면서 컴포넌트의 동작을 확인

• 실제로 눌러보고 싶다면 Shift + Space
• 여기서 되는건 내가 만들어 볼 수 있다는 뜻
• prototype에서는 애니메이션 효과, 사용자 상호작용(hover, onClick, scroll 등) 적용 가능

master component 찾아가기

마스터 마크 클릭시 마스터의 위치로 이동 마스터가 어떻게 구성되어있는지 확인 가능 이건 `Variants`를 사용한 것으로 컴포넌트의 `상태별` 형태이다.