[디자인 시스템을 효율적으로 관리하기 위한 네이밍 규칙]
디자인 시스템 요소Core- color, typography, Icon, animation, layout, illustration
Component- button,Tootip, form, checkbox, switch, breadcrumbs 등등엄청나게 많아서 다 서술은 어렵고, 이것도 material design
같은 사이트, 또는 다른 디자인 시스템 참고해 보세요!
•
추가 팁: 컴포넌트 명칭들을 확인할 수 있는 사이트
또는 브랜드들이 발행한 디자인 시스템 가이드를 참고해서
우리 서비스에 맞게 수정하는 방법도 좋습니다!
Template 또는 pattern- login page, landing page 등과
같이 자주 사용되는 페이지컴포넌트명,스타일명 정리 방법컬러-밝기와 색상에 따라 단계를 나누어 명명 ex) color/orange/200
(베리어블과 같은 토큰 컬러 명명까지 다루면 너무 길어져서 이건 나중에 별도로 다룰게요!)타이포- typeface/font/weight/style컴포넌트- Type/Style/State/Status/기타 속성 •
Type:primary, secondary등등
•
Style: Filled,Outline등등
•
State(특정시점): Enabled, Active, Hover와 같은 상태값
•
Status(결과): Unselected, Selected
•
기타 베리언트 프로퍼티: 시스템 상태값(error, success같은)
Icon, item, size 등등 (와 근데 이건 설명하면 정말 끝이 없을 것 같아요!)
피그마 컴포넌트 정리 규칙•
파일 > 페이지 > 섹션/프레임 > 컴포넌트 명칭의 ‘/‘을 기준으로
폴더가 나누어 집니다.
•
레거시 컴포넌트는 . 또는 _(언더바)를 붙이면 hidden 처리됩니다.
네이밍(명명) 방법•
파스칼 케이스: 모든 단어 첫 글자를 대문자로 표기 IconHeart
•
케밥 케이스: 모든 단어 소문자로 표기. 단어와 단어 사이 “-“(하이픈)으로 연결 icon-heart
•
스네이크 케이스: 모든 단어 소문자로 표기. 단어와 단어 “_”(언더바)로 연결 icon_heart
•
카멜케이스: 첫 단어 소문자 두 번째 단어 첫 글자 대문자 iconHeart