[Figma] 베리어블(Variable) 기본 정리

 

1. 베리어블의 역할:

- 반복 작업을 줄이고 디자인 요소를 재사용할 수 있도록 돕는다.

- 다크 모드와 라이트 모드 같은 테마 전환을 쉽게 관리할 수 있다.

2. 베리어블의 유형:

- 컬러: 색상을 변수로 정의하여 테마 전환이 가능하다.

- 넘버: 간격, 크기 등을 조정할 수 있는 숫자 변수를 제공한다.

- 텍스트: 문자열을 변수로 정의하여 텍스트를 일괄 수정할 수 있다.

- 불린: 켜기/끄기 상태를 설정할 수 있는 변수다.

3. 활용 사례:

- 다크/라이트 모드 구현을 간편하게 할 수 있다.

- 반응형 디자인을 설계하며 UI 요소의 크기와 간격을 동적으로 조정할 수 있다.

 

4. 사용 방법

 

- 베리어블 생성하기:

피그마 상단 메뉴에서 "Variables" 패널을 열거나, 오른쪽 패널에서 "Create Variable" 버튼을 클릭한다.

생성한 변수의 이름을 지정하고, 유형(컬러, 넘버, 텍스트, 불린)을 선택한 뒤 값을 입력한다.

- 모드 설정하기:

Variables 패널에서 "Modes" 탭을 열고, 다크/라이트 모드와 같은 테마를 추가한다.

모드별로 변수를 정의해 다양한 컨텍스트를 디자인에 적용한다.

- 디자인에 베리어블 적용하기:

디자인 요소를 선택한 뒤 오른쪽 속성 패널에서 **"Apply Variable"**을 클릭한다.

연결하고자 하는 변수를 선택하면 해당 요소에 자동으로 값이 적용된다.

- 베리어블 편집 및 업데이트:

Variables 패널에서 변수를 수정하면 연결된 모든 디자인 요소가 자동으로 업데이트된다.

예를 들어 컬러 변수를 변경하면 다크/라이트 모드 전환 시 모든 관련 요소가 실시간으로 업데이트된다.

- 테마 전환하기:

Variables 패널에서 모드를 선택하면 테마가 즉시 전환된다. 이를 통해 다크/라이트 모드 전환과 같은 테마 관리가 간편해진다.

 

 

[참고할만한 좋은 영상, 글]

https://www.youtube.com/watch?v=XKOLKyh8b1I

https://youtu.be/ROA0LGKBeB0?si=4GGcA58fJyWb1I11

 

https://blog.naver.com/octopu8tudio/223341114402

Figma 베리어블(Variable) 기본 정리

https://gardendesign.tistory.com/108

피그마 배리어블 Variables 모드 변경 실습 컬러 넘버 스트링 불린 A-Z