Inflearn Community Q&A
asked
문의드립니다!
Resolved
Written on
·
277
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"
}
}
}
Answer 1
0
안녕하세요 SUNA LEE 님 :)
작성해주신 토큰 확인 해봤을 때 잘 작성해주신것 같습니다 ㅎㅎ
다만, 임의의 값을 넣어서 크기를 만드는건 좋으나, 나름의 규칙성을 가져야 시스템이 효율적이지 않을까 라는 생각을 가져봅니다.
지금 작성된 토큰에는 x5, x4, x3.375, x3 이런식으로 규칙적이지 않은 값들이 곱해지고 있는것 같은데요, 개발자 입장에서 보면 규칙적인 값이 곱해지는게 아니기 때문에 개발 작업이 오히려 더 힘들어 질 수 있을것 같아요
제가 오프라인 수업에서 항상 하는 이야기가 있습니다.
"시스템을 구성할 때는 항상 handoff를 고려하며 작업해야 한다" 인데요,
내가 만든 토큰이 어떻게 내보내지는지를 고민해야 하며 개발자가 토큰을 받았을 때 처리가 복잡해진다면, 그건 비효율적인 시스템이 될 수 있다는 것이죠,
오히려 개발자 입장에서는 일정규칙을 가지고 폰트가 증가하고 정수값이 아닌 소수의 값이 떨어지는걸 더 선호할 수 있을것 같아요, 이 부분은 같이 일하는 개발자에게 의사를 물어보는게 제일 좋을듯 보입니다 ^^&
(만약 제가 저 토큰을 받는 개발자라면 일관된 규칙을 사용하는 걸 선호)