강의

멘토링

로드맵

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

이다은님의 프로필 이미지
이다은

작성한 질문수

디자인 시스템 with 피그마

컬러 (Color content)

피그마 배리어블에 export시 값 저장 안됨

해결된 질문

작성

·

198

0

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

 

토큰 스튜디오에 아래와 같은 식으로 스페이싱 정리 후,

이미지 2025. 8. 13. 20.37.jpeg.webp

 

배리어블로 export를 했는데 아래처럼 값이 0으로 나옵니다. 모드 이름을 다르게 해서 그런 건가요? ㅠ 스타일은 아무래도 범용성이 적어서 실제 사용할 때는 배리어블로 토큰 정리를 하려고 하는데, 배리어블에서 토큰스튜디오로 import는 도ㅣ는데 반대가 안 돼서요…

이미지 2025. 8. 13. 20.41.jpeg.webp

 

 

토큰 스튜디오에는 primitive.spacing.* 식으로 저장을 하고 실제 값은 중괄호로 변수처리했습니다.

배리어블에는 primitive.spacing.* 식으로 저장을 해뒀는데 mode 이름이 default라서 그런 건가요?? 궁금합니다ㅠㅠㅠㅠㅠㅠ

퀴즈

67%나 틀려요. 한번 도전해보세요!

디자인 시스템에서 4px과 같은 기준 간격 단위를 사용하는 주된 이유는 무엇일까요?

디자인 파일 용량을 감소시키기 위해

일관성 있는 간격 체계를 만들고 개발 적용 효율을 높이기 위해

디자이너가 자유롭게 미세 간격을 조절하기 위해

애니메이션 효과 적용을 쉽게 하기 위해

답변 3

0

범쌤님의 프로필 이미지
범쌤
지식공유자

답변 완료.

0

이다은님의 프로필 이미지
이다은
질문자

ㅈㅔ가 모드 스크롤을 안 하고 있었네요… 발견했습니다!! ㅠㅠ 그런데 추가로 저는 라이트모드만 사용을 하고, 다크모드는 지원할 계획이 없는데 그러면 모드 이름을 어떻게 설정해야 하나요? 상태값 (디폴트, 호버 등) 은 토큰스튜디오의 폴더에 지정을 따로 해서 설정하는 건가요? 모드에는 라이트/다크만 하는 게 맞나요? ㅠㅠ 너무 어렵습니다… 사실 제가 대학교 2학년인데 포트폴리오가 많이 쌓여서 어쩌다보니 작은 스타트업의 디자인팀을 리드하고 있는 상황이라, 이론적인 부분이 주니어의 ㅈ자도 안 돼서 공부를 하면서 하고 있는데 너무 어려워서 질문이 많네요 ㅜㅜ 죄송합니다

범쌤님의 프로필 이미지
범쌤
지식공유자

안녕하세요 이다은님 😀

 

우선 토큰스튜디오에서 네이티브 베리어블로 내보내는 과정을 GIF로 보여드립니다 ^-^

Aug-14-2025 06-50-44.gif

 

우선 스타트업에 프로젝트의 여부와 개발자가 어디까지 커뮤니케이션 할 수 있는지에 따라서 토큰 스튜디오의 사용 여부를 정하셔야 할 것 같아요

 

급하신 경우라면 인프런에 멘토링 시스템을 신청하시면 다은님의 상황이 어떤 상태이고 어떤 디자인을 해야 하는지 확인 후 좀 더 자세한 가이드를 화면을 보면서 드릴 수 있을 것 같습니다 😃

 

감사합니다 :) 

 

 

 

 

0

안녕하세요, 인프런 AI 인턴입니다. 이다은님.

토큰 스튜디오에서 설정한 스페이싱 값을 배리어블로 내보낼 때 값이 0으로 나오는 문제는 여러 가지 원인으로 인해 발생할 수 있습니다. 주로 값이 올바르게 저장되어 있지 않거나, 모드가 제대로 설정되지 않은 경우가 일반적인 원인인데요. 다음 몇 가지 체크 포인트를 확인해 보시면 도움이 될 수 있습니다:

  1. Primitive 단위 확인: 토큰 스튜디오에서 설정한 단위와 배리어블에서 사용하는 단위가 일치하는지 확인하세요. 기본적으로 “primitive.spacing.*“로 설정하셨다고 하셨는데, 이 부분이 정확히 일치하는지 확인해주세요.

  2. 모드 이름 확인: 배리어블에서 모드 이름이 “default”로 설정되어 있는 것이 문제일 수 있습니다. 각각의 스페이싱 값이 특정 모드에 잘 매핑되어 있는지 확인하세요. 모드가 여러 개일 경우, 각 모드에 대해 올바른 값을 확인하는 것이 중요합니다.

  3. 값의 참조 및 저장: 실제로 변수 처리한 값이 제대로 참조되고 저장되었는지 확인이 필요합니다. 중괄호로 변수 처리를 한 것이 문제가 될 가능성은 낮지만, 잘못된 참조가 있을 수 있으니 이 부분도 한번 다시 검토해 보세요.

더 깊이 있는 이해와 문제 해결을 위해서는 다른 수강생들이 비슷한 문제에 대해 어떻게 해결했는지를 참고하는 것이 좋습니다. 아래 몇 가지 관련 게시물을 확인해 보시기 바랍니다:

각 게시물에서 유사한 문제에 대한 해결 방법을 찾아보실 수 있습니다. 특히 모드 설정이나 변수 처리 측면에서 주의해야 할 점이 종종 언급됩니다.

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

이다은님의 프로필 이미지
이다은

작성한 질문수

질문하기