디자인 토큰
디자인 시스템의 시각적 디자인 단위. UI에서 일관된 시각적 시스템을 유지하기 위해 사용한다.
Tailwind Color Generator
컬러 시스템을 만들어주는 플러그인. 컬러를 숫자로 표현해준다. 네이밍 규칙이 있는데, 보통 50~900 사이로 정해주는 것이 효과적이다.
Resourses에서 Tailwind Color Generator를 검색한다.
원하는 색상 그룹의 이름을 설정하고, Check -> Create를 눌러주면 색상 그룹이 아래 그림 오른쪽 하단과 같이 완성된다.
Tokens Studio for Figma
피그마에서 토큰을 생성하게 해주는 플러그인
Resources에서 Tokens Studio Figma를 검색한다.
New empty file을 클릭해 새 토큰을 생성한다.
global은 기본 설정이며, 아래의 Styles & Variable을 선택하여 미리 만들어 놓은 색상 그룹 스타일을 import한다.
새로운 파일을 생성할 때에는 반드시 대문자로 시작해야 한다.
global이 체크된 상황에서 새 파일을 선택해 색상 모드를 설정해준다.
등록한 색상 중 하나를 선택한다.
Lightmode에 이어 Darkmode 새파일을 만들어준다. Darkmode에 색상을 추가할 때에는 Lightmode를 반드시 꺼줘야 한다.
색상 이름을 Lightmode와 같은 이름(Primary&Secondary)로 설정해야 한다.
토큰을 Export 해준 다음 local의 색상를 토큰에서 설정한 색상으로 변경해준다.
Apply to page에서 Current page & Resolved values, no variables or styles로 변경해주고, local 색상을 다크모드에 설정된 색상으로 변경해준다.
