inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

디자인 시스템 with 피그마

타이포그래피 (Typography part01)

토큰 네임 작성

해결된 질문

365

주영

작성한 질문수 1

2

토큰에서 네임을 작성할때 대문자와 소문자를 번갈아가면서 쓰시던데 기준이 있나요?

 

소문자로시작해서 띄어쓰기 대신 대문자가 들어가는 것까진 이해가 되는데 아예 대문자로 시작하는건 어떤 경우에 이런식으로 작성하는 건가요?

figma figma-tokens 디자인-시스템 아토믹-디자인

답변 1

1

범쌤

안녕하세요 주영님 😀

 

대소문자를 구분지어 작성하는건 특별한 규칙은 없으나 하나의 방법을 사용하셨다면 꾸준히 그 방식을 사용해 주시는게 좋습니다. 또는 개발자와 협의하여 적절한 네이밍 규칙을 가져가 주시는게 좋습니다.

개발에서 컴포넌트를 생성할땐 항상 대문자로 시작하는 규칙이 있습니다.

대문자를 첫자로 시작하는 방식을 pascal case 방식이라 부르며 사용 방법은 아래와 같습니다.

PascalCase  // 파스칼 케이스

 

이와 비슷한 camel case 표기법도 있습니다.

camelCase  // 카멜 케이스

 

자바스크립트에서 제일 많이 사용되는 타이밍은 camelCase 기법이지만 개발자들은

생성자 (컴포넌트)를 분류하기 위해 PascalCase 기법을 사용해 두가지를 분류합니다.

 

그래서 저도 컴포넌트의 이름들이 전부 대문자로 시작하는걸로 작성했습니다.

 

토큰의 이름은 정해진 규칙은 없으나 일관성 있게 작성해 주시면 됩니다.

 

타이핑 기법은 위에 언급드린 2가지 방식 말고도 kebab-case 와 snake_case등이 더 있습니다.

검색하면 많은 자료들이 나오니 한번 확인해보세요 ^-^
(개발자와의 협업을 위해 알아두면 좋습니다)

 

감사합니다 :)

borderTransparent를 라이트/다크모드에 이중등록

0

30

2

해결되었습니다.

0

24

1

안녕하세요! 강의잘 들었습니다.

0

75

2

타이포그래피 16 -> 14 변경 시 XXXL만 변경 안 됨

0

49

2

토큰스튜디오에서 폰트 스타일등록 문의

0

65

2

토큰에서 style로 export시 에러

0

71

2

컬러시스템 등록 관련

0

72

2

토큰 light/dark mode 오류

0

67

2

Pretendard 없으면 에러납니다

0

232

2

폰트 토큰 작업 할때

1

99

3

여기 수업에서 엘로우나 레드나 블루 이런 컬러들을 다양하게 만드는 이유가 뭔가요?

0

57

2

토큰을 깃허브에 올리는 방법이 없어진거 같은데요

1

82

2

토큰 export 할때 어떻게 해야 하나요? 버전이 바뀌어서 그런지 못찾겠어요

0

211

2

인프런 할때마다 짜증나는데 수업내용이 너무 오래된건 제발 삭제좀 하던지 다시 찍던지 해주세요

1

79

1

tailwind color generator 이게 작동이 잘 안되네요

0

75

2

figma tokens플러그인 안나오는데요??

0

124

2

혹시 토큰 가공할 수 있는 강의도 따로 있을까요??

1

55

2

피그마 배리어블에 export시 값 저장 안됨

0

207

3

Style - variable 문으ㅣ ㅜㅜ

0

68

2

borderTransparent 임포트가 안됩니다

1

68

2

화면이 보이지가 않아요?

0

67

1

컬러맵핑하고 라이트/다크 모드 설정시 색상 반전이 안돼요 ㅠㅠ

1

271

2

피그마 토큰 플러그인

1

292

2

깃허브 sync 오류

1

193

2