inflearn logo
강의

講義

知識共有

[UI3アップデート] Figma変数を利用したデザインシステムを構築する

テキストフィールド(Text Field) ✅

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

40

tkdldjs1236290

投稿した質問数 4

0

버튼과 같이 '클릭' 액션이 있는 인터랙티브한 부분에는 bg/interactive 그룹에 있는 컬러를 사용하는 것으로 이해하고있는데
Text field의 bg는 그냥 일반형 컬러를 사용하는 것으로 보입니다.

강의상에서 빠른 제작을 위해 시적 허용...? 을 하신 것이죠?

실제 현업에서 사용할때는 interactive 컬러와 일반 컬러를 구분해서 사용해줘야할 것 같다는 생각이 드는데, 이것은 제 일차적인 생각이고

interactive라는 그룹을 색상 자체가 변동되는 (Hover, Press 액션이 있는) 컬러들의 그룹이라고 가정하면, 해당 텍스트 필드에서는 배경의 변화가 없으니 interactive가 아닌 컬러그룹을 사용하신 것인가? 라는 생각도 듭니다.

물론 정답은 없겠고, 사용하려는 방향과 정책에 따라 다들 다르겠지만 강의에서는 어떤 의도로 사용하셨는지가 궁금합니다

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

回答 1

0

bolduxlab

허이짜님 안녕하세요.

말씀해주신 것처럼 강의에서 제공된 토큰(베리어블) 구조 관점에서 텍스트 필드 안에 있는 요소들은 모두 interactive 컬러를 사용하는 것이 좋습니다.

 

제가 작업할 때는, (말씀해주신대로) 사용자가 보았을 때 시각적으로 상태가 변하는 요소들에만 interactive 컬러를 적용했습니다. 제 텍스트 필드의 경우에는 배경색이 상태에 따라 변하지 않기 때문에 interactive 값을 따로 적용하지 않았습니다.

 

이런 선택을 한 이유는, 작업을 하다 보면 예외 케이스가 생기게 되고, 그때마다 값을 추가하다 보면 불필요하게 갯수가 늘어날 수 있기 때문입니다. 그래서 기본적인 기준만 두고, 나머지는 상황에 맞게 확장할 수 있도록 하였습니다.

 

강의에서는 이러한 기준으로 설명드렸지만, 제가 현재 회사 실무/사이드 프로젝트에서는 오히려 interactive 개념을 아예 제거하고 더 슬림하게 사용합니다. 결국에는 회사 내 디자이너·동료분들과 협업하면서 상황에 맞게 선택하시고, 강의에서 제공되는 것은 하나의 예시로 봐주시면 될 것 같습니다.

 

감사합니다.

볼드 드림!


 

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

0

35

0

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

0

39

1

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

1

34

2

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

0

32

1

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

0

46

2

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

0

55

2

next step?

1

73

1

16강 Print Variables 출력 질문

0

84

2

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

0

68

2

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

0

95

2

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

0

117

2

이미지 캐러셀 영상

0

68

2

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

0

102

3

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

0

63

2

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

0

57

1

컴포넌트별 베리어블 구축

0

80

2

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

0

54

2

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

0

62

2

교육용 피그마 계정 문의

0

64

2

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

0

88

3

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

0

53

2

섹션 6 / 29.Button 강의 질문

0

67

2

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

0

55

1

베리어블 이름에 대해 질문드립니다

0

123

2