inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기

베리어블 개발자와 싱크 맞추기

해결된 질문

697

허창민

작성한 질문수 1

0

우선 강의 잘 들었습니다 :-)

시청 후 궁금한 사항이 생겼는데요.

 

베리어블을 활용해 디자인 시스템을 구축한 뒤, 수정을 했을때 github 푸시를 통한 싱크 맞추기 기능이나
플러그인은 엔터프라이즈 요금제 제외하고 따로 없는 상태일까요? (tokens studio 같은 기능이요!)

만약 없다면 수정했을 경우 개발자와 어떻게 싱크를 맞추면 좋을까요? 팁이 있으시다면 알려주시면 감사하겠습니다.

웹-디자인 figma figma-tokens 디자인-시스템 아토믹-디자인 figma-variable

답변 1

0

볼드 UX

질문 주셔서 감사합니다. 이 부분은 강의 범위와 벗어나는 부분이지만 제가 알고 있는 방법 안에서 공유해드리겠습니다.

 

언급하셨듯이 엔터프라이즈 라이센스를 사용하시면 디자인 토큰은 REST API를 통해서 쉽게 동기화가 가능합니다.

https://medium.com/@NateBaldwin/synchronizing-figma-variables-with-design-tokens-3a6c6adbf7da2.

 

다른 방법들로는....

  1. 토큰스튜디오

2024년 1월에 드디어토큰 스튜디오에서 베리어블 -> 토큰으로 바꿀 수 있는 기능을 업데이트 했고 아직까지 무료로 사용할 수 있습니다. 이 플러그인을 통해서는 깃헙 등과 연결해서 동기화할 수 있습니다.

 

  1. Supernova

써보지는 않았는데, Supernova로도 가능한 것 같아 한번 살펴보시면 좋을 것 같습니다.

 

  1. 플러그인

     

위에 있는 방법으로 주로 유료라서 쉬운 반면 밑에 아래 방법은 좀 손이 많이 가는 방법인데, 조금 튜닝은 해야될것 같습니다. 몇개 플러그인을 가지고 내보내기 한 후 개발자에게 json 파일을 보내는 방법입니다.

https://www.figma.com/community/plugin/1253571037276959291
이러한 json 파일을 Style dictionary를 사용하여 다른 플랫폼에 맞도록 변환해서 사용합니다.

https://docs.tokens.studio/transforming/style-dictionary

 

위의 방법들을 살펴보시고 개발자분과 상의하에 결정하시면 좋을 것 같습니다.

감사합니다.

아이콘 빌런 부분

0

22

1

배리어블 Value에 관해 질문있습니다.

0

46

0

Body>font weight 에서 semibold에 짝대기가 생기는 이유?

0

46

1

Navigation Mobile 토글 베리어블이 안됩니당

1

43

2

Typography 모드 적용시 표현된 값과 우측에 표시되는 값다름

0

40

1

디자인 시스템에 그룹명을 숨길 수도 있나요?

0

49

2

디자인 시스템 네이밍에 관한 질문드립니다.

0

62

2

next step?

1

78

1

16강 Print Variables 출력 질문

0

84

2

open in Figma 누르고 ui kit 다운?받았을 때

0

74

2

variables 이름 지을때 소문자,대문자 사용에 관해..

0

98

2

디자인 시스템 네이밍 순서에 대해 질문남깁니다!

0

119

2

이미지 캐러셀 영상

0

70

2

아이콘 사이즈 컴포넌트 구성 방식 관련

0

107

3

완강/리뷰 이벤트 후 강의자료

0

66

2

Stack 컴포넌트 관련하여 궁금한 점이 있습니다.

0

59

1

컴포넌트별 베리어블 구축

0

82

2

인풋 텍스트필드에서는 왜 'interactive/bg' 배리어블을 활용하지 않는 것인가요?

0

41

1

섹션 6 / 29.Button 강의의 아이콘 인스턴스 스왑 질문

0

54

2

UI Kit에서 배리어블 등록 안되는 문제

0

63

2

교육용 피그마 계정 문의

0

65

2

베리어블 등록했는데 스타일에 연결하려니까 안보여요..

0

91

3

폰트 웨이트 지정에서, '바디만 따로 웨이트를 시멘틱에 그룹핑 하는 이유'가 무엇인가요??

0

53

2

섹션 6 / 29.Button 강의 질문

0

68

2