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

김희영님의 프로필 이미지
김희영

작성한 질문수

디자인 시스템 with 피그마

타이포그래피 (Typography part02)

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

해결된 질문

작성

·

271

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

답변 2

1

김희영님의 프로필 이미지
김희영
질문자

오! 해결되었습니다

빠른 답변 감사합니다 :)

0

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

안녕하세요 김희영님 :)

 

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

 

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

 

감사합니다 :)

김희영님의 프로필 이미지
김희영

작성한 질문수

질문하기