프론트에서 json파일을 가공하여 사용하는 방법
안녕하세요! 디자인시스템 강의 잘들었습니다~
현재 디자인/퍼블리싱을 업무를 병행하는 디자이너인데요.
json파일을 푸시하고 그 후에 프론트에서는 어떻게 가공해서 사용하는지에 대해 궁금합니다. 추후 강의 계획이 있으실까요?
답변 1
3
안녕하세요 이송이님 :)
토큰을 가공하는 과정은 글로 설명하기 많이 복잡하나. 간단하게 플로우만 정리해보겠습니다.
1. 디자이너가 github에 올린 json파일을 개발자가 받습니다.
2. 토큰 가공에 필요한 token-transformer 패키지를 설치합니다. (npm)
3. token-transformer를 통해 1차 가공을 거칩니다. (1차 가공을 거친 후 파일은 js로 스타일링을 하는 유저들인 emotion, stype-component를 사용하는 유저라면 바로 사용할 수 있습니다.)
4. 가공된 토큰을 퍼블리셔가 사용할 수 있도록 style-dictionary를 사용해 2차 가공을 거칩니다. (pureCSS, SCSS, TailwindCSS, etc..)
토큰을 가공하는 과정은 npm을 사용해 가공되므로 자바스크립트를 잘 모르는 퍼블리셔분들은 가공하기가 조금 어려울 수 있습니다.
토큰을 가공하는 추후 강의 계획은 없습니다 ㅠㅠ 오프라인 강의로는 진행을 했었는데, 요즘 디자인 시스템이 아닌 다른(프론트개발) 오프라인 강의가 많아져서 당분간은 힘들듯 합니다 ㅠㅠ..
0
꼼꼼한 설명 감사합니다-_-)b 자바스크립트도 공부 중이라 한 번 시도해보겠습니다.
혹시 추후 디자인시스템 오프라인 강의가 진행 된다면 어디에서 알 수 있을까요? 범쌤님 개인 블로그나 인프런 등등 공지를 하는 공간이 있으실까요 ..?
0
안녕하세요 이송이님 :)
이런 문의들이 종종 있어서 수강생수가 어느정도 (300~400명) 차면 인프런에 오프라인 강의 모집을 한번 해볼까 합니다.
오프라인 강의를 모집하는 새소식 글을 올리게 되면 아마 메일로 알림이 가지 않을까 생각합니다 :)
그리고 예전 학생분이 똑같이 후가공에 대한 질문에 제가 답변을 드린 내용이 있어서 참고하시라고 링크 같이 달아놓겠습니다.
https://www.inflearn.com/questions/659459
관심 가져주셔서 감사합니다.
borderTransparent를 라이트/다크모드에 이중등록
0
23
1
해결되었습니다.
0
20
1
안녕하세요! 강의잘 들었습니다.
0
70
2
타이포그래피 16 -> 14 변경 시 XXXL만 변경 안 됨
0
45
1
토큰스튜디오에서 폰트 스타일등록 문의
0
63
2
토큰에서 style로 export시 에러
0
69
2
컬러시스템 등록 관련
0
69
2
토큰 light/dark mode 오류
0
65
2
Pretendard 없으면 에러납니다
0
226
2
폰트 토큰 작업 할때
1
96
3
여기 수업에서 엘로우나 레드나 블루 이런 컬러들을 다양하게 만드는 이유가 뭔가요?
0
55
2
토큰을 깃허브에 올리는 방법이 없어진거 같은데요
1
79
2
토큰 export 할때 어떻게 해야 하나요? 버전이 바뀌어서 그런지 못찾겠어요
0
207
2
인프런 할때마다 짜증나는데 수업내용이 너무 오래된건 제발 삭제좀 하던지 다시 찍던지 해주세요
1
76
1
tailwind color generator 이게 작동이 잘 안되네요
0
71
2
figma tokens플러그인 안나오는데요??
0
120
2
혹시 토큰 가공할 수 있는 강의도 따로 있을까요??
1
51
2
피그마 배리어블에 export시 값 저장 안됨
0
200
3
Style - variable 문으ㅣ ㅜㅜ
0
65
2
borderTransparent 임포트가 안됩니다
1
66
2
화면이 보이지가 않아요?
0
65
1
컬러맵핑하고 라이트/다크 모드 설정시 색상 반전이 안돼요 ㅠㅠ
1
268
2
피그마 토큰 플러그인
1
290
2
깃허브 sync 오류
1
192
2