Figmapedia
목록으로 돌아가기
베리어블 & 디자인 시스템

Figma Variables 컬러 네이밍

피그마 오픈카톡방2026. 3. 7.

질문사항

Figma Variables를 활용하여 다크 모드와 라이트 모드를 전환하는 기능을 구현 중입니다. 이때 컬러 변수의 네이밍 컨벤션을 어떻게 가져가야 할지 감이 오지 않습니다. 현재 '컬러_01'과 같이 표기하고 있는데, 실무에서는 혼란을 줄 수 있을 것 같아 더 좋은 명명 규칙이 궁금합니다.

답변

다크/라이트 모드를 위한 컬러 변수 명명은 디자인 시스템의 핵심 요소 중 하나입니다. 단순히 '컬러_01'과 같이 번호로 매기는 방식은 확장성과 유지보수 측면에서 좋지 않습니다. 일반적으로 시맨틱(Semantic) 네이밍 방식을 사용하는 것이 좋습니다.

시맨틱 네이밍이란?

색상의 실제 값(예: `#FFFFFF`, `#000000`) 대신, 해당 색상이 UI에서 어떤 역할을 하는지에 따라 이름을 부여하는 방식입니다. 이렇게 하면 다크 모드나 라이트 모드에서 색상 값이 변경되더라도, 역할 이름은 그대로 유지되어 일관성을 유지할 수 있습니다.

예시:

  • 기본 팔레트 (Primitive/Alias Tokens):
  • `gray/100`, `gray/200`, ..., `gray/900`
  • `blue/500`, `red/600` 등 (브랜드 컬러)
  • 이 단계는 실제 색상 값을 가집니다.
  • 시맨틱 토큰 (Semantic Tokens):
  • `background/primary` (주 배경색)
  • `background/secondary` (보조 배경색)
  • `text/primary` (주 텍스트 색상)
  • `text/secondary` (보조 텍스트 색상)
  • `icon/default` (기본 아이콘 색상)
  • `border/default` (기본 테두리 색상)
  • `button/primary/background` (주 버튼 배경색)
  • `button/primary/text` (주 버튼 텍스트 색상)

    • 다크/라이트 모드 적용:

    Figma Variables에서 모드(Mode)를 사용하여 다크/라이트 모드를 구현할 때, 시맨틱 토큰이 각 모드에 따라 다른 기본 팔레트 색상을 참조하도록 설정합니다.

  • 컬렉션: `Colors`
  • 모드 1: `Light`
  • `background/primary`: `gray/100`
  • `text/primary`: `gray/900`
  • 모드 2: `Dark`
  • `background/primary`: `gray/900`
  • `text/primary`: `gray/100`

    • 이렇게 하면 디자이너는 UI 요소에 `background/primary`를 적용하고, 사용자가 모드를 변경하면 Figma가 자동으로 해당 모드의 `background/primary`에 연결된 색상 값을 적용합니다.

    원티드 디자인 시스템이나 Material Design, Ant Design 등 잘 구축된 디자인 시스템의 컬러 토큰 명명 규칙을 참고하시면 큰 도움이 될 것입니다.