[ Figma ] 배리어블 연구 Study variable in fiama

삼동입니다.

다들 보셨곘지만 이번에 Config 2023 에서 피그마에 대대적인 업데이트가 있었습니다. 그중에 가장 주목하고 공부하려는 것은 바로 Variables 입니다. 진짜.. 대단한 도구가 되었음을 인정하지 않을 수 없었습니다. 어도비 인수금액이 한 몫했겠죠...  X부럽당 Σ(O_O)

이제는 프로덕트 UXUI 에서는 절대강자로 자리 잡아 더욱 견고해질 것 같네요. 

** 개인의 의견이 듬뿍 담겨있어 오해의 소지가 있다면, 업데이트를 통해 개선하도록 하라면 하겠습니다. 저는 슈퍼을이니까요. ** 본 글은 피그마의 유튜브 영상을 그대로 따서 GIF 로 만들어 내가 보기 편하게 만든것이므로 반론하시려면... 넙죽 받아 먹을게요. 저작권은 Figma 유튜브에 있어요.  (⩌⩊⩌) 

원본영상

 

• 배리어블 variable 의 목적은 '디자인의 다양성을 쉽고 빠르게 전환한다' 라고 정리했습니다.

물론.. 사용자와 시제품을 받아들이는 입장에서 말이죠. 제작자의 입장에서는 수많은 변수와 조건을 걸고 제작해야 합니다. 머리도 좀 써야하고 if, else 같은 Notion 에서도 쓰여져서 데이터베이스를 관리하던 모양새를 갖추어 놓아야 비로소 제대로 작동합니다. 이는 프로토타입 Prototype 에서도 마찬가지 입니다. 조건을 걸어두면 무한한 가능성을 지니게 된 점은 확실합니다. 잘 써야 겠죠. 

 

(밥먹고 살려면 해야합니다. 디자이너 여러분)

@GIPHY

자 그럼 첫번째로 무엇부터 해야할까요? -- 연습과 반복만이 답입니다. 다른거 없습니다. 튜토리얼을 따라하고 만들어보고 왜 다르게 작동하는지, 응용법은 또 없는지 공부하고 학습해야합니다. 지름길은 없어요. 행동하라 하면 된다.

1. 색상 바리에이션 Color Variatioon 을 시제품 Prototype 그대로 경험할 수 있다.
2. 사이즈 바리에이션 Size variation 을 통해 기기별 사이즈를 변동시킬 수 있다. 
3. 컴포넌트 바리에이션 Component Variation 을 통해 기기별, 조건들을 변화시킬 수 있다. 

위 세가지는 이미 Master - Slave 옵션을 통해 구현할 수 있지만 더 디테일하게 만들어서 뷰어와 클라이언트에게 더 빠르게 제안을 보여주고 코멘트를 놓치지 않을 수 있다는 점에서 강점이라 할 수 있겠습니다. 

-

첫번째, 컬러 바리에이션 Color variable

우리는 여러 컬러테마를 적용하고 싶어합니다. 하나의 앱에 다양하게 세팅된 변수가 세팅되어 있다면, 사용자는 하나의 동작으로 다양한 컬러를 가진 앱을 사용할 수 있게 됩니다. 디자인이란건 개인취향이니만큼 적절한 테마를 제공한다면 더 사용자 입장에서는 좋겠습니다. 사용자 테스트를 더 많이 할 수 있게 되면 좋겠지만 그거 쉽지 않아요. 우린 알잖아요. 정답은 없습니다. 많이 쓰이는 서비스를 따르는 것이 흐름을 맞춰 가는 것이겟죠. 그게 아니라 먼저 선도할 수 있으면 대박...... 존경합니다 형님.

IBM의 Carbon Design System

Refer. https://www.ibm.com/design/language/

Figma Community. https://www.figma.com/community/file/1089055766693968230

우리가 대표적인 서비스를 따라가면서 벤치마킹 하는 이유는 하나뿐입니다. '설득' 이 가장 쉽기 때문입니다. 나만의 컬러? 우리만의 색상? 서비스의 정체성? 그건 유명해지고 월간사용자가 10만이 넘어가면 사용자 조사를 통해 지정해주면 됩니다. 그전에는 패스트 팔로워 Fast Folllower 만으로도 충분해요. 물론, 색상에 대한 정확한 지정 값은 피하는게 좋습니다. 거대기업들은 많은 돈을 주고 색상을 사용하고 있기 때문에 저작권이나 비슷한 권리에 융단폭격당하기 때문입니다. ( 슬프지만 매우 현실적...⭐️ )

그리고 대기업의 서비스는 많이 사람들이 '이미 많이 사용하고' 있는 상태라서 거부감이 매우 적고 색상에 대한 공감대가 형성되어 있기때문에 정치질과 디테일이 집착하는 사람들을 억지로 누를 수 있는 효율적인 논리로 설파할 수 있기 때문입니다. 거시적 시점/미시적 디테일을 오가며 공격하는 그들을 방어하는데는 '일반적인 상식'만한 무기가 없죠. ( 결국 상식을 깨야한다며 달려들겠지만 어쩌겠습니까 대장님이 정해줘야죠.. 파국이다.. )

자 이제 정신차리고 여기에서 적당한 색상세트를 골라줍니다. ( 나만의 컬러를 써야지! )

손 가는 대로 정해본 5 방색

첫번재로 컬러를 각각 마스터 Master Component 로 만들어 줍니다. ( 마이마스타~💕 )

Multiple Components 메뉴를 이용하면 후딱

그리고 라이트모드 다크모드를 나눠 줄텐데요. 피그마의 가이드에 따르면 'Token' 을 이용하면 다양한 조합이 가능하다고 하니 한번 해보도록 합시다. 배리어블 variable 개념을 익히는데 어려움이 많지만 하다보면 어렴풋 깨닫게 됩니다.

색감고려 전혀 하지 않았으니 금방 세팅하쥬?

색상을 셀렉해서 대충 나열해 봅니다. 다크모드와 라이트모드를 구분해서나타내 줄 건데, 이것은 아쥬 간단한 일이고 보통의 회사에서 쓰는 방법입니다. 저도 그랬고.. 모두가 그랫을 겁니다. 그리고는 토글 Variants(True/False) 를 세팅해서 진행한 경험이 대부분이실 거 같습니다. 그런데 업데이트를 통해 글로벌 디자인 시스템을 세팅해두면 별도의 다크모드를 설정하지 않아도 클릭 몇번으로 자동 다크모드 전환이 됩니다. 

한번 해봐야 겠죠. 많은 스크린샷이 등장할 예정이니 스크롤압박 주의 하시고..

먼저 각각의 모드를 키로 만들어 줄 겁니다. 피그마에서는 'Token' 으로 묶어 주었는데, 저도 똑같이 해보겠습니다. 

아래의 빨간 상자를 보면 지역변수 Local Variables 를 볼 수 있습니다. 이걸 클릭해줍니다.

저보다 더 뛰어난 툴팁교육이 등장하지만 애써무시 합니다.

따라하기를 따라가봅니다. 

좌측과 같이 모음집을 만들어낼수도 있고, 이름을 바꿀 수도 있습니다. 또는 삭제도 가능하고요. 당황하지 마시고 이미 새로운 콜렉션이 하나 있으니 만들어 봅니다. 라이트모드 lightmode 먼저 만들어 볼까요.

 

여기서 컬러 배리어블을 이용할 겁니다.

당황스럽다. Value 부터 숨이 턱턱막힌다.

디자인을 하시는 분들은 저 FFFFFF 는 화이트 라는걸 알고 있을.....까? 하는 의문은 뒤로 접어두고 하나하나 세팅해보도록 합니다. 이름은 본인이 사용하려는 색상명이나 '키' 값을 넣거나 자유롭게 하는데.. Value 에는 색상값을 넣어야 합니다. 우리가 위쪽에 막 해먹은 컬러값을 넣어두면 됩니다. 한개 한개 정성스럽게 말이죠. 

이름과 값을 넣으면 자동으로 색상을 선정해줍니다.

이것은 이제 라이트모드로 그룹지어 줍니다. 다크모드 까지 완료 하시면 이제 토큰을 만들 차례가 됩니다.

이제 토큰을 세팅해주겠습니다. 키를 사용하면 로우 파일이 변경되더라도, 세팅된 키는 변화하지 않기 때문에 수정과 유지보수에 용이합니다. 많은 디자이너와 개발자 퍼블리셔들이 즐겨 사용하는 '변수' 값을 정하는 것과 같다고 이해하시면 편하실 것 같슴다.

이렇게 하나하나 세팅해주면 됩니다.

이러면 진짜 끝입니다. 이제, 'Layer' 패널에서 모드변경을 통해 라이트와 다크를 바꿀 수 있게 되었습니다. 

바로 이렇게 말이죠.

피그마 유튜브에 나오는 실전예제짤

 

다음 배리어블은 #모따기 #오토레이아웃 #인스턴스스왑 #Nested #스트링배리어블 모두 하나씩 다뤄보도록 하시죠.

이제 #피그마 결제할 시간입니다.