Note
이 문서는 Figma 변수 모드를 더욱 유연하게 활용할 수 있는 변수 타입(Generics)의 개념과 활용법을 설명합니다. Figma 변수(Variables) 활용하기의 심화 내용입니다.
Figma의 변수 타입(Generics)은 특정 변수가 어떤 종류의 값(예: 색상, 숫자, 문자열)을 가질 수 있는지 미리 정의하는 방식입니다. 이는 변수 모드와 결합하여 디자인 시스템의 유연성과 확장성을 크게 향상시킵니다.
예를 들어, color라는 변수를 정의할 때, 이 변수가 primary, secondary, text 등 다양한 용도로 사용될 수 있음을 미리 지정할 수 있습니다. 이는 단순히 색상 값을 저장하는 것을 넘어, 색상의 '역할'을 정의하는 데 도움을 줍니다.
가장 대표적인 활용 사례는 다크 모드와 라이트 모드 간의 색상 전환입니다. background-color, text-color 등의 변수를 정의하고, 각 모드(Mode)에 따라 다른 색상 값을 할당할 수 있습니다.
| 변수 이름 | Mode 1 (Light) | Mode 2 (Dark) |
|---|---|---|
background |
#FFFFFF |
#1A1A1A |
text |
#1A1A1A |
#FFFFFF |
primary-button |
#007AFF |
#5AC8FA |
여러 브랜드 테마를 하나의 디자인 파일에서 관리할 때 유용합니다. 각 브랜드에 맞는 색상 팔레트, 폰트 스타일 등을 변수 타입으로 정의하고, 필요에 따라 전환할 수 있습니다.
다국어 지원이 필요한 경우, 각 언어별 텍스트를 문자열 변수로 정의하고 모드별로 다른 언어의 텍스트를 할당할 수 있습니다.
- 변수 생성: Figma 변수(Variables) 활용하기에서 배운 대로 변수를 생성합니다.
- 모드 추가:
Local variables패널에서Add new mode를 클릭하여 필요한 모드를 추가합니다. - 모드별 값 입력: 각 모드에 해당하는 변수 값을 입력합니다.
- 레이어에 적용: 디자인 요소에 변수를 적용한 후, 페이지나 프레임을 선택하여 원하는 모드를 전환해봅니다.
Tip
변수 타입(Generics)은 디자인 시스템의 복잡성을 줄이고, 유지보수성을 높이는 데 핵심적인 역할을 합니다. 특히 대규모 프로젝트나 여러 테마를 지원해야 하는 경우 필수적입니다.
Note
다음 내용인 실습 2: 다크/라이트 테마 디자인에서는 Figma 변수와 변수 타입(Generics)을 활용하여 다크/라이트 테마를 직접 디자인하는 실습을 진행합니다.