인프런 커뮤니티 질문&답변
작성한 질문수
베리어블에 콜렉션을 추가했음에도 피그마 우측에 스타일이 있는 이유
작성
·
21
0
안녕하세요. 강사님의 강의 보면서 스타일도 추가하고 스타일에 추가한 것들을 베리어블에 옮기는 작업을 하고 있습니다.
궁금한 점은.. 스타일에 굳이 추가하지 않고 바로 베리어블에 콜렉션을 추가해서 신규 베리어블을 추가하는 방법을 쓰는 방법도 있을 것 같거든요.
그런데 머티리얼 디자인이나 애플 디자인 시스템 피그마 파일을 열어보면 베리어블에 콜렉션이 있고, 오른쪽 스타일 패널에서도 스타일을 추가한 것을 볼 수가 있어요.. 어차피 베리어블 한가지만 쓸텐데 왜 스타일도 추가가 되어있는지 궁금합니다
답변 2
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님께서 궁금해하시는 부분에 대해 설명해드리겠습니다.
질문의 핵심:
- 왜 디자인 시스템에서 변수(베리어블)를 사용하면서도 스타일이 추가되어 있는지에 대한 궁금증
스타일과 베리어블의 차이 및 사용 이유:
다양한 기능 활용:
- 스타일(Local Styles): 피그마는 스타일을 통해 색상, 텍스트, 효과를 쉽게 재사용하고, 변경 사항을 일괄적으로 적용할 수 있도록 돕습니다.
- 베리어블(Variables): 베리어블은 더욱 유연한 토큰 관리와 상태 기반 디자인을 가능하게 합니다.
- 스타일(Local Styles): 피그마는 스타일을 통해 색상, 텍스트, 효과를 쉽게 재사용하고, 변경 사항을 일괄적으로 적용할 수 있도록 돕습니다.
베리어블과 스타일의 상호보완성:
- 베리어블은 디자인 시스템의 hierarchy(계층 구조)와 상태 관리를 쉽게 만들어 주는 반면, 스타일은 아직도 많은 디자인 요소의 기초로 사용됩니다. 이는 예를 들어, 협업 시 디자이너와 개발자의 공통 언어로서 또는 특정한 디자인 속성을 빠르게 참조할 때 중요합니다.
- 베리어블은 디자인 시스템의 hierarchy(계층 구조)와 상태 관리를 쉽게 만들어 주는 반면, 스타일은 아직도 많은 디자인 요소의 기초로 사용됩니다. 이는 예를 들어, 협업 시 디자이너와 개발자의 공통 언어로서 또는 특정한 디자인 속성을 빠르게 참조할 때 중요합니다.
백워드 호환성과 지원:
- 기존의 시스템이나 의존성 문제로 인해 스타일을 유지하면서도, 최신 기능인 베리어블을 함께 사용하는 것이 유리할 수 있습니다. 이는 디자인 시스템을 점진적으로 현대화하거나 호환성을 유지하려는 의도로 볼 수 있습니다.
- 기존의 시스템이나 의존성 문제로 인해 스타일을 유지하면서도, 최신 기능인 베리어블을 함께 사용하는 것이 유리할 수 있습니다. 이는 디자인 시스템을 점진적으로 현대화하거나 호환성을 유지하려는 의도로 볼 수 있습니다.
관련 정보 및 읽을거리:
- Local Styles and Variables in Figma: 이 게시물은 어떻게 스타일과 베리어블이 피그마에서 상호작용하는지에 대한 정보를 제공하며, 두 가지 모두를 사용하는 이유를 이해하는 데 도움이 될 수 있습니다.
- Understanding Tokens and Styles: 이 질문에서는 토큰과 스타일의 차이를 맥락적으로 설명하고 있습니다.
디자인 시스템은 종종 복잡하고 여러 요소들이 상호작용하므로, 상황에 따라 스타일과 베리어블을 함께 사용하는 것이 더 적합할 수 있습니다. 피그마에서는 이를 통해 모든 디자이너가 협력할 때 일관성을 유지하며 유연하게 디자인할 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.