인프런 커뮤니티 질문&답변

SUNA LEE님의 프로필 이미지
SUNA LEE

작성한 질문수

디자인 시스템 with 피그마

타이포그래피 (Typography part02)

문의드립니다!

해결된 질문

작성

·

236

1

안녕하세요, 강사님!
친절하고 상세하게 답변 남겨주셔서 감사합니다:)
남겨주신 답변 참고해서 제가 임의로 폰트 사이즈를 정한 후 피그마 토큰에 적용해 보았는데요, 제대로 작업한게 맞는지 궁금해서요. 스케일값 없이 작업했는데 한 번 확인해주시면 감사하겠습니다~!

{

"140": {

"value": "140%",

"type": "lineHeights"

},

"150": {

"value": "150%",

"type": "lineHeights"

},

"160": {

"value": "160%",

"type": "lineHeights"

},

"170": {

"value": "170%",

"type": "lineHeights"

},

"Default": {

"value": "16",

"type": "fontSizes"

},

"heading": {

"H1": {

"value": "{Default} * 5",

"type": "fontSizes"

},

"H2": {

"value": "{Default} * 4",

"type": "fontSizes"

},

"H3": {

"value": "{Default} * 3.375",

"type": "fontSizes"

},

"H4": {

"value": "{Default} * 3",

"type": "fontSizes"

}

},

"subtitle": {

"S1": {

"value": "{Default} * 2.25",

"type": "fontSizes"

},

"S2": {

"value": "{Default} * 1.75",

"type": "fontSizes"

},

"S3": {

"value": "{Default} * 1.375",

"type": "fontSizes"

}

},

"button": {

"button": {

"value": "{Default} + 2",

"type": "fontSizes"

}

},

"Pretendard": {

"value": "Pretendard",

"type": "fontFamilies"

},

"bold": {

"value": "Bold",

"type": "fontWeights"

},

"firescope_red": {

"value": "#bd382b",

"type": "color"

},

"content primary": {

"value": "#1c1918",

"type": "color"

},

"body": {

"B1": {

"value": "{Default}",

"type": "fontSizes"

},

"B2": {

"value": "{Default}",

"type": "fontSizes"

}

},

"caption": {

"C1": {

"value": "{Default} - 2",

"type": "fontSizes"

},

"C2": {

"value": "{Default} - 4",

"type": "fontSizes"

}

},

"Heading": {

"H1": {

"value": {

"fontFamily": "{Pretendard}",

"fontWeight": "{bold}",

"lineHeight": "{140}",

"fontSize": "{heading.H1}",

"letterSpacing": "{letterSpacing.0}",

"paragraphSpacing": "{paragraphSpacing.0}",

"textCase": "{textCase.none}",

"textDecoration": "{textDecoration.none}"

},

"type": "typography"

},

"H2": {

"value": {

"fontFamily": "{Pretendard}",

"fontWeight": "{bold}",

"lineHeight": "{140}",

"fontSize": "{heading.H2}",

"letterSpacing": "{letterSpacing.0}",

"paragraphSpacing": "{paragraphSpacing.0}",

"textCase": "{textCase.none}",

"textDecoration": "{textDecoration.none}"

},

"type": "typography"

},

"H3": {

"value": {

"fontFamily": "{Pretendard}",

"fontWeight": "{bold}",

"lineHeight": "{140}",

"fontSize": "{heading.H3}",

"letterSpacing": "{letterSpacing.0}",

"paragraphSpacing": "{paragraphSpacing.0}",

"textCase": "{textCase.none}",

"textDecoration": "{textDecoration.none}"

},

"type": "typography"

},

"H4": {

"value": {

"fontFamily": "{Pretendard}",

"fontWeight": "{bold}",

"lineHeight": "{140}",

"fontSize": "{heading.H4}",

"letterSpacing": "{letterSpacing.0}",

"paragraphSpacing": "{paragraphSpacing.0}",

"textCase": "{textCase.none}",

"textDecoration": "{textDecoration.none}"

},

"type": "typography"

}

},

"Subtitle": {

"S1": {

"value": {

"fontFamily": "{Pretendard}",

"fontWeight": "{semiBold}",

"lineHeight": "{150}",

"fontSize": "{subtitle.S1}",

"letterSpacing": "{letterSpacing.0}",

"paragraphSpacing": "{paragraphSpacing.0}",

"textCase": "{textCase.none}",

"textDecoration": "{textDecoration.none}"

},

"type": "typography"

},

"S2": {

"value": {

"fontFamily": "{Pretendard}",

"fontWeight": "{semiBold}",

"lineHeight": "{150}",

"fontSize": "{subtitle.S2}",

"letterSpacing": "{letterSpacing.0}",

"paragraphSpacing": "{paragraphSpacing.0}",

"textCase": "{textCase.none}",

"textDecoration": "{textDecoration.none}"

},

"type": "typography"

},

"S3": {

"value": {

"fontFamily": "{Pretendard}",

"fontWeight": "{semiBold}",

"lineHeight": "{150}",

"fontSize": "{subtitle.S3}",

"letterSpacing": "{letterSpacing.0}",

"paragraphSpacing": "{paragraphSpacing.0}",

"textCase": "{textCase.none}",

"textDecoration": "{textDecoration.none}"

},

"type": "typography"

}

},

"semiBold": {

"value": "SemiBold",

"type": "fontWeights"

},

"regular": {

"value": "Regular",

"type": "fontWeights"

},

"medium": {

"value": "Medium",

"type": "fontWeights"

},

"Button": {

"Button": {

"value": {

"fontFamily": "{Pretendard}",

"fontWeight": "{bold}",

"lineHeight": "{160}",

"fontSize": "{button.button}",

"letterSpacing": "{letterSpacing.0}",

"paragraphSpacing": "{paragraphSpacing.0}",

"textCase": "{textCase.none}",

"textDecoration": "{textDecoration.none}"

},

"type": "typography"

}

},

"Body": {

"B1": {

"value": {

"fontFamily": "{Pretendard}",

"fontWeight": "{semiBold}",

"lineHeight": "{160}",

"fontSize": "{body.B1}",

"letterSpacing": "{letterSpacing.0}",

"paragraphSpacing": "{paragraphSpacing.0}",

"textCase": "{textCase.none}",

"textDecoration": "{textDecoration.none}"

},

"type": "typography"

},

"B2": {

"value": {

"fontFamily": "{Pretendard}",

"fontWeight": "{medium}",

"lineHeight": "{160}",

"fontSize": "{body.B2}",

"letterSpacing": "{letterSpacing.0}",

"paragraphSpacing": "{paragraphSpacing.0}",

"textCase": "{textCase.none}",

"textDecoration": "{textDecoration.none}"

},

"type": "typography"

}

},

"Caption": {

"C1": {

"value": {

"fontFamily": "{Pretendard}",

"fontWeight": "{regular}",

"lineHeight": "{170}",

"fontSize": "{caption.C1}",

"letterSpacing": "{letterSpacing.0}",

"paragraphSpacing": "{paragraphSpacing.0}",

"textCase": "{textCase.none}",

"textDecoration": "{textDecoration.none}"

},

"type": "typography"

},

"C2": {

"value": {

"fontFamily": "{Pretendard}",

"fontWeight": "{regular}",

"lineHeight": "{170}",

"fontSize": "{caption.C2}",

"letterSpacing": "{letterSpacing.0}",

"paragraphSpacing": "{paragraphSpacing.0}",

"textCase": "{textCase.none}",

"textDecoration": "{textDecoration.none}"

},

"type": "typography"

}

}

}

답변 1

0

범쌤 님의 프로필 이미지
범쌤
지식공유자

안녕하세요 SUNA LEE 님 :)

작성해주신 토큰 확인 해봤을 때 잘 작성해주신것 같습니다 ㅎㅎ

 

다만, 임의의 값을 넣어서 크기를 만드는건 좋으나, 나름의 규칙성을 가져야 시스템이 효율적이지 않을까 라는 생각을 가져봅니다.

지금 작성된 토큰에는 x5, x4, x3.375, x3 이런식으로 규칙적이지 않은 값들이 곱해지고 있는것 같은데요, 개발자 입장에서 보면 규칙적인 값이 곱해지는게 아니기 때문에 개발 작업이 오히려 더 힘들어 질 수 있을것 같아요

제가 오프라인 수업에서 항상 하는 이야기가 있습니다.
"시스템을 구성할 때는 항상 handoff를 고려하며 작업해야 한다" 인데요,

내가 만든 토큰이 어떻게 내보내지는지를 고민해야 하며 개발자가 토큰을 받았을 때 처리가 복잡해진다면, 그건 비효율적인 시스템이 될 수 있다는 것이죠,

오히려 개발자 입장에서는 일정규칙을 가지고 폰트가 증가하고 정수값이 아닌 소수의 값이 떨어지는걸 더 선호할 수 있을것 같아요, 이 부분은 같이 일하는 개발자에게 의사를 물어보는게 제일 좋을듯 보입니다 ^^&

(만약 제가 저 토큰을 받는 개발자라면 일관된 규칙을 사용하는 걸 선호)

SUNA LEE님의 프로필 이미지
SUNA LEE

작성한 질문수

질문하기