inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기

[실습✨] 시맨틱 베리어블 등록하고 스타일과 연결하기

텍스트 베리어블 오류 문제

해결된 질문

362

ifuwonder

작성한 질문수 7

0

스크린샷 2025-02-13 오후 3.25.26.png.webp

텍스트 스타일 베리어블 등록이 첨부이미지 처럼 오류?가 나는데, 제가 텍스트 스타일 등록 내용을 볼드님이랑 다르게 하고 베리어블은 강의 내용대로 따라해서 그런걸까요?

웹-디자인 figma figma-tokens 디자인-시스템 아토믹-디자인 figma-variable 프로덕트디자인

답변 3

1

ifuwonder

라고 질문을 했는데 볼드님께서 아래와 같이 답변을 해주셨고, 결국 폰트 이름 오타 문제였네요 😅

동일한 문제 겪으시는 분들께 공유드립니다!

 

폰트 이름이 찾지 못해서 일 것 같습니다.

Primitive 가셔서 이름을 확인해보세요.

예를 들어, Roboto를 Riboto라던지 피그마에 폰트패밀리 이름과 동일하지 않으면 오류가 납니다.

0

볼드 UX

질문과 답변을 모두 자세히 적어주셔서 감사합니다.

 

보내주신 이미지처럼 밑줄이 그어진 경우, 이는 로컬 베리어블에 저장된 텍스트 값을 찾을 수 없을 때 발생하는 오류로 보시면 됩니다.

 

제가 최근 경험한 사례 중에는, 보내주신 사례 처럼 베리어블 이름이 다를 경우도 있었으며, 다른 문제도 있었습니다. 예를 들어 Primitive에서 Sans에 Roboto를 사용했을 때는 문제가 없었습니다. Roboto는 일반적으로 모든 두께를 지원하기 때문입니다.

 

하지만 모드에서 다른 폰트로 변경했을 때, 해당 폰트가 특정 두께만 지원하면 지원되지 않는 두께가 밑줄이 그어지는 오류로 나타날 수 있습니다. 이처럼 지원되지 않는 폰트 속성이 있을 경우 밑줄이 표시되니 참고 부탁드립니다.

 

감사합니다! 😊

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

ifuwonder님, Figma에서 텍스트 스타일 베리어블 등록 시 발생하는 문제에 관해 질문하셨군요. 첨부해 주신 이미지를 기반으로 문제를 해결하는 데 도움이 될 수 있는 기존 답변 링크를 안내해 드리겠습니다.

텍스트 스타일을 등록할 때, 일반적으로 동일한 텍스트 속성을 텍스트 스타일과 베리어블에 맞게 일관성 있게 설정하는 것이 중요합니다. 텍스트 스타일 ‘표준’과 ‘볼드’, ‘크기’ 등을 지정할 때 각기 다른 위치에서 내용을 바꾸면 의도한 스타일과 다르게 보일 수 있습니다. 베리어블은 스타일의 논리적 표현체로 작동하니, 텍스트 스타일과 베리어블 사이의 일관성을 확인해 보세요.

아래의 답변이 도움이 될 수 있습니다:

  • “타이포그래피 스타일 네임에 관하여”: 이 게시글에서는 타이포그래피 스타일을 생성하거나 수정하는 방법에 대한 포괄적인 설명이 있습니다. Figma 내에서의 스타일과 베리어블의 관계 및 전반적인 사용 용도에 대해 알아보실 수 있습니다.

이 문제와 관련하여 텍스트 스타일과 베리어블의 일관성 문제가 주로 발생할 수 있으며, 강의에서 지시한 대로 베리어블 설정을 다시 한번 더 확인해 보시길 권장합니다.

질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주시면, 곧 지식공유자께서 답변해 주실 것입니다.

배리어블 Value에 관해 질문있습니다.

0

21

0

Body>font weight 에서 semibold에 짝대기가 생기는 이유?

0

26

1

Navigation Mobile 토글 베리어블이 안됩니당

1

27

2

Typography 모드 적용시 표현된 값과 우측에 표시되는 값다름

0

27

1

디자인 시스템에 그룹명을 숨길 수도 있나요?

0

40

2

디자인 시스템 네이밍에 관한 질문드립니다.

0

50

2

next step?

1

67

1

16강 Print Variables 출력 질문

0

80

2

open in Figma 누르고 ui kit 다운?받았을 때

0

63

2

variables 이름 지을때 소문자,대문자 사용에 관해..

0

89

2

디자인 시스템 네이밍 순서에 대해 질문남깁니다!

0

111

2

이미지 캐러셀 영상

0

64

2

아이콘 사이즈 컴포넌트 구성 방식 관련

0

98

3

완강/리뷰 이벤트 후 강의자료

0

59

2

Stack 컴포넌트 관련하여 궁금한 점이 있습니다.

0

54

1

컴포넌트별 베리어블 구축

0

76

2

인풋 텍스트필드에서는 왜 'interactive/bg' 배리어블을 활용하지 않는 것인가요?

0

36

1

섹션 6 / 29.Button 강의의 아이콘 인스턴스 스왑 질문

0

50

2

UI Kit에서 배리어블 등록 안되는 문제

0

58

2

교육용 피그마 계정 문의

0

59

2

베리어블 등록했는데 스타일에 연결하려니까 안보여요..

0

81

3

폰트 웨이트 지정에서, '바디만 따로 웨이트를 시멘틱에 그룹핑 하는 이유'가 무엇인가요??

0

48

2

섹션 6 / 29.Button 강의 질문

0

63

2

67강, 70강, 75강 자료 다운로드

0

51

1