피그마 업데이트 Variables로 만든 프로토타입 예제

오늘은 이번에 새로 업데이트된 Variables로 쇼핑몰 개수선택 프로토타입 예제를 만들어 볼게요.

​

Variables 기능을 사용하면 반응형 프로토타입을 더욱 쉽게 구현할 수 있습니다. 디자인 요소의 속성 값을 변수로 지정하여, 다양한 크기와 해상도에 맞춰 자동으로 조정되도록 할 수 있습니다. Variables를 이용하면 프로토타입의 일관성을 유지하면서도 시간을 절약할 수 있어, 디자인 작업의 효율성을 높일 수 있습니다. 이와 관련하여 더 많은 정보를 찾아보고 포스팅하도록 할게요~

 

 

피그마 Variables로 만든 프로토타입 예제

 

플러스 버튼을 누르면 갯수가 1만큼 증가하고 마이너스 버튼을 누르면 개수가 1만큼 감소하고,

상품금액이 증가하는 쇼핑몰형 프로토타입을 만들어볼게요~

​

일단 원화 단위안의 쉼표는 Variables에서 숫자가 아니므로 달러($)의 예제보다 훨씬 까다로운 작업이 되었어요.

달러($)의 예제는 이전 포스트를 참고해 주세요~

https://let-figma-design.tistory.com/25

피그마 대규모 업데이트 Variables로 만든 프로토타입

​

 

'쉼표 앞의 숫자'와 ',000'과 '원'을 모두 따로따로 텍스트로 써줍니다.

그리고 플러스 버튼과 마이너스 버튼은 컴포넌트 베리언트(Component variants)로 만들어줍니다.

 

Local variables 패널을 열고

​

1) ,000원 : 0이 되면 사라질 쉼표를 포함한 백자릿수 (Boolean)

2) Number : 버튼을 누르면 1씩 증가, 감소되는 숫자 (#Number)

3) price : 쉼표 앞의 금액 숫자 (#Number)

​

Variables를 만들어줍니다.

 

 

화면으로 돌아와서 숫자 1에 아까 세팅해 두었던 #Number Variables를 연결해 줍니다.

두 개의 숫자 12에는 #price를 연결해 줍니다.

 

 

그리고 [,000]에는 텍스트가 아닌 Boolean을 걸어두었으므로 Layer 패널의 눈모양 아이콘을 오른쪽 클릭하면 Variables로 만들어둔 Boolean이 나타납니다.

아까 만들어둔 [000원] Boolean을 선택합니다.

​

이제, 플러스버튼을 누르면 숫자와 금액이 증가하고 마이너스 버튼을 누르면 금액이 감소할 거예요,

그런데 0이 되면 쉼표뒤의 숫자가 안보여야하니쉼표뒤의 숫자를 False 시켜 줄 거예요.

Boolean은 저번 포스트에서 언급했다시피 False와 True의 경우만 가지고 있죠,

​

이번 쉼표뒤의 숫자의 True는 레이어가 보이는 경우이고, False는 레이어가 안 보이는 경우가 되는 거죠.

 

 

이제 플러스버튼의 프로토타입을 설정해 줄 차례입니다.

​

On click일 때 Conditional(조건)을 줍니다.

#Number가 1이거나 1보다 작을 때는 [,000]을 노출해 주고, Set variable은 +1을 해줍니다.

그리고 #price의 Set variable도 12만큼 커지도록 세팅해 줍니다.

 

 

마이너스 버튼의 프로토타입은 조금 다릅니다.

Variables의 변수 입력은 순서가 중요하므로 동작하는 순서에 따라 나열이 되어야 합니다.

​

우선 -1씩 감소하도록 숫자 베리어블을 세팅해 주고, 12만큼 감소하도록 가격 베리어블도 세팅해 줍니다.

조건이 될 Condition은 #Number가 ==0일 때 [,000]의 Boolean이 false가 되도록 설정해 줍니다.

​

이제 프로토타입 프리뷰를 보면서 잘 설정되었는지 확인해 보면 됩니다,

이번 작업은 조금 난이도가 있는 작업이었는데요. 상품개수가 음수로 나오는 부분은 다음시간에 자세히 다뤄보도록 할게요

상품갯수가 음수로 나오면 안 되니까요~

​

이번 프로토타입을 작업해 보면서 이전에는 같은 결과물을 얻으려면 많은 프레임과 레이어가 필요했지만 지금은 간단히 한 장이 프레임으로 해결되는 것 같습니다.

Variables를 이용하여 작업의 효율성은 물론, 실제와 가까운 프로토타입을 구현해 보시길 바랍니다.

​

 

 

 

 

 

https://www.letapefigma.com/

Letape Figma 레탑피그마

 

 

레탑피그마 오픈 채팅방 문의

https://open.kakao.com/o/sJdtEyCe

레탑 피그마