컴포넌트

구조의 복잡성을 줄여주는 컴포넌트 네이밍 규칙

피그마 튜터2023. 3. 23.

[구조의 복잡성을 줄여주는 🤟🏻컴포넌트 네이밍 규칙]

안녕하세요. 아티클을 읽다가 구성원들도 함께 알면 좋을 것 같은 [컴포넌트명 네이밍 규칙 관련 아티클]이 있어서 짧게 요약해서 공유합니다. 오늘도 파이팅하세요!!!💪🏻

📍 컴포넌트 네이밍 규칙이 중요한 이유 1. 폴더 구조 제공→ 네이밍 구조가 폴더에도 영향을 미침 2. 복잡성 감소 → 명칭의 직관성, 단순성이 전체적인 디자인 시스템을 정돈되게 만들어줌 3. 요소 숨기기 → 사용하지 않는 레거시 항목을 명칭을 통해 숨김 처리 가능 4. 개발자와의 커뮤니케이션 효율 업

📍 폴더 구조 제공 기본적으로 컴포넌트 폴더 구조는 전체 페이지→ 섹션 → 프레임→ 명칭 순을 따릅니다. 1. 네이밍에 ‘/’를 추가하면 폴더 구조로 구분할 수 있습니다. 예시 ex) Asset/icon/heart 2. 폴더 구조를 정리하면 디자인 시스템 정돈에 도움이 될 뿐 아니라, 스왑 인스턴스 기능 활용 시에도 원하는 인스턴스에 빠르게 접근할 수 있습니다. 📍 레거시 요소 숨김처리

→ 컴포넌트 명 앞에 .(점)또는 _(언더바)를 추가하면 라이브러리 발행 시 ‘hidden’처리 됩니다. → 오카방에서 새롭게 알게된 사실, 이렇게 명칭을 지정하면 베리언트 리스트 가장 위에 뜹니다.😂

📍 베리언트 정의 시 베리언트 명칭을 정의 할 경우에는 ‘__’를 사용해서 구분해 줍니다. 개발 작업 시 하위 구성 요소로 명확하게 구분 지어주기 위함입니다. ex) Input__checkbox Input__combo-box Input__number

🍯 추가로 알면 좋은 팁

명칭 지정 시 첫 글자는 대문자로 지정, 속성은 하이픈(-)으로 구분합니다. 언더바(_)를 써도 무방하지만 개발 작업시 하이픈을 써야 더블클릭 시 개별 선택이 됩니다! 언더바의 경우 전체선택 됨

→ 왜용? 구성요소와 하위에 있는 요소를 빠르게 검색하고 찾기 위함(효율성)

에셋이 프레임에 들어가 있더라도,프레임이 섹션에 들어가면 섹션이 가장 상위 그룹의 개념이 됩니다. (프레임명 기준X)

컴포넌트 명칭에 띄워쓰기를 사용하지 않습니다.

+추가

'-(하이픈)'이나 '_(언더바)' 사용 회사별로 편안 방법 사용해도 될것 같아요! 코딩 케이스 구분 시 -(하이픈)으로 구분하면 케밥케이스 / _언더바로 구분하면 스네이크 케이스라고 하는데 방법의 나름이지 정답은 없습니다! By 뜨이님