[TIL] Figma file의 모든 CSS 변수를 간단하게 추출하는 plugin 사용법!

1. figma에서 CSS 변수 추출을 원하는 디자인 파일을 열고, 우클릭을 하여 아래와 같은 경로를 타고 들어간다.

 

2. 검색창에 css variables를 검색한 후, 아래의 이미지와 같은 플러그인을 클릭!

 

3. install을 하고 싶다면 더보기 버튼을 클릭하여 install을 해주고,
install 없이 바로 실행하고 싶다면 Run 버튼 클릭!

 

4. 추출하길 원하는 CSS변수의 styles을 설정한 후 실행 버튼을 누른다.
(나의 경우에는 컬러만 추출하고 싶어서 color system을 16진법으로 설정하고, colors을 제외한 스타일은 해지하였다.)

 

5. 실행 버튼을 누르면, 아래의 이미지와 같이 모든 color styles들이 추출되는 것을 볼 수 있다!
copy 하여 원하는 곳에 붙여 넣으면 끝!

---

[출처, 참고 : zerobase html/css 미션1 해설 강의]