피그마 local styles를 css코드로 한꺼번에 바꾸기 (Export styles to css variables플러그인 사용 간편변환)

 

 

🔗 사전지식1 (figma)

local style이란?

local style은  피그마에서 계속 사용할 스타일값들을 특정이름으로 저장해두고 사용하는 것이다.

 

코드로 생각하면 변수에  자주 쓰는 스타일값을 저장해두고 불러온다고 생각하면 된다.

 

예를 들어 #f00이라는 값을 계속해서 사용해야 한다면 local style의 color styles에  neutral-01이라는 이름으로 저장해서

color값을 #f00으로 불러오고 싶을때 neutral-01 불러오면 된다.

 

 

 

이렇게 local style을 지정하면,

1. 앞으로 사용할 값들을 손쉽게 불러올 수 있고

2.  값들의 일관성을 지킬 수 있다.

 

수많은 폰트들이나 색상들을 위와 같이 저장함으로써 여러 명이서 공동작업을 할 때도 전체적으로 통일된 느낌을 유지하기도 편할 것이다.

 

 

🧨 문제점: 너무 많은 디자인들..

이것들을 css의 변수로 넣어주면 쓸때도 편하고 일관성 유지에도 도움이 되겠지만,

일일이 코드로 치는 것이 번거롭다

방법이 없을까..? 🤔

 

 

 

여기까지가 피그마 사전지식이고, 

다음으로는 css를 변수화하여 사용하는 법을 설명한다.

(이 부분을 원래 알고 있다면 건너뛰어도 좋다)

 

 

---

🔗 사전지식2 (css)

👚 CSS을 변수화하여 커스터마이징하기

피그마에서 local styles를 통해서 자주 사용하는 값들을 미리 저장해두고 불러다가 쓸 수 있는 것처럼,

css에서도 자주 사용할 속성들을 변수로 선언하고 손쉽게 가져다 쓸 수 있다.

 

✔️ css를 변수로 만들어서 사용하는 방법

전역요소에서 사용할 css값이라고 가정하였다.

(범위를 어떻게 지정하는지에 따라서 이름을 다르게 준다. 전역요소의 경우 :root로 지정한다.)

 

1️⃣ 변수만들기

:root {

--속성명: 속성값

}

:root {
--bgColor--white: #f00;
}

 

2️⃣ 사용하기

var()

h1 {color: var(--bgColor--white)}

 

 

변수만들기: 자주 사용할 속성의 이름을 --로 변수명을 지어주고, 값을 넣는다.

사용하기: 그러고나서 사용하고 싶은 곳에 해당 변수명을 넣어서 사용하면 된다.

위의 예시는 h1태그의 color를 위에서 변수로 선언한 값으로 넣어서 사용하는 것이다.

 

 

여기까지가 사전지식이다.

 

이제 피그마의 수많은 local styles를 한꺼번에 코드로 가져와서

어떻게 편하게 가져다쓸 수 있는지를 개발자의 입장에서 설명하겠다.

---

💻 피그마의 local style을 vscode로 한번에 가져오기

 

개발자들은 피그마에서 만들어진  local style 디자인 속성들을 코드로 옮겨야한다.

그런데 옮겨야 할 속성들의 양이 많다면 그것을 일일이 변수로 만들어주는 것은 매우 번거롭다.

 

이럴 때 사용할 수 있는 것이 피그마의 Export styles to css variables 플러그인이다.

(플러그인은 개발자로 치면 라이브러리와 같은 것이라고 보면 된다. 일일이 수작업으로 해줘야 할 것들을 훨씬 수월하게 해주는 도구이다.)

 

 

✅ Export styles to css variables 플러그인 사용법

1️⃣ 좌측 상단의 아이콘 클릭하기

v

피그마에서 좌측상단을 보면 위와 같은 아이콘이 있다. 그걸 클릭한다.

 

 

2️⃣ 아이콘을 클릭하면 나오는 탭들중에서 Plugins탭을 클릭한다.

3️⃣ export styles to css variables를 검색하고 run버튼을 누른다.

 

 

 

4️⃣ css 코드로 옮기고 싶은 속성들에 체크한, Generate버튼을 누른다.

 

 

5️⃣ css로 변환된 값들을 확인한다.

generate하고나서, 스크롤을 아래로 내려보면 위와 같이 local styles에 담겨있는 속성값들이 모두 css 변수화 되어 코드로 변환되어 있는 것을 확인할 수 있다.

 

6️⃣ copy to clipboard 버튼 누르기

위의 버튼을 눌러서 클립보드에 복사한다.

 

 

7️⃣ vscode의 css파일에 넣는다

 

본인이 넣고 싶은 파일에 해당 속성들을 넣어준다.

 

 

 

 

👍 이렇게하면 피그마에서 local styles들을 한꺼번에 vscode로 정말 쉽게 옮겨 올 수 있다.

일일이 변수를 선언할 필요도 없고, 정확한 값들을 받아올 수 있다는 장점도 있다.

피그마 사용이 서툰 개발자를 위해서 일일이 자세하게 설명해서 글 내용이 길어졌지만

막상 사용해보면 플로그인을 사용해서 클릭 몇번으로 엄청나게 빠른 속도로 위의 과정이 이루어진다는 것을 확인할 수 있을 것이다.