[Figma] 피그마 베리어블 Local variables 에 대해 알아보자 (color, Number, String, Boolean, Modes 설정방법까지)

figma local variable

Variable이란?

Variable은 스타일과 같이 색상, 숫자 및 문자열과 같은 다양한 설계 속성에 할당할 수 있는 재사용 가능한 변하는 값이다.

개발을 공부해 본 사람이라면 이미 익숙한 개념일 텐데, 임의의 데이터 값에 '속성이름'을 달아 저장하는 개념이다.

 

 

기획단계, 디자인 단계에서 버튼A를 반복적으로 사용하고 Text 값만 변하게 된다고 가정했을 때

매번 새롭게 제작한다면 버튼의 크기, 색상 등이 달라질 가능성이 크고 설계 시에 일관적인 화면을 제공할 수 없다.

그렇기에 변수(Variable)를 설정해서 반복적으로 재사용하는 것이 시스템의 일관성 측면에서 좋다. 

 

 

 

피그마에서 저장할 수 있는 변수와 패널

' 숫자, 문자열, 논리형, 색상'으로 총 4가지 데이터 형식을 변수로 저장할 수 있다. 

피그마 변수 패널과 저장할수 있는 4가지 형식의 변수

변수 패널은 디자인(우측) 패널에서  Local variable 패널을 열어 변수를 설정할 수 있다. 

 

 

 

 

스타일(Style)과 베리어블(Local variable) 차이점은?

[Style과 Local variable 공통점]

- 디자인 설계 시 재사용이 가능하다. 

 

 

[Style과 비교하였을 때  Local variable의 차이점]

- 스타일과 달리, 베리어블 (Local variable)을 사용하면 테마 사이에 빠르게 전환이 가능하다. 

- 테마 별 다른 디자인을 만들어야 할 때 주로 사용된다.

- Localize and previe, 언어가 다른 경우에 빠른 전환이 가능하다.

-  API를 통해 토큰 JSON 형식을 사용하여 변수 내보내기 및 가져오기가 가능하다. 

Style과 Local variable 차이

 

 

 

 

컬렉션(collection)

collection은 연관된 variable의 집합이다. Primitive 색상이나 semantic 색상 혹은 디자인 시스템의 간격(padding) 값과 같은 것들을 그룹핑해서 모아 놓는 것이다. 컬렉션으로 컬러나 숫자, 문자, 불린 과 같은 다양한 유형의 베리어블들을 따로 만들 수 있다.

 

 

 

컬렉션을 생성해 보자

컬렉션생성1

컬렉션을 생성하기 위해서는 디자인 패널 내 Local variable을 열어, Collection 옆 아이콘의 Create collection을 눌러 새로운 컬렉션을 생성한다. 기본 이름은 Collection2로 지정되어 있으며 원하는 이름으로 변경한다.

 

 

 

새로운 컬렉션은 언제 만들까?

1. (Primary & Semantic Color) 컬러를 위한 컬렉션
2. (Dimension& Themes) 다크/ 라이트 모드 혹은 테마를 구분할 수 있는 경우 
3. (Brand color & System Color) 브랜드 색상 세트와 시스템 색상을 구분하려는 경우

 

 

Variable Type

1) Color variable 

color variable은 오브젝트의 단색 채우기 또는 테두리에 적용할 수 있다. Create variable을 선택하고, color Tyep을 선택하여 이름과 컬러 색상을 지정해 준다.

 

[오브젝트에 color 베리어블 지정하는 방법]

오브젝트를 누르면 우측 디자인 패널의 Fill 영역의 style 아이콘을 누르면 variable을 클릭할 수 있는 패널이 나온다.

color variable 지정 아이콘

오브젝트에 color 베리어블 설정하는 방법

 

 

2) Number variable

number variale을 사용하여 너비 및 높이, 간격, 패딩 및 반지름과 같은 치수를 정의할 수 있다.

필자는 버튼의 패딩과 레디우스에 필요한 변수를 만들어 버튼에 지정했다.

 

[오브젝트에 곡률변수 입력방법]

Number variable 생성과 오브젝트에 속성 지정방법

 

오브젝트를 선택하여 radius 값을 설정하는 아이콘을 누르면 변수를 선택할 수 있는 패널이 나오는데, 변수를 선택하여 모서리 값을 지정해 준다. 

 

[오브젝트의 가로/세로 padding 변수 입력방법]

오브젝트의 가로/세로 padding 변수 입력방법

 

1. 버튼 오브젝트의 겉 테마와 '갓생기획' text를 Frame으로 생성한다.

2. 생성한 Frame을 선택하고 Auto layout을 선택한다. 

3. 가로/세로 속성값을 변수를 선택하여 지정한다. 

 

 

3) String variable

String variable은 텍스트 레이어에 적용되며, 반복적인 콘텐츠와 로컬에 도움이 될 수 있다. 

 

[Text variable 활용방법]

프로토타입 인터랙션의 'On click' 이벤트를 선택하고, Set variable 액션을 통해 오브젝트를 클릭했을 때 문자열 변수가 변경되도록 문자열 변수를 설정하여 활용할 수 있다. 

 

 

4) Boolean variable

boolean variable은 레이어 가시성을 전환하는 데 사용되며 프로토타입에서 매우 잘 활용된다.

예를 들어, 제품이 거의 다 팔렸을 때 가시성 모드로 변경하거나 제품이 sold out일 경우 버튼을 비활성화시키는 등 구매할 수 없도록 가시성 전환에 주로 사용된다.

boolean variable 변수 설정

 

 

 

Modes

Mode를 사용하면 다른 콘텍스트에서 사용할 때 디자인을 변경할 수 있다.

 

모드는 아래와 같이 활용될 수 있다.

color variable은 light와 dark와 같은 테마의 색상을 전환하는 데 사용되며

string variable은 언어 로컬과 같은 콘텍스트에 사용할 수 있고

number variable은 서로 다른 디바이스 크기에 걸친 공간 변화를 설명할 수 있고

Boolean variable은 제품이 거의 다 팔렸을 때 경고를 표시하는 것과 같이 레이어 가시성을 토글 할 수 있다.

 

mode 생성방법

 첫 번째 칼럼의 속성이름을 Light로 변경하고, 두 번째 속성을 추가하여 이름을 Dark로 설정, 모드에 맞는 변수 컬러(색상변경), 텍스트(언어 변경),  숫자(공간 크기 변경), 불론( 경고 표시)를 설정할 수 있다.

 

 

모드 전환하기

1. 모드 적용을 원하는 UI 컴포넌트를 생성하고(Ctrl +Alt + K)

2. 컴포넌트의 인스턴스를 생성한다 Alt + 드래그

3. 우측 디자인 패널의 Layer 설정 아이콘 선택 

4. 원하는 모드로 선택하여 변경

출처 - 루씨의 UXUI 디자인 (Youtube)

 

 

▼ 함께 보면 좋은 피그마 포스팅  ▼

[Figma] 피그마 기본 컴포넌트와 플러그인 댓글에 대해 알아보자 (유용한 플러그인 추천 best7 )

[Figma] 피그마 오토 레이아웃에 대해 알아보자 (단축키와 활용방법까지)

[Figma] 피그마 기본개념, 화면구조, 기능정리 ch.1 (Move, Scale, Local variable,Local style, Export)