처음에는 컬러 차트를 다 외워서 일일이 쓰는 건가 싶었는데 인터랙션 컬러까지 HEX 코드를 모두 외우기는 힘들어서 따로 저장하는 방법을 찾아보게 되었다.

CSS의 :root를 사용하면 디자인하면서 사용되었던 컬러 라이브러리를 저장해놓고 쉽게 가져와서 쓸 수 있다. 문서 트리의 루트 요소를 선택하는데 전역 CSS 변수 선언을 위해 사용할 수 있다.

Figma에 정리된 Color styles 라이브러리

css 파일에 다음과 같이 컬러 차트를 저장한다.

:root {
    --primary-l5: #F5FFF4;
    --primary-l4: #C1FFD4;
    --primary-l3: #78FBB0;
    --primary-l2: #5ADE96;
    --primary-l1: #38C27D;
    --primary-def: #00A664;
    --primary-d1: #008952;
    --primary-d2: #006D40;
    --primary-d3: #00522F;
    --primary-d4: #00391F;
    --primary-d5: #002110;
}

사용할 때는 var(변수 이름)으로 적는다.

.text {
    color: var(--primary-def);
}

위와 같이 쓰면 'text' 클래스를 가진 요소의 글자색이 #00A664가 된다.

이때 CSS 변수가 유효하지 않을 때 적용되는 폴백 값을 따로 추가해도 된다. 뭔가 오류가 있어서 변수를 불러오지 못하면 폴백 값이 적용된다.

.text {
    color: var(--primary-def, #00A664);
}

색을 저장한 변수라는 걸 알려주기 위해 color-primary로 해도 되는데 너무 길어지면 오히려 안좋을 것 같아서 뺐다. 어차피 primary라고 하면 색인 거 다 아니까.

Figma 개발자 모드에서는 내가 저장한 색 이름에 따라 --brand-primary-default로 뜬다.

컬러 말고 font-size 같은 다른 것들도 변수로 저장해놓고 가져다 쓸 수 있다. 여러 개를 저장해야 할 때는 주석으로 표시해주는게 좋다.

브라우저 호환성은 다음과 같다.(출처)