[Token-Sync] 피그마 토큰 깃허브 연동 로컬 플러그인

기존 토큰 스튜디오라는 플러그인을 사용 중, 다음과 같은 문제가 발생했습니다.

1. 디자인 토큰이 렉 걸려서 날아간다...
2. 플러그인이 너무 무겁다. 필요한 기능 대비 많은 기능이 있어서 오히려 복잡하다.
3. 깃허브 연동할 때 브랜치를 별도로 계속 파줘야 한다. design 브랜치가 오래되면 기존 브랜치와 머지할 때 충돌이 자주 발생한다...

그래서, 가벼운 기능에 위 문제들을 해결할 수 있는 플러그인을 제작했습니다.

사실 저는 거의 지적만 하고 지피티와 코덱스만 열일했지만요ㅎㅎ

그래서 만든 토큰 싱크는 다음과 같은 기능을 중점으로 둡니다.

1. 기본적으로 깃허브 연동.
2. 알아서 브랜치 분기처리.
3. json으로 토큰 정리.

 

사용방법은 간단합니다.

1. 깃허브 토큰 입력
2. 레포 입력
3. 토큰을 올릴 브랜치 입력
4. 분기할 브랜치 입력
5. 토큰 파일 경로 입력
6. 커밋 메세지 작성

푸시 버튼으로 깃허브에 올리기~

이 정도에 json 파일 미리보기를 제공합니다.

그래서 위의 기능을 담은 플러그인을 아래처럼 배포해둔 상태이고, 피그마 커뮤니티에 올리는 건 아직 고민중입니다.

https://github.com/Sleepingoff/token-sync/releases/tag/v0.0.2

Release v0.0.2 · Sleepingoff/token-sync

1. 배포 링크에서 zip 파일 다운받고 압축 해제
2. 피그마에서 우클릭 > 플러그인 > 디벨롭먼트 > 임포트... > 파일 경로에서 manifest.json 선택
3. 플러그인 사용

이렇게 하면 로컬에 있는 플러그인을 사용할 수 있답니다.

AI를 이용해서 순수하게 AI가 작성하게 했지만, 생각보다 플러그인 만드는 방법이 쉬워서 다음에 필요한 기능이 있다면 한 번 직접 만들어보는 것도 나쁘지 않을 것 같다는 생각이 들었습니다. 물론, 기존 플러그인들이 많기 때문에 그럴 일은 적겠지만...

 

v0.0.4 업데이트

• preview 생성 중 토큰 경로 충돌이 나도 전체 preview가 죽지 않도록 수정
• 충돌 메시지를 구체화해서 어떤 토큰/그룹과 부딪혔는지 표시하도록 개선
• typography 토큰의 fontSize, lineHeight, letterSpacing 값에 뜨던 부동소수점 노이즈를 반올림 처리
• 스타일 토큰 경로를 정리해서 stylesStyles...처럼 중복 접두사가 생기지 않도록 수정
• 변수 export를 컬렉션별 token set 구조로 분리해 컬렉션 간 이름 충돌 방지
• alias/reference 변수 export 시 실제 참조값을 해석하도록 수정
• alias가 다른 컬렉션을 참조하는 경우에도 각 컬렉션 mode에 맞게 값을 해석하도록 보완
• Style Dictionary 변환 가능 여부 검증 완료
• manifest 수정으로 Dev Mode inspect 플러그인 실행 가능하도록 설정 보완
• dynamic-page 환경 대응
• 변수/스타일/컬렉션 조회를 sync API에서 async API로 전환
• documentchange 등록 전 loadAllPagesAsync() 호출하도록 초기화 순서 수정
• Design Mode와 Dev Mode에서 UI 역할을 분리
• Design Mode는 기존 GitHub sync + JSON preview 유지
• Dev Mode는 선택 레이어의 컬러 토큰 인스펙터로 동작하도록 변경
• Dev Mode에서 선택 레이어의 컬러 토큰 정보를 컬렉션 / 토큰 이름 / 실제 값 기준으로 표시
• 단순 문자열 나열 대신 Fill, Stroke, Text Fill 섹션 아래 카드 UI로 표현
• 텍스트 레이어 선택 시 텍스트 내용을 표시하고 복사할 수 있는 UI 추가
• Dev Mode에서는 패널 높이를 크게 열고 자동 resize 되도록 조정
• Design Mode에서는 자동 resize를 꺼서 사용자가 창 크기를 유지할 수 있게 조정
• Design Mode 우측하단에 // 리사이즈 핸들 추가
• // 핸들이 항상 우측하단에 고정되도록 위치 보정

>> https://github.com/Sleepingoff/token-sync/releases/tag/v0.0.4