Note
이 문서는 Figma의 변수(Variables) 기능을 활용하여 디자인 시스템을 더욱 효율적으로 관리하는 방법을 설명합니다. Day 3: 전역 스타일 (컬러, 폰트)의 심화 내용입니다.
Figma 변수는 디자인 파일 내에서 재사용 가능한 값(예: 색상 코드, 숫자, 문자열)을 정의하고 관리하는 기능입니다. 이를 통해 디자인의 일관성을 유지하고, 대규모 디자인 시스템을 효율적으로 업데이트할 수 있습니다.
- 중앙 집중식 관리: 색상, 간격, 폰트 크기 등 자주 사용되는 값을 한 곳에서 관리합니다.
- 빠른 업데이트: 변수 값을 변경하면 해당 변수를 사용하는 모든 디자인 요소에 자동으로 반영됩니다.
- 일관성 유지: 디자이너 간의 협업 시 디자인 가이드라인을 쉽게 준수할 수 있도록 돕습니다.
- 개발자와의 협업: 디자인 토큰(Design Tokens)으로 활용되어 개발 프로세스와의 연동을 용이하게 합니다.
- 로컬 변수 패널 열기: Figma 파일에서 아무것도 선택하지 않은 상태에서 오른쪽 사이드바의
Local variables섹션을 찾습니다. - 변수 생성:
Create variable버튼을 클릭하고Color,Number,String,Boolean중 원하는 변수 타입을 선택합니다. - 변수 이름 및 값 설정: 변수 이름을
primary-color,spacing-md등으로 지정하고, 해당 값을 입력합니다.
- 색상 변수: 도형이나 텍스트 레이어를 선택한 후,
Fill또는Stroke속성에서Style아이콘을 클릭하고 생성한 색상 변수를 선택합니다. - 숫자 변수: Auto Layout의
Gap,Padding값이나 도형의Width,Height,Corner radius등에 숫자 변수를 적용할 수 있습니다. - 문자열 변수: 텍스트 레이어의 내용에 문자열 변수를 연결하여 동적인 텍스트를 관리할 수 있습니다.
변수 모드는 동일한 변수에 대해 여러 값을 정의하여 다양한 테마나 상태를 관리할 수 있게 합니다. 예를 들어, 다크 모드/라이트 모드, 다양한 언어 버전 등을 변수 모드로 관리할 수 있습니다.
- 모드 추가:
Local variables패널에서Add new mode를 클릭하여 새로운 모드를 추가합니다. - 모드별 값 설정: 각 모드에 따라 변수의 값을 다르게 설정합니다.
- 디자인에 모드 적용: 페이지나 프레임을 선택한 후, 오른쪽 사이드바의
Layer섹션에서Variables드롭다운을 통해 원하는 모드를 선택합니다.
Tip
변수 모드를 활용하면 다크 모드, 다국어 지원 등 복잡한 디자인 시스템을 훨씬 효율적으로 관리할 수 있습니다.
Note
다음 내용인 Figma 변수 타입(Generics) 활용하기에서는 변수 모드를 더욱 유연하게 활용할 수 있는 변수 타입(Generics)에 대해 학습합니다.