Toktoken Plugin Guide

Installation

Toktoken 플러그인 설치법은 피그마 공식문서를 참고해주세요.

• Run plugins from Figma design
• Run plugins while in Dev Mode

info

개발자 분들은 Toktoken 플러그인 사용 전 Preparation 페이지를 읽어주세요.

Features

Parse Token

toktoken 은 피그마에 설정한 Local Variables, Local Text Style 등 설정값들을 조회하여 JSON 으로 변환합니다.

현재 지원하고 있는 값은 아래와 같습니다.

• Color: Figma 의 Local Variables 의 Color 를 조회합니다.
• Typography: Figma 의 Local TextStyle 을 조회합니다.

Download Token

파싱된 JSON 파일을 다운로드 할 수 있습니다.

Push Token to Github

파싱된 JSON 파일을 작업 레포지토리에 업로드 할 수 있습니다.

Preview

Json	Parsed

Usage

Internal & External

toktoken 플러그인은 똑똑한개발자의 사용 편의성을 위해 내부용(Internal)과 외부용(External) 으로 나누어져 있습니다.

	Internal (required password)	External
Parse Token	✅	✅
Download Token	✅	✅
Push Token to github repo	✅ 내부적으로 미리 발급받은 토큰을 사용합니다. for. https://github.com/TOKTOKHAN-DEV/[repo]	✅ 사용자가 직접 발급받은 토큰을 기입해서 사용합니다.

제공하는 기능은 동일 하지만, Internal 같은 경우 사내 레포에 한해서, token push 기능을 토큰 발급 없이 사용이 가능합니다.

info

Internal
로그인한 사용자에 한해 1회 비밀번호 인증이 필요합니다. 비밀번호는 똑똑한개발자 구성원에 한해 공유됩니다.

External
Github 작업 레포지토리에 json파일을 업로드 하기 위해서는 Personal Access Token을 필수로 제출해야합니다. Personal Access Token 섹션을 참고해주세요.

Push Token To Github

toktoken 플러그인을 사용하여 파싱된 JSON 파일을 작업 레포지토리에 업로드 할 수 있습니다. 업로드 하기위해 몇가지 정보를 입력해야 합니다.

Repository URL Required

작업 레포지토리 전체 URL입니다.

e.g) https://github.com/TOKTOKHAN-DEV/toktokhan-dev

Personal access token Conditional Required

작업 레포지토리에 접근하기 위해 필요한 토큰입니다. 외부용(External) 탭에서 사용시 필수값입니다.

info

• 토큰을 발급하는 방법은 Github 공식문서 를 참고해주세요.
  
• Permission 설정시 아래의 Fine-Grained Permission Setup 섹션을 참고해주세요.
  

Fine-Grained Permission Setup (For github upload)

1. 아래의 항목을 모두 설정해주세요.

• Repository permissions
  • Administration:read and write
    
  • Contents:read and write
    
  • Workflows:write
• Organization permissions
  • Members:read

2. 토큰을 발급하기 전, Overview를 통해 하기 이미지와 동일하게 설정이 되어있는지 다시 한 번 확인해주세요.

3. 이후에 발급받은 토큰을 Personal Access Token 필드에 넣어주세요.

NOTE

• 토큰의 만료기간은 프로젝트의 마감일 이상으로 설정해주세요.
  
• 생성된 토큰은 다시 볼 수 있는 방법이 없으니 꼭 복사해두세요.
  

Base branch name Optional (default: main)

새 브랜치가 생성되는 기준 브랜치 이름입니다.

Head branch name Optional (default: design-token)

파일이 포함 된 파일이 올라갈 브랜치 이름입니다.

Commit msg Optional (default: ‘Update design token’)

파일이 업로드 될 때 포함 될 커밋 메시지입니다.

Source path Optional (default: ‘public/token/token.json)

파일이 저장될 경로입니다.

필요한 양식이 다 작성 된 후 Upload to Gihub 버튼을 눌러주세요. 완료 되었다는 안내창이 뜨면 작업 레포지토리에 지정한 Head Branch name 으로 올라간 것을 확인하실 수 있습니다.

Connect with Slack

tip

Note: 슬랙에 알림을 받고 싶으시다면 Github 을 슬랙에 연동해주세요. 프로젝트 팀 채널에 아래 명령어를 입력해주시면 됩니다.

Invite Github

/invite @GitHub

구독

/github subscribe owner/repo commits:*
(e.g. /github subscribe TOKTOKHAN-DEV/toktokhan-dev commits:*)

구독 해제

/github unsubscribe owner/repo

* Reference Github-integration-slack