자동으로 테마가 바뀌는 컴포넌트 만들기

Figma Variables

피그마 콘퍼런스에서 러닝 커브를 높이는 신기능 Variables를 발표했습니다.

빠른 속도로 발전하는 피그마를 주로 사용하다 보니 배울게 점점 늘어나는 거 같습니다.

그래서 더 매력있고 재미있는 툴이라고 생각합니다.

콘퍼런스에서 봤던 예시들 중에서 프레임의 테마에 따라 자동으로 변화하는 컴포넌트를 만들어보겠습니다.

---

1. 가볍게 컴포넌트를 디자인합니다.

2. 색상들을 variables에 선언합니다.

알고 계시겠지만 실제 제품에 활용을 할 땐 sementic으로 선언하기 전에 primitive로 사용하는 색들을 한 번씩 선언하는 과정이 필요합니다. sementic으로만 선언을 한다면 브랜드 색이 바뀌어서 강조색을 다른 색으로 바꿔야 할 때 한 땀 한 땀 강조 색을 사용하고 있는 컴포넌트들을 찾아야겠죠?

�border 색상은 stroke에서만 보이게 하는 등, 스코프 정리를 변수를 선언하는 과정에서 진행하면 좀 더 깔끔한 작업 환경을 유지할 수 있습니다.

3. mode를 추가하고 다크모드 색상을 새로 지정합니다.

variables의 닫힘 버튼 바로 밑에 위치한 추가 버튼을 클릭하면 mode가 새로 생깁니다.

mode의 이름을 Dark로 바꾸고 다크모드에 쓰일 색들을 새로 지정하면 프레임의 모드에 따라 색상이 자동으로 바뀌는 컴포넌트 만들기는 끝이 납니다.

4. 프레임을 만들고 레이어 모드를 Dark로 지정합니다.

우측 패널의 레이어 섹션에 새로 생긴 버튼을 눌러 모드를 Dark로 지정합니다. 버튼은 프레임의 속성에 변수가 포함이 되어 있어야 보입니다.

5. 컴포넌트를 새로 만든 프레임 안으로 끌어옵니다.

모바일에선 정상적으로 재생되지 않습니다 (__)

레이어의 모드를 컴포넌트가 상속을 받으며 색이 변하는 원리입니다. 기능을 응용하면 정말 다양한 결과물들을 만들어 볼 수 있을 거 같아서 너무 기쁘네요.