인프런 커뮤니티 질문&답변
작성한 질문수
Style - variable 문으ㅣ ㅜㅜ
해결된 질문
작성
·
24
0
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
안녕하세요 선생님! 강의 잘 듣고 있습니다. 그런데 한 가지 이해가 가지 않는 것이… 피그마 토큰 플러그인을 사용해서 등록한 후에 네이티브로 스타일에 등록을 하신다고 했는데, 배리어블에 등록을 하면 되는 것 아닌가요? 스타일은 참조 같은 기능이 안 돼서 피그마에서 실제로 사용할 때도 배리어블로 토큰 관리하는 게 좋다고 알고 있는데 뭐가 맞는 건지 모르겠습니다 ㅠㅠ
답변 2
0
안녕하세요 이다은님 😀
해당 강의는 베리어블이 나오기 이전에 찍은 영상이라 베리어블이 없을 때 네이티브 스타일로 관리한 영상입니다.
현재는 로컬 베리어블로도 토큰을 관리할 수 있고 토큰 스튜디오로도 토큰을 관리할 수 있습니다. 두가지 다 장단점이 있는데요,
로컬 변수 중심(네이티브) 추천 상황
디자인 팀 주도, Figma 내부에서 테마/스케일만 잘 돌면 되는 규모
Dev Mode로 변수명 노출만으로도 개발 핸드오프가 충분한 팀
별도 Git·CI 파이프라인 없이 간단하게 운영하고 싶은 경우
→ 컬렉션/모드/에일리어싱을 활용하고, 그라디언트·다중 이펙트는 스타일로 병행
Tokens Studio 추천 상황
다플랫폼(iOS/Android/Web) 산출물(CSS 변수/JSON/Swift/Kotlin 등)로 자동 변환이 필요
GitHub 양방향 동기화로 토큰을 코드처럼 버전 관리·리뷰·배포하려는 경우
브랜드/프로덕트가 많아 대규모 테마 조합과 브랜치 실험이 잦은 조직
Style Dictionary 등과 CI 파이프라인로 디자이너 변경→개발 산출 자동화를 구축할 팀
→ 플러그인에서 토큰 세트 설계 → Git 연동 → CI에서 변환/배포.
그래서 결론은.
작고 단순한 팀/프로덕트: Figma 로컬 변수(+스타일) 만으로도 충분하고,
규모가 크거나 다플랫폼·자동화가 중요한 팀: Tokens Studio + Git/CI로 “토큰을 코드처럼” 관리를 진행합니다.
가장 흔한 베스트 프랙티스는 네이티브(변수/스타일)로 디자인 작업하고, Tokens Studio로 토큰 원천을 JSON으로 관리·배포하는 혼합 전략을 가져갑니다.
감사합니다 :)
0
안녕하세요, 인프런 AI 인턴입니다.
이다은님, 피그마에서 디자인 시스템을 설정할 때 “토큰”과 “배리어블” 기능이 혼란스러우신 것 같습니다. 이 두 가지 기능은 각각의 용도와 이점이 있습니다.
피그마 토큰 플러그인: 등록한 디자인 토큰을 사용하면 여러 디자이너와 협업할 때의 일관성을 유지하고자 할 때 유용합니다. 예를 들어, 색상, 타이포그래피, 간격 등의 스타일을 토큰으로 정의하여 관리하면, 전체 입력 값을 한 번에 변경할 수 있습니다.
피그마의 배리어블(Variable): 피그마의 로컬 변수는 보다 유연하며, 특정 모드(예: 다크 모드, 라이트 모드) 또는 케이스에 따라 다양한 값으로 전환할 수 있게 돕습니다. 이는 고급 프로토타이핑과 상호 작용에 유용합니다.
기본적으로, 디자인 시스템에서는 사용하는 도구에 따라 적절한 방법을 선택하면 됩니다. 스타일 시스템을 네이티브로 등록하면 변수를 사용하여 참조할 수 없지만 일관된 스타일을 유지하는 데 유리합니다. 반면, 배리어블을 사용하면 보다 동적인 상황에 대처할 수 있게 됩니다.
토큰과 스타일에 관한 유용한 답변도 도움이 될 수 있습니다. 여기에선 피그마의 로컬 변수와 토큰 플러그인을 어떻게 활용할 수 있는지, 또한 두 기능의 차이점에 대한 교수님의 추가 설명을 확인할 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.