Figma Variables로 다크모드 한 번에 전환하기

중급약 15분4단계

Figma Variables를 사용하면 색상·텍스트·수치를 변수로 관리하고, 라이트/다크 모드 전환을 버튼 하나로 할 수 있습니다.

따라 하기

1단계 / 4

1Figma 상단 메뉴에서 Local variables 아이콘을 클릭합니다(단축키 없음, 수동 클릭). 오른쪽 Variables 패널이 열립니다.
2Create variable을 클릭하고 Color 타입을 선택합니다.
3변수 이름을 color/background/primary, color/text/primary처럼 슬래시로 계층 구조를 만들어 정리합니다.

이해를 돕는 예시 그림이에요. 실제 화면과 다를 수 있어요.

figma.com

Figma

최근 항목

즐겨찾기

내 초안

공유된 항목

+ 새 디자인 파일

최근 항목

UI 디자인 시스템

수정됨 1일 전

랜딩페이지 v2

수정됨 1일 전

모바일 앱 프로토타입

수정됨 1일 전

누를 위치 상단 Local variables›Variables 패널›Create variable›Color 타입›이름 입력

팁 변수 이름에 슬래시(/)를 사용하면 자동으로 그룹으로 묶입니다. 예: brand/primary는 brand 그룹 아래 primary 변수로 표시됩니다.