피그마 토큰 색상 질문입니다

Question

안녕하세요 피그마 토큰을 실무에서 처음 이용하고 있는데 생각보다 어렵고 복잡하네요.. 라이트모드와 다크모드에서 같은 색상을 사용하는 경우 혹은 화이트:블랙/화이트:그레이 처럼 컬러시스템과 색상이 1:1로 치환이 되지 않는 경우에 어떻게 해야하나요? 이때는 대응되는 색상을 하나씩 다 지정해줘야하는게 맞나요? 예를 들어 한 군데에서만 화이트:그레이로 사용되는데 토큰으로 지정해주는게 오히려 비효율적인 것 같아서요ㅠ 추가로 다른 질문인데요 프라이머리컬러 색상을 variant할 때 900~100 이런식으로 명도차이를 표기하잖아요 900<-이 숫자가 뜻하는 의미는 무엇인가요?

범쌤 · Answer

안녕하세요 주민님 :) 시스템을 구성하는데 있어서 제 영상강의는 '무조건 이렇게 해야한다' 의 개념보다는 이런식으로도 사용할 수 있다 라고 이해해주시면 좋을것 같습니다. 시스템은 회사내에서 팀원들간의 통일된 언어로 언제든 변경이 될 수 있습니다.   라이트모드와 다크모드로 1:1 변경이 되지 않는 디자인의 경우 primary 컬러는 단일 색상으로 진행하셔도 됩니다. 그리고 특정 n번째에서만 라이트와 다크모드의 스왑을 원한다면 changePrimary 라는 변수를 만들고 이를 통해 관리해주셔도 됩니다. variant의 색상 넘버링은 10~90 자리를 입력할수도 있고 100~ 900 자리를 입력할수도 있습니다. 숫자는 톤값에 비례하여 숫자가 증가합니다. 숫자가 높을수록 빛이 최대로 들어가는 양이고 점점 더 많아지거나 적어지거나를 표시할 수 있습니다. 제 강의에서 사용하는 tailwindcss의 플러그인은 숫자의 크기에 따라 빛의 양이 덜 들어오는 형태로 값을 내보냅니다. 시스템은 항상 유동적이고 팀내에 합의를 통해 더 편한 방법을 찾아가는 방식입니다. 감사합니다 :)