소소한 꿀팁

[디자인 시스템을 효율적으로 관리하기 위한 네이밍 규칙]

피그마 튜터2024. 1. 25.

📍디자인 시스템 요소

1️⃣Core- color, typography, Icon, animation, layout, illustration 2️⃣Component- button,Tootip, form, checkbox, switch, breadcrumbs 등등

엄청나게 많아서 다 서술은 어렵고, 이것도 material design 같은 사이트, 또는 다른 디자인 시스템 참고해 보세요!

추가 팁: 컴포넌트 명칭들을 확인할 수 있는 사이트

또는 브랜드들이 발행한 디자인 시스템 가이드를 참고해서 우리 서비스에 맞게 수정하는 방법도 좋습니다!

3️⃣Template 또는 pattern- login page, landing page 등과 같이 자주 사용되는 페이지

📍컴포넌트명,스타일명 정리 방법

1️⃣컬러-밝기와 색상에 따라 단계를 나누어 명명 ex) color/orange/200 (베리어블과 같은 토큰 컬러 명명까지 다루면 너무 길어져서 이건 나중에 별도로 다룰게요!)

2️⃣타이포- typeface/font/weight/style

3️⃣컴포넌트- 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