강의

멘토링

로드맵

인프런 커뮤니티 질문&답변

Mira Kim님의 프로필 이미지
Mira Kim

작성한 질문수

6주 완성 디자인 시스템 부트캠프 4기

[이론📖] 타이포그래피 배리어블 
구조, 구성 짜보기

variables 관련 질문입니다.

작성

·

12

0

스크린샷 2025-09-30 오전 10.51.13.png.webp

다른 분이 하셨던 디자인시스템을 볼 수 있는 기회가 생겨서 피그마로 보고 있는데, 선생님께서 알려주신 "variables" 기능에는 색상값(4개정도 ?)만 조금 있고 아무 것도 안보이는데, 사진처럼 저런 셋팅이 되어있다는건 플러그인을 사용한걸까요 ??

답변 2

0

볼드 UX님의 프로필 이미지
볼드 UX
지식공유자

안녕하세요, Mira Kim님 아마 해당 UI Kit은 오래전에 제작되었거나, 배리어블을 충분히 활용하지 못한 상태에서 만들어진 것으로 보입니다.

 

최근에는 그런 방식으로 구현하지 않습니다. 다른 UI Kit을 살펴보셔도, 특별한 이유가 없는 한 모드를 저런 식으로 처리하지는 않죠.

 

지금은 변수를 활용해 모드를 적용할 수 있기 때문에, Mode라는 프로퍼티를 두고 Light Mode와 Dark Mode 값을 지정하는 방식을 사용합니다. 따라서 예전처럼 모드별로 값을 따로 만들어 두는 접근은 거의 쓰이지 않습니다.

 

다만, 제가 해당 UI Kit 전체를 직접 확인한 것은 아니고, 제작자의 의도 또한 알 수 없기 때문에 단정적으로 말씀드리기는 어렵습니다.

 

감사합니다. 볼드 드림.

0

안녕하세요, 인프런 AI 인턴입니다. Mira Kim님의 질문에 대한 도움이 될 만한 정보를 찾아보았습니다.

질문의 핵심:

  • 다른 디자인 시스템에서 피그마의 “variables” 기능을 통해 다양한 설정이 눈에 보이지 않는 이유.
  • 이미지 속 설정들은 플러그인 사용 여부에 관한 것입니다.

피그마의 Variables 기능 요약:

피그마의 “variables” 기능은 주로 색상, 수치, 기타 스타일 속성에 대해 편리한 관리를 제공하기 위한 기능입니다. 특정 설정(예: State, Size, Type, Mode 등)이 variables 내에 보이지 않는다면, 이는 플러그인이나 추가적인 커스터마이제이션 기능을 사용했을 가능성이 있습니다.

관련 정보:

  1. 플러그인 또는 커스텀 기능 사용:

    • 일반적으로 variables에 직결되지 않는 요소는 커스텀 속성으로 정의되거나 특정 플러그인을 통해 관리될 수 있습니다.
    • 사용자 정의를 위해 디자인 시스템에 맞춤형 플러그인이나 확장을 사용해야 할 수도 있습니다.
  2. 디자인 시스템의 복잡도:

    • 단순히 피그마의 기본 기능만을 사용하는 것이 아니라, 커스텀 라이브러리가 존재할 가능성도 있습니다.
    • 스타일 가이드컴포넌트 라이브러리가 잦은 변화 없이 관리되도록 외부 도구와의 연동을 허용할 수 있습니다.

유사한 질문과 답변의 참고 자료:

이상의 정보를 통해, 현재 보고 계신 피그마 파일의 설정과 구조를 이해하는 데 도움이 되었기를 바랍니다. 해당 파일이 어떤 플러그인이나 커스텀 설정을 통해 관리되고 있는지를 살펴보는 것이 좋을 것입니다.

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

Mira Kim님의 프로필 이미지
Mira Kim

작성한 질문수

질문하기