Design Tokens 페이지에서 사용하는 모든 CSS 변수, 색상, 글꼴 스택, 반경 및 그림자를 수집하고 이를 기본 tokens, 테마 모드 및 구성 요소 범위로 정렬하고 Figma 용 W3C design-token JSON 또는 CSS 파일로 다운로드합니다.
디자인 시스템은 구현되는 대로 완벽하게 기록되는 경우가 거의 없습니다. 실제 팔레트, 간격 척도 및 유형 램프는 사용자 정의 속성, 테마 재정의 및 하드 코딩된 값에 분산된 스타일시트에 있으며 DevTools 에서 직접 다시 작성한다는 것은 수백 개의 규칙을 클릭하고 한 번에 하나씩 값을 복사한다는 것을 의미합니다.
이 도구는 한 번에 모두 읽습니다. 페이지 자체에서 검사가 허용되지 않는 원본 간 스타일시트를 포함하여 페이지의 모든 스타일시트를 탐색하고 모든 사용자 정의 속성과 인라인 스타일에서 런타임에 설정된 변수를 수집합니다.:root 의 변수는 기본 tokens 됩니다..dark, [data-theme="dark"] 또는 prefers-color-scheme 과 같은 테마 선택기에서 재정의된 동일한 이름은 별도의 모드가 됩니다. 개별 구성 요소에 정의된 변수는 범위가 지정된 것으로 나열됩니다. 모든 값은 var() 체인을 통해 확인되므로 다른 변수에 대한 참조뿐만 아니라 실제로 렌더링되는 색상을 볼 수 있습니다.
각 token 은 색상, 글꼴 모음, 글꼴 크기, 두께, 줄 높이, 간격, 반경, 그림자, 그라데이션, 지속 시간, 여유 또는 z 인덱스 등 값과 이름으로 분류되며 색상은 채널 전용 형식 Tailwind 및 shadcn 사용( 222 47% 11%) 및 Bootstrap 의 -rgb 삼중 항을 포함하여 16진수로 정규화됩니다. 선언된 변수와 함께 도구는 렌더링된 요소를 샘플링하여 실제로 사용되는 색상, 글꼴 스택, 크기, 반경 및 그림자를 사용 횟수와 함께 보고합니다. 이는 변수를 전혀 채택하지 않은 사이트에서 꼭 필요한 것입니다.
내보내기에는 한 번의 클릭이 필요합니다. Download tokens JSON Tokens Studio 플러그인이 Figma 및 Style Dictionary 으로 가져오는 W3C Design Tokens 형식( $value 및 $type)을 저장하여 모든 플랫폼에 대한 코드로 변환합니다. 테마 모드와 관찰된 값은 자체 그룹에 보관되므로 혼동될 일이 없습니다. Download CSS 원래 선택기 아래에 각 모드가 포함된 변수를 스타일시트로 다시 작성합니다.
페이지에서 읽을 수 없는 원본 간 시트와 런타임에 인라인 스타일로 설정된 변수를 포함하여 모든 스타일시트의 사용자 정의 속성입니다.
.dark, [data-theme] 또는 prefers-color-scheme 아래의 재정의는 별도의 모드가 되며 기본 값과 나란히 표시됩니다.
모든 var() 체인이 확인되고 각 token 색상, 글꼴, 크기, 간격, 반경, 그림자, 지속 시간, 여유 또는 z-색인으로 유형이 지정됩니다.
Hex, rgb, hsl, oklch, 이름이 지정된 색상 및 Tailwind, shadcn 및 Bootstrap 사용하는 채널 전용 값은 모두 16진수로 정규화됩니다.
렌더링된 요소에서 샘플링된 색상, 글꼴 스택, 크기, 가중치, 반경 및 그림자와 각 요소가 나타나는 빈도.
Tokens Studio 및 Style Dictionary 용 W3C design-token JSON 또는 원래 선택기 아래에 모든 모드가 포함된 CSS 파일입니다.
스크린샷에서 색상을 선택하는 대신 실제 팔레트, 유형 및 간격을 Tokens Studio 로 가져옵니다.
사이트에서 실제로 사용하는 색상 및 글꼴 크기 수와 정의된 tokens 우회하는 값을 확인하세요.
다크 모드가 재정의하는 모든 변수를 해당 조명 값과 나란히 비교하고 재정의되지 않은 변수를 찾아냅니다.
값을 직접 복사하는 대신 tokens 한 번 내보내고 Style Dictionary 또는 Tailwind 구성에 공급하세요.
귀하가 존경하는 사이트의 색상 시스템, 유형 규모 및 반경을 작업할 수 있는 파일로 가져옵니다.
DevSuite Pro 도크에서 Design Tokens 아이콘을 클릭하세요. 추출은 즉시 실행되며 요약에는 변수, 모드, 색상 및 글꼴 스택이 계산됩니다.
색상 탭에는 모든 색상 token 견본으로 표시되고 각 테마 모드를 표시하기 위해 분할된 다음 페이지에서 렌더링하는 색상과 사용 횟수가 표시됩니다.
타이포그래피는 각 글꼴 스택을 미리 보고 크기, 두께, 줄 높이 및 @font-face 규칙을 나열합니다. 마지막 탭에는 간격, 반경, 그림자 및 모션이 포함됩니다.
변수 탭에는 작성되고 해결된 값과 함께 모든 사용자 정의 속성이 나열됩니다. 기본, 각 테마 모드 및 구성 요소 범위 변수 간을 전환합니다.
Tokens Studio 를 통해 Figma 용 Download tokens JSON 하거나 스타일시트용 Download CSS. 구성요소 범위 변수도 포함하려면 확인란을 선택합니다.
