Figma 명명 규칙 (Naming Conventions)

이 문서는 Figma에서의 레이어, 컴포넌트, 파일, 프레임에 대한 명명 규칙과 레이어 구성에 대한 모범 사례를 제공합니다.

레이어 명명 (Layer Naming):
- "Rectangle 1"과 같은 기본 이름 대신, 내용을 잘 설명하는 이름을 사용하세요.
- 일관된 케이스 스타일을 선택하세요 (가독성을 위해 Title Case를 권장합니다).
- 코딩 컨벤션을 강요하기보다는 팀의 필요에 맞게 명명 규칙을 조정하세요.
- 개발자와 소통하여 그들이 선호하는 명명 규칙을 파악하세요.
컴포넌트 명명 (Component Naming):
- 컴포넌트 이름의 첫 글자는 대문자를 사용하세요.
- 이름은 하이픈(-)으로 구분하세요 (예: Button-Primary).
- 변형(variant)은 이중 밑줄(__)을 사용하여 정의하세요.
- 슬래시(/)를 사용하여 요소별로 그룹화하세요.
- 필요한 경우 이름에 크기를 포함시키세요 (예: icon-16-home).
- 구조: Element-Variant__State/Group (예: Button-Primary__Hover, Icon-16/Home)
파일 및 프레임 명명 (File and Frame Naming):
- 목적을 나타내는 설명적이고 간결한 이름을 사용하세요.
- 예시: Homepage-Mobile, ContactUs-Tablet.
- 일관된 구분 기호(하이픈 또는 camelCase)를 유지하세요.
- 널리 알려진 약어가 아니면 약어 사용을 피하세요.

계층 및 그룹화 (Hierarchy and Grouping):
- 레이어 패널의 순서(위에서 아래로)는 캔버스에서의 쌓임 순서(앞에서 뒤로)와 일치한다는 것을 이해하세요.
- 명확한 계층 구조를 위해 프레임이나 그룹 내에 논리적으로 레이어를 중첩시키세요.
- 관련된 요소들을 함께 그룹으로 묶어 관리를 용이하게 하세요.