베리어블에 콜렉션을 추가했음에도 피그마 우측에 스타일이 있는 이유

작성한 질문수 4

0

안녕하세요, design_team님.

질문 주셔서 감사합니다.

타이포그래피 파트에서 자세히 설명드리겠지만, 질문 주신 내용은 강의 초반에 소개되는 베리어블(Variable)과 스타일(Style)의 근본적인 차이에서 비롯됩니다.

특히 다음 두 가지 차이가 핵심입니다:

• 복합 토큰 여부

• 모드 적용 여부

복합 토큰(Composite Token) 여부

• 베리어블은 한 번에 하나의 값만 가질 수 있습니다.

   

• 반면 피그마 스타일은 여러 속성을 묶은 ‘복합적인 값’을 가질 수 있습니다.

   

   

  즉, 베리어블은 기능적으로 나누어져 있고(예: size, weight 등),

  아무리 그룹으로 묶어도 각각 개별 토큰입니다.

  하지만 스타일은 이 여러 토큰을 하나로 묶은 형태로 사용할 수 있습니다. 예를 들어, H1의 경우는 하나의 스타일 안에 여러개의 배리어블이 담겨 있을 수 있습니다.

   

스타일: H1

• 배리어블: h1-font-size

• 배리어블: h1-font-weight

• 배리어블: h1-line-height

   

   

사실개발 관점에서는 이렇게 쪼개질 필요가 없지만, 디자인(피그마 툴)에서는 스타일이 먼저 생기고 베리어블 기능이 나중에 추가되다 보니 이 두 방식을 모두 유지하면서 자연스럽게 구조가 이렇게 형성된 것 같습니다.

모드(Mode) 적용 여부

• 베리어블은 모드를 변경할 수 있지만,

• 스타일은 모드를 직접 변경할 수 없습니다.

   

그래서 스타일에 바로 모드를 입히는 대신, 시맨틱 베리어블 컬렉션을 따로 만든 후 그 값을 스타일에 적용하는 방식을 사용하게 됩니다.

만약 Desktop모드에서 Mobile모드로 변경하면, 스타일 H1이 마치 변경 되는 것 같지만, 실제로는 배리어블이 변경이 됩니다.

스타일: H1

• 배리어블: h1-font-size(Desktop -> Mobile)

• 배리어블: h1-font-weight(Desktop -> Mobile)

• 배리어블: h1-line-height(Desktop -> Mobile)

저의 설명이 도움이 되셨으면 좋겠습니다. 더 궁금하신 부분 있으면, 질문 주세요.

감사합니다. 볼드 드림.

0

안녕하세요, 인프런 AI 인턴입니다. design_team님께서 궁금해하시는 부분에 대해 설명해드리겠습니다.

질문의 핵심:

• 왜 디자인 시스템에서 변수(베리어블)를 사용하면서도 스타일이 추가되어 있는지에 대한 궁금증
  

스타일과 베리어블의 차이 및 사용 이유:

1. 다양한 기능 활용:

   • 스타일(Local Styles): 피그마는 스타일을 통해 색상, 텍스트, 효과를 쉽게 재사용하고, 변경 사항을 일괄적으로 적용할 수 있도록 돕습니다.
     
   • 베리어블(Variables): 베리어블은 더욱 유연한 토큰 관리와 상태 기반 디자인을 가능하게 합니다.
     

2. 베리어블과 스타일의 상호보완성:

   • 베리어블은 디자인 시스템의 hierarchy(계층 구조)와 상태 관리를 쉽게 만들어 주는 반면, 스타일은 아직도 많은 디자인 요소의 기초로 사용됩니다. 이는 예를 들어, 협업 시 디자이너와 개발자의 공통 언어로서 또는 특정한 디자인 속성을 빠르게 참조할 때 중요합니다.
     

3. 백워드 호환성과 지원:

   • 기존의 시스템이나 의존성 문제로 인해 스타일을 유지하면서도, 최신 기능인 베리어블을 함께 사용하는 것이 유리할 수 있습니다. 이는 디자인 시스템을 점진적으로 현대화하거나 호환성을 유지하려는 의도로 볼 수 있습니다.
     

관련 정보 및 읽을거리:

• Local Styles and Variables in Figma: 이 게시물은 어떻게 스타일과 베리어블이 피그마에서 상호작용하는지에 대한 정보를 제공하며, 두 가지 모두를 사용하는 이유를 이해하는 데 도움이 될 수 있습니다.
  
• Understanding Tokens and Styles: 이 질문에서는 토큰과 스타일의 차이를 맥락적으로 설명하고 있습니다.
  

디자인 시스템은 종종 복잡하고 여러 요소들이 상호작용하므로, 상황에 따라 스타일과 베리어블을 함께 사용하는 것이 더 적합할 수 있습니다. 피그마에서는 이를 통해 모든 디자이너가 협력할 때 일관성을 유지하며 유연하게 디자인할 수 있습니다.

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