[ Figma ] - Variables(베리어블) 기능

 

figma를 매일 사용하는 사람이 아니다 보니 오랜만에 한번씩 로그인 할때마다 뭐가 막 달라져있고, 기억도 잘 안나고 해서 안되겠다 싶어 날 위한 정리에 나섭니다.

 

 

 

 

Variables(변수)  기능은 

디자인을 유연하고, 재사용 가능하며, 유지 관리하기 쉽게 만들어주는 강력한 기능입니다. 마치 개발에서 사용하는 변수처럼, 디자인에서도 색상, 크기, 텍스트, 숫자 등 반복되는 값을 변수로 정의하고 재사용할 수 있습니다.

 

" Local style"  과 비슷하다고 생각하면 될 것 같습니다.

 

style과 다른 점은 다음에 다시 알아보고..

 

반복되는 단일 속성에는 variables, 다중속성은 style을 쓰는게 좋다고 합니다.

 

 

 

기능요약

종류	적용
color	fill, stroke, effects
Number	width / height, padding, margin, gap, radius, stroke weight
Strin	text
Boolean	true & false

 

 

 

 

 

Variables 추가. 변경.삭제

 

1. 오른쪽 Variables 에 있는 오른쪽 아이콘을 클릭하면  추가, 수정 할 수 있는 창이 뜹니다.

(여기에서 현재 열려 있는 문서의 베리어블을 생성하고 삭제하고 수정할 수 있습니다)

 

 

 

 

 

2. 추가

 

아래 'Ceate variable' 버튼을 클릭해서 추가 할 수 있는 변수를 선택하고 입력하면 됩니다

'color/danger' 같은 형태로 입력하면 color안에 darnger라는 계층 구조로 생성도 가능합니다.

 

* 선택된 상태에서 'shift + enter' 누르면 아래로 줄 복사해서 추가 됨

 

 

 

 

2-2. 추가 : 작업 창에서 바로 추가하기 

 

작업 중 방금 사용한 색이나 텍스트등을 Variable로 저장하고 싶을때

작업창 오른쪽 속성 옆 'Apply styles and variables' 누른후 '+' 버튼 툴러 Variable 추가합니다.

 

 

 

 

3. 수정 

 

저장된 값을 변경할 때는 오른쪽 아이콘을 클릭해서 수정할 수 있습니다. 'Scope'를 눌러 적용범위를 정할 수도 있습니다.

 

 

 

 

4.삭제

 

 만들어진 값을 지우고 싶을때는 오른쪽 마우스 눌러 'Delete variable' 눌러 지우면 됩니다.

 

 

 

 

 

Value(모드) 추가

 

 

 오른쪽 '+' 버튼을 클릭해서 모드를 추가할 수 있습니다.

 

 

 

 

string , boolean 모드 추가 화면

 

 

 

 

 

적용하기

 

 

색상의 경우 오른쪽 'Fill' 에서  '+' 버튼을 눌러 'Libraries' 탭 눌러서 선택

 

 

 

 

 

 

 

모드 적용

 

오른쪽 'Appearance'에서 'Apply variable mode' 아이콘 클릭해서 모드 변경

 

 

 

 

 

string 적용

 

 

 

 

 

구조 익히기

 

 

 

 

 

Variable 저장하고 옮기기(가져오기) - 'Export/import Variable'

 

 

플러그인 'Export/import variable' 사용

 

 

 

 

 

베리어블 저장 : 'Export to JSON' 버튼 클릭 - 현재 파일에서 만든 'variable' 저장하기

베리어블 가져오기 : 상단 Import collection에 저장된 베리어블 JSON 파일을 불러오면 새로운 파일에 저장된 베이어블을 가져올 수 있습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

참고 강의 영상

https://www.youtube.com/watch?v=XKOLKyh8b1I&t=502s