Figma variables(변수) 실무 활용법 3가지

 

23년 피그마의 큰 업데이트라면 Dev mode와 Variables 기능이 두손가락으로 꼽힐 것이다. Dev mode는 나 역시 개발자들과의 원활한 소통을 위해 잘 쓰고 있는데, Variables는 기존 Style과의 차이점을 알지 못해 거의 사용하지 않았다.

그러다 23년 config의 Variables 키노트를 통해 사용해보게 되었는데 생각보다 더 유용하게 잘 쓰고 있어, 실무에서 활용할 수 있는 3가지 방법에 대해 소개하고자 한다.

 

 

1. 숫자 0으로 Number Counter 프로토타입 구현하기

실무에서 가장 많이 쓰는 방법 중 하나이다. 가장 기초적인 방법으로 변수에 대한 개념을 이해하기 쉬우니 꼭 한번 만들어보자.

 

 

 

 

2. 숫자 0으로 Progress Bar 프로토타입 구현하기

1번을 만들다가 숫자 변수를 활용해 Probress Bar 구현이 쉽게 가능하겠다는 아이디어가 떠올랐다. 기존에는 프로토타입으로 Progress Bar를 매끄럽게 구현하기 위해서 최소 5개 이상의 Bar 프레임을 개별적으로 만들어 스마트 애니메이션으로 연결을 해야만 했다. 이번에는 단 프레임 3개로 완료 화면까지 구현하는 방법을 소개한다.

 

 

3. Boolean으로 장바구니 프로토타입 구현하기

기존에는 제품 선택 시 장바구니 숫자를 카운트하기 위해선 숫자별로 모든 시나리오의 화면을 하나씩 다 만든 다음에 각기 연결하는 방법을 사용했다. 이제는 연관된 컴포넌트에 Boolean값과 Number를 사용하여 장바구니 프로토타입을 손쉽게 구현하는 방법을 소개한다.

 

 

 

 

결론

단일 프레임으로 모든 숫자 변수를 구현할 수 있어 업무 생산성이 향상됨

 

Variables은 숫자, 통화 등 일정한 규칙을 지닌 변수에서는 생산성을 크게 향상시키고 텍스트 변수는 기존 작업 방식과 비슷한 생산성을 지닌다고 생각한다. 가끔은 머리로 계산을 덜 해도 되는 기존 방식이 더 편할 수도 있다(물론 이 경우에 프레임 단위로 다 그려야해서 몸이 고생하지만...) 그럼에도 불구하고 상위 프레임의 Variables 값을 하위 컴포넌트들이 모두 승계하기에, 다국적 화면을 만들 때 좀 더 유연하게 화면 전환이 가능하며 테이블 형태로 요소를 묶어 볼 수 있단 장점이 크다. 조금 어렵고 복잡해도 Variables를 다루는 방법을 익힌다면 피그마 작업 시 큰 도움이 될 것이니 꼭 배워보길 추천한다.