참고
Hand Off란?
NOTE
피그마와 같은 디자인 툴에서 HTML/CSS 코드로 변환하는 과정을 말한다.
.png&blockId=95da15c0-0375-445d-85fe-db90aa15f8d1)
좌측이 토큰요소이고, 우측이 깃허브 연동을 관리하는 이미지이다.
•
물론 컴포넌트 자체가 코드로 완벽하게 완성되는건 아니고.. 색상, 간격과 같은 기본적인 토큰(색상, 간격)들을 JSON으로 뽑아오는건 가기능하다
•
FigmaTokens을 활용해서 기본적인 디자인 토큰을 보내보자.
토근 깃허브 연동
NOTE
•
해당 모달창의 정보를 입력하면 깃허브와 연동이 된다.
•
이후 정보를 입력하고 Commit을 실행하면..
빨간 네모부분에 파일이 생김!
실제 파일코드 (상당히 길다)
•
이제 디자이너가 작업한 바로 반영이 가능하게됨!
JSON을 받았는데 어떻게 쓰냐?
NOTE
사실 JSON을 바로 쓰지는 못하고 변환작업이 필요하다
•
tokens transformer라는 도구를 활용해서 후가공을 처리해야한다고 하는데 이에 대해서는 아직 조사가 덜됨
•
자세히는 모르겠지만 위의 링크에 있는 도구들이 위에서 관리하는 토큰들을 후가공 처리해준다고 한다.