[figma] 디자인 시스템 네이밍 규칙, 이렇게 하면 정리 끝!

디자인 시스템이 커질수록 컴포넌트와 스타일을 체계적으로 관리하기가 점점 어려워진다. 이런 상황에서 일관된 네이밍 규칙을 사용하면 디자인 시스템의 가독성과 유지보수성이 훨씬 좋아진다. 이 글에서는 디자인 시스템에서 Core 요소, 컴포넌트, 템플릿을 효율적으로 네이밍하는 방법을 구체적으로 설명한다.

 

*피그마피디아 참고

1. 디자인 시스템 요소와 네이밍 규칙

1.1 Core 요소 (기본 요소)

Core 요소는 디자인 시스템의 기본적인 단위로, 색상, 타이포그래피, 아이콘, 애니메이션 등이 포함된다. 이 요소들은 재사용성과 명확성을 높이는 데 초점이 맞춰져 있다.

• 컬러(Color)

• 구조: Color / Hue / Tone

• Hue(색상): Primary, Secondary, Tertiary 또는 색 이름(예: Blue, Red).

• Tone(밝기): 숫자(50, 100, 200 등)로 표현.

• 예시: Color/Blue/500, Color/Orange/200.

• 팁: 같은 계열의 색상을 단계별로 나누면 색상 체계를 명확하게 관리할 수 있다.

• 타이포그래피(Typography)

• 구조: Typography / Font / Weight / Style

• Font: 폰트 이름(예: Roboto, NotoSans).

• Weight: 폰트 굵기(예: Regular, Bold).

• Style: 폰트 스타일(예: Italic, Normal).

• 예시: Typography/Roboto/Bold/Italic, Typography/Heading1/Regular.

• 팁: 사용 목적에 따라 Heading, Body, Caption 등으로 카테고리를 분류하면 관리가 쉽다.

• 아이콘(Icon)

• 구조: Icon / Name / Variant

• Name: 아이콘의 기능이나 의미(예: Heart, Search).

• Variant: 스타일이나 크기(예: Filled, Outline, Small).

• 예시: Icon/Heart/Filled, Icon/Search/Small.

• 팁: 크기와 스타일 변형이 많은 경우에도 일관된 네이밍으로 관리 가능.

 

1.2 컴포넌트 (Buttons, Checkboxes, Forms 등)

컴포넌트는 디자인 시스템의 중심이며, 네이밍 구조를 체계적으로 정리하면 찾기 쉽고 재사용성이 높아진다.

• 구조: Type / Style / State / Status / Size

• Type: 컴포넌트의 기본 유형(예: Button, Card, Tooltip).

• Style: 디자인 스타일(예: Filled, Outlined, Text).

• State: 컴포넌트의 인터랙션 상태(예: Enabled, Hover, Disabled).

• Status: 결과 상태(예: Selected, Unselected, Error, Success).

• Size: 크기(예: Small, Medium, Large).

• 예시:

• 버튼(Button):

• Button/Primary/Filled/Enabled/Small

• Button/Secondary/Outlined/Hover/Medium

• 체크박스(Checkbox):

• Checkbox/Enabled/Unselected

• Checkbox/Disabled/Selected

• 팁: 상태(State)와 결과(Status)를 명확히 나누어 작성하면 디자인 시스템 내 다양한 변형을 관리하기 편하다.

 

1.3 템플릿과 패턴

템플릿은 로그인 페이지, 랜딩 페이지처럼 자주 반복되는 레이아웃이다. 패턴은 유사한 UI 컴포넌트를 조합해 만든 블록 형태를 말한다.

• 구조: Template / Page Name

• 예시: Template/LoginPage, Template/LandingPage.

• 팁: 전체 페이지를 기준으로 작성하면서 재사용이 가능한 블록 단위(패턴)로 나눌 수도 있다.

 

2. Figma에서 컴포넌트 정리하기

2.1 파일 구조

• Figma에서는 / 슬래시를 사용해 계층 구조를 정리할 수 있다.

• 예시: Button/Primary/Filled, Icon/Heart/Filled.

• 레거시 컴포넌트나 더 이상 사용하지 않는 컴포넌트는 앞에 _나 .을 붙여 숨길 수 있다.

• 예시: .OldButton, _DeprecatedIcon.

3. 네이밍 스타일 옵션

• 파스칼 케이스 (PascalCase): 모든 단어 첫 글자를 대문자로 표기.

• 예시: ButtonPrimary, IconHeart.

• 케밥 케이스 (kebab-case): 모든 단어를 소문자로 표기하고 -로 연결.

• 예시: button-primary, icon-heart.

• 스네이크 케이스 (snake_case): 모든 단어를 소문자로 표기하고 _로 연결.

• 예시: button_primary, icon_heart.

• 카멜 케이스 (camelCase): 첫 단어는 소문자, 이후 단어 첫 글자는 대문자로 표기.

• 예시: buttonPrimary, iconHeart.

출처: 피그마튜터

 

4. 참고 리소스

• UI Guideline Components: 다양한 컴포넌트 명칭 예시 확인 가능.

• Material Design: Google의 디자인 시스템 가이드.

• Shopify Polaris: Shopify의 디자인 시스템 가이드.