inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

디자인 시스템 with 피그마

타이포그래피 (Typography part02)

타이포그래피 연결해제 표시

해결된 질문

357

김희영

작성한 질문수 2

1

다른분이 연결해제 관련 질문을 올리긴 하셨는데 json 파일을 따로 안올리셔서 같이 첨부드립니다 ㅠ.ㅠ

왜 연결해제와 같은 표시가 뜨는 걸까요..?

스크린샷 2023-10-07 오전 12.34.05.png

json 입니다.

{
  "140": {
    "value": "140%",
    "type": "lineHeights"
  },
  "150": {
    "value": "150%",
    "type": "lineHeights"
  },
  "160": {
    "value": "160%",
    "type": "lineHeights"
  },
  "spacing": {
    "6": {
      "value": "{spacing.baseSpacing} *1.5",
      "type": "spacing"
    },
    "8": {
      "value": "{spacing.baseSpacing} *2",
      "type": "spacing"
    },
    "10": {
      "value": "{spacing.baseSpacing} *2.5",
      "type": "spacing"
    },
    "12": {
      "value": "{spacing.8} + {spacing.baseSpacing}",
      "type": "spacing"
    },
    "16": {
      "value": "{spacing.12} + {spacing.baseSpacing}",
      "type": "spacing"
    },
    "20": {
      "value": "{spacing.16} + {spacing.baseSpacing}",
      "type": "spacing"
    },
    "24": {
      "value": "{spacing.20} + {spacing.baseSpacing}",
      "type": "spacing"
    },
    "28": {
      "value": "{spacing.24} + {spacing.baseSpacing}",
      "type": "spacing"
    },
    "32": {
      "value": "{spacing.28} + {spacing.baseSpacing}",
      "type": "spacing"
    },
    "36": {
      "value": "{spacing.32} + {spacing.baseSpacing}",
      "type": "spacing"
    },
    "40": {
      "value": "{spacing.36} + {spacing.baseSpacing}",
      "type": "spacing"
    },
    "44": {
      "value": "{spacing.40} + {spacing.baseSpacing}",
      "type": "spacing"
    },
    "48": {
      "value": "{spacing.44} + {spacing.baseSpacing}",
      "type": "spacing"
    },
    "52": {
      "value": "{spacing.48} + {spacing.baseSpacing}",
      "type": "spacing"
    },
    "56": {
      "value": "{spacing.52} + {spacing.baseSpacing}",
      "type": "spacing"
    },
    "60": {
      "value": "{spacing.56} + {spacing.baseSpacing}",
      "type": "spacing"
    },
    "64": {
      "value": "{spacing.60} + {spacing.baseSpacing}",
      "type": "spacing"
    },
    "baseSpacing": {
      "value": "4",
      "type": "spacing"
    }
  },
  "black": {
    "value": "#000000",
    "type": "color"
  },
  "white": {
    "value": "#ffffff",
    "type": "color"
  },
  "blue": {
    "100": {
      "value": "#d4e2fc",
      "type": "color"
    },
    "200": {
      "value": "#a9c5f9",
      "type": "color"
    },
    "300": {
      "value": "#7da8f7",
      "type": "color"
    },
    "400": {
      "value": "#528bf4",
      "type": "color"
    },
    "500": {
      "value": "#276ef1",
      "type": "color"
    },
    "600": {
      "value": "#1f58c1",
      "type": "color"
    },
    "700": {
      "value": "#174291",
      "type": "color"
    },
    "800": {
      "value": "#102c60",
      "type": "color"
    },
    "900": {
      "value": "#081630",
      "type": "color"
    }
  },
  "red": {
    "100": {
      "value": "#f9d1cc",
      "type": "color"
    },
    "200": {
      "value": "#f3a399",
      "type": "color"
    },
    "300": {
      "value": "#ed7566",
      "type": "color"
    },
    "400": {
      "value": "#e74733",
      "type": "color"
    },
    "500": {
      "value": "#e11900",
      "type": "color"
    },
    "600": {
      "value": "#b41400",
      "type": "color"
    },
    "700": {
      "value": "#870f00",
      "type": "color"
    },
    "800": {
      "value": "#5a0a00",
      "type": "color"
    },
    "900": {
      "value": "#2d0500",
      "type": "color"
    }
  },
  "yellow": {
    "100": {
      "value": "#fff2d9",
      "type": "color"
    },
    "200": {
      "value": "#ffe6b4",
      "type": "color"
    },
    "300": {
      "value": "#ffd98e",
      "type": "color"
    },
    "400": {
      "value": "#ffcd69",
      "type": "color"
    },
    "500": {
      "value": "#ffc043",
      "type": "color"
    },
    "600": {
      "value": "#cc9a36",
      "type": "color"
    },
    "700": {
      "value": "#997328",
      "type": "color"
    },
    "800": {
      "value": "#664d1b",
      "type": "color"
    },
    "900": {
      "value": "#33260d",
      "type": "color"
    }
  },
  "green": {
    "100": {
      "value": "#cde7da",
      "type": "color"
    },
    "200": {
      "value": "#9bcfb6",
      "type": "color"
    },
    "300": {
      "value": "#68b891",
      "type": "color"
    },
    "400": {
      "value": "#36a06d",
      "type": "color"
    },
    "500": {
      "value": "#048848",
      "type": "color"
    },
    "600": {
      "value": "#036d3a",
      "type": "color"
    },
    "700": {
      "value": "#02522b",
      "type": "color"
    },
    "800": {
      "value": "#02361d",
      "type": "color"
    },
    "900": {
      "value": "#011b0e",
      "type": "color"
    }
  },
  "accent": {
    "value": "{blue.500}",
    "type": "color"
  },
  "negative": {
    "value": "{red.500}",
    "type": "color"
  },
  "warning": {
    "value": "{yellow.500}",
    "type": "color"
  },
  "positive": {
    "value": "{green.500}",
    "type": "color"
  },
  "gray": {
    "100": {
      "value": "#e1e1e1",
      "type": "color"
    },
    "200": {
      "value": "#c4c4c4",
      "type": "color"
    },
    "300": {
      "value": "#a6a6a6",
      "type": "color"
    },
    "400": {
      "value": "#898989",
      "type": "color"
    },
    "500": {
      "value": "#6b6b6b",
      "type": "color"
    },
    "600": {
      "value": "#565656",
      "type": "color"
    },
    "700": {
      "value": "#404040",
      "type": "color"
    },
    "800": {
      "value": "#2b2b2b",
      "type": "color"
    },
    "900": {
      "value": "#151515",
      "type": "color"
    }
  },
  "positiveTransparent": {
    "value": "#0488481a",
    "type": "color"
  },
  "negativeTransparent": {
    "value": "#e119001a",
    "type": "color"
  },
  "scale": {
    "value": "1.333",
    "type": "sizing"
  },
  "default": {
    "value": "16",
    "type": "fontSizes"
  },
  "heading": {
    "S": {
      "value": "{default} / {scale}",
      "type": "fontSizes"
    },
    "M": {
      "value": "{default}",
      "type": "fontSizes"
    },
    "L": {
      "value": "{heading.M} * {scale}",
      "type": "fontSizes"
    },
    "XL": {
      "value": "{heading.L} * {scale}",
      "type": "fontSizes"
    },
    "XXL": {
      "value": "{heading.XL}  * {scale}",
      "type": "fontSizes"
    },
    "XXXL": {
      "value": "{heading.XXL}  * {scale}",
      "type": "fontSizes"
    }
  },
  "label": {
    "S": {
      "value": "{default} / {scale}",
      "type": "fontSizes"
    },
    "M": {
      "value": "{default}",
      "type": "fontSizes"
    },
    "L": {
      "value": "{heading.M} * {scale}",
      "type": "fontSizes"
    },
    "XL": {
      "value": "{heading.L} * {scale}",
      "type": "fontSizes"
    },
    "XXL": {
      "value": "{heading.XL}  * {scale}",
      "type": "fontSizes"
    }
  },
  "paragraph": {
    "S": {
      "value": "{default} / {scale}",
      "type": "fontSizes"
    },
    "M": {
      "value": "{default}",
      "type": "fontSizes"
    },
    "L": {
      "value": "{heading.M} * {scale}",
      "type": "fontSizes"
    },
    "XL": {
      "value": "{heading.L} * {scale}",
      "type": "fontSizes"
    }
  },
  "pretendard": {
    "value": "Pretendard",
    "type": "fontFamilies"
  },
  "bold": {
    "value": "Bold",
    "type": "fontWeights"
  },
  "semibold": {
    "value": "SemiBold",
    "type": "fontWeights"
  },
  "\bregular": {
    "value": "Regular",
    "type": "fontWeights"
  },
  "Heading": {
    "XXXL": {
      "value": {
        "fontFamily": "{pretendard}",
        "fontWeight": "{bold}",
        "lineHeight": "{140}",
        "fontSize": "{heading.XXXL}",
        "letterSpacing": "{letterSpacing.0}",
        "paragraphSpacing": "{paragraphSpacing.0}",
        "paragraphIndent": "{paragraphIndent.0}",
        "textCase": "{textCase.none}",
        "textDecoration": "{textDecoration.none}"
      },
      "type": "typography"
    },
    "XXL": {
      "value": {
        "fontFamily": "{pretendard}",
        "fontWeight": "{bold}",
        "lineHeight": "{140}",
        "fontSize": "{heading.XXL}",
        "letterSpacing": "{letterSpacing.0}",
        "paragraphSpacing": "{paragraphSpacing.0}",
        "paragraphIndent": "{paragraphIndent.0}",
        "textCase": "{textCase.none}",
        "textDecoration": "{textDecoration.none}"
      },
      "type": "typography"
    }
  }
}

추가로 import 할 때 이런 표시도 뜹니다.

스크린샷 2023-10-07 오전 12.38.45.png

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

답변 2

1

김희영

오! 해결되었습니다

빠른 답변 감사합니다 :)

0

범쌤

안녕하세요 김희영님 :)

 

lineHeight 이하의 속성들은 적용하지 않았기 때문에 broken표시가 되는겁니다.

 

Tracking 부터 그밑에 속성들에게 none이라는 값을 직접 입력해보세요 ㅎㅎ

 

감사합니다 :)

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

0

30

2

해결되었습니다.

0

24

1

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

0

77

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

212

2

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

1

79

1

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

0

75

2

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

0

125

2

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

1

55

2

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

0

207

3

Style - variable 문으ㅣ ㅜㅜ

0

69

2

borderTransparent 임포트가 안됩니다

1

69

2

화면이 보이지가 않아요?

0

67

1

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

1

271

2

피그마 토큰 플러그인

1

292

2

깃허브 sync 오류

1

193

2