완전 쉬운 Variables로 만든 피그마 다크모드 라이트모드

2023 Figma Config와 함께 업데이트되었던 피그마의 Variables로 Dark Mode와 Light Mode를 만들어봤습니다.

​

Variables란?

Variables는 색상, 숫자 및 문자열과 같은 다양한 디자인 속성에 할당할 수 있는 스타일과 같은 재사용 가능한 정의입니다. 그러나 스타일과 달리 Variables는 적용되는 테마에 따라 전환할 수 있습니다.

 

피그마에서 Dark Mode, Light Mode 만들기

에전에 위와 같은 Dark Mode와 Light Mode를 작업하려면 각각 두벌의 작업을 진행해야 했습니다.

그런데 이번 2023 Config Variables(변수를 이용한 디자인속성 변환)를 사용하여 간단하게 다크 모드와 라이트 모드로 전환할 수 있습니다.

 

다크 모드를 적용할 디자인을 준비하고 변경할 색상을 준비합니다,

 

 

그리고 아무것도 선택되지 않은 화면에서 패널의 Local variables를 열어줍니다.

 

 

Create variables 버튼을 눌러 color를 선택한 다음 색상 코드를 넣어줍니다,

그리고 매치될 다크모드의 색상을 추가해 줍니다.

 

 

프레임을 선택한 상태에서 오른쪽 패널의 Selection colors 탭을 보면 프레임에 사용되었던 색상들이 나옵니다,

다크 모드를 적용하고자 하는 색상에서 점 4개의 설정 버튼을 눌러줍니다.

​

 

 

아까 Local Variables에 추가해 두었던 색상들이 보입니다.

해당 색상들을 하나씩 모두 Variables에 연결합니다.

 

 

모두 연결하면 Layer 패널에 Local Variables 아이콘이 생겼습니다.

눌러보니 Dark와 Light 모드가 생긴 걸 볼 수 있습니다.

​

눌러서 잘 적용되었는지 확인해 봅니다,

 

 

 

왼쪽 레이어에도 모드 배지가 생긴 걸 확인할 수 있습니다.

​이번 Variables 업데이트는 시간단축은 물론 효율성과 피그마에서 구현할 수 없는 건 없다는 걸 보여준 것 같습니다.​

여러분들도 이번 기능 업데이트를 통해 사용성에 대한 디자인 아이디어를 더욱 가시화해나가실 바랍니다.

 

 

 

피그마 다크모드 라이트모드 만들기

 

https://www.letapefigma.com/

Letape Figma 레탑피그마

 

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

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

레탑 피그마