inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

링크(Link)와 브레드크럼프(Breadcrumbs) ✅

브레드크럼 인스턴스에서 Underline 넣는 방법

해결된 질문

123

dimrecord

작성한 질문수 2

0

브레드크럼 파트에서 수강 중 질문드립니다!

브레드크럼 인스턴스의 Label text property가 수정되면 Style을 Underline으로 변경이 안됩니다. Underline을 넣고 싶으면 브레드크럼 컴포넌트 셋트에서 적용해야 인스턴스에도 적용되는데, 이렇게 하는게 맞는지 궁금합니다.



우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요.

 

 

인프런 서비스 운영 관련해서는 1:1 문의하기로 인프런 쪽으로 연락 주시기 바랍니다.

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

답변 2

0

볼드 UX

안녕하세요, 한석환님

질문 주셔서 감사합니다.

 

제가 질문을 잘 이해 한게 맞는지 모르겠는데, 제 강의에서는 Style에서 Underline으로 적용이 되고 그 안에 텍스트는 Underline으로 추가하면 (1)이 이렇게 나타납니다. 따로 Underline 텍스트 스타일을 등록하셔도 되지만 이번에 새로운 기능이 나와서 구지 그렇게 안하셔도 됩니다.

 

제가 석환님 파일을 살펴보고, 제가 만든 부분도 살펴본 결과 텍스트 프로퍼티가 수정되어서 인스턴스에서 밑줄이 그대로 따라오긴 합니다.

만약 Underline을 부분적으로 없애거나 적용되지 않은 부분에 넣고 싶은 경우에는 현재 피그마에서는 불가능합니다.

 

감사합니다.

볼드 드림

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 한석환님.

브레드크럼 인스턴스에서 라벨 텍스트의 스타일을 어떻게 변경할 수 있는지에 대한 질문을 주셨네요. 피그마에서 컴포넌트 인스턴스를 사용할 때 텍스트 스타일 변경과 관련된 사항, 특히 언더라인 스타일의 적용에 대해 궁금하신 것 같습니다.

브레드크럼 인스턴스에서 텍스트 스타일을 변경하려면, 기본적으로 컴포넌트의 마스터 요소에서 해당 스타일을 설정해야 하며, 이를 통해 모든 인스턴스에 동일하게 적용됩니다. 인스턴스 자체에서 스타일을 변경하려면, 인스턴스 오버라이드를 허용하는 설정이 있어야 합니다.

유사한 질문 및 답변:

피그마에서 인스턴스 텍스트 스타일 변경:

컴포넌트의 특성 때문에 인스턴스에서 직접 스타일을 변경할 수 없다는 제한이 있으며, 이를 해결하기 위한 몇 가지 일반적인 방법이 있습니다:
1. 마스터 컴포넌트 수정: 컴포넌트 마스터 요소에서 언더라인 스타일을 설정하여 모든 인스턴스에 반영할 수 있습니다.
2. 스타일 오버라이드: 당연히 가능한 경우, 스타일 오버라이드를 통해 인스턴스 자체에서 적용하는 방법도 있습니다.
3. 별도 텍스트 스타일 생성: 필요하다면 특정 스타일을 별도로 생성하여 사용하면서 디자인 시스템의 일관성을 유지할 수 있도록 합니다.

이렇게 컴포넌트 인스턴스의 텍스트 스타일을 조정하려면, 각각의 상황에 맞는 접근 방법을 사용하는 것이 중요합니다. 코드를 잘 유지하는 것처럼 디자인 스타일도 일관성을 유지하고 효율적으로 관리하는 것이 관건입니다.

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

아이콘 빌런 부분

0

26

2

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

0

51

1

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

0

47

1

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

1

43

2

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

0

40

1

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

0

50

2

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

0

62

2

next step?

1

78

1

16강 Print Variables 출력 질문

0

84

2

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

0

78

2

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

0

98

2

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

0

120

2

이미지 캐러셀 영상

0

70

2

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

0

107

3

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

0

66

2

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

0

61

1

컴포넌트별 베리어블 구축

0

82

2

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

0

41

1

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

0

54

2

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

0

63

2

교육용 피그마 계정 문의

0

65

2

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

0

91

3

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

0

53

2

섹션 6 / 29.Button 강의 질문

0

68

2