피그마 기능 하이라이트

Figma의 컴포넌트 오버라이드는 디자인 시스템의 일관성을 유지하면서도 각 인스턴스를 상황에 맞게 수정할 수 있게 해준다. 인스턴스를 분리하지 않고 색상, 텍스트, 스타일 등을 변경할 수 있으며, 원본 컴포넌트가 업데이트되면 수정되지 않은 속성은 계속 상속된다. 따라서 반복되는 UI를 효율적으로 관리하면서도 다양한 상태와 콘텐츠를 표현할 수 있다.

디자인 시스템에서 유연성과 일관성의 균형

• 리스트, 아바타, 상태 표시줄처럼 여러 곳에서 반복되는 기본 컴포넌트는 일관된 디자인을 유지해야 한다.
• 동시에 리스트의 텍스트, 상태 표시줄의 색상처럼 사용 맥락에 따라 달라지는 부분도 필요하다.
• 모든 변형을 처음부터 새로 만들면 작업량이 늘고 디자인 시스템과의 연결도 끊어진다.
• 오버라이드는 원본 컴포넌트의 구조는 유지하면서 인스턴스별 차이만 적용하는 방식이다.

컴포넌트 오버라이드의 작동 방식

• 인스턴스를 원본 컴포넌트에서 분리하지 않고 속성을 재정의할 수 있다.
• 원본 컴포넌트를 수정하면 각 인스턴스는 오버라이드되지 않은 변경 사항을 계속 상속한다.
• 인스턴스별로 변경 가능한 속성에는 다음이 포함된다.
  • 색상과 채우기
  • 텍스트와 텍스트 정렬
  • 글꼴 및 스타일
  • 선의 추가, 삭제, 수정
  • 불투명도와 블렌드 모드
  • 그림자와 블러 같은 효과
  • 요소의 표시·숨김 상태

실제 활용 사례

• 정보 목록 만들기

  • 하나의 셀 컴포넌트를 만든 뒤 각 인스턴스의 텍스트를 오버라이드한다.
  • 할 일 목록이나 대시보드 테이블처럼 서로 다른 데이터를 일관된 형태로 표현할 수 있다.

• 버튼 상태 표현하기

  • 하나의 버튼 컴포넌트를 기반으로 기본, 호버, 클릭, 비활성 상태를 만든다.
  • 배경색, 텍스트 불투명도, 그림자 등을 상태별로 변경할 수 있다.

• 주소록 아바타 구성하기

  • 원형 컴포넌트의 채우기를 각 인물의 사진으로 교체한다.
  • 아바타의 공통 형태는 유지하면서 이미지 콘텐츠만 다르게 적용할 수 있다.

오버라이드를 활용한 케일리도스코프

• 하나의 일러스트를 프레임에 그리고 컴포넌트로 변환한다.
• 인스턴스를 복제해 오른쪽에 배치한 뒤 수평 반전한다.
• 다시 복제해 아래쪽에 배치하고 수직 반전한다.
• 남은 공간에 인스턴스를 하나 더 배치해 2×2 형태를 만든다.
• 왼쪽 위의 원본 컴포넌트 안에서 그림을 수정하면 연결된 인스턴스들이 함께 바뀌며 대칭 패턴이 만들어진다.

컴포넌트 오버라이드는 공통 구조와 스타일은 원본에 맡기고, 콘텐츠와 상태처럼 달라져야 하는 부분만 인스턴스에서 수정하는 데 적합하다. 반복 UI를 컴포넌트로 만든 뒤 필요한 속성만 오버라이드하면, 유지보수성과 디자인의 다양성을 함께 확보할 수 있다.