변수 모드

시작하기 전에

이 기능을 사용할 수 있는 사용자

에듀케이션, 프로페셔널, 오거니제이션, 엔터프라이즈 요금제 사용자라면 누구나 변수 모드를 만들고 사용할 수 있습니다.

변수 컬렉션당 생성할 수 있는 모드 수는 사용 중인 요금제에 따라 다릅니다.

변수에 대한 더 많은 리소스를 찾고 계신가요? 변수 가이드 확인 →

변수를 사용하면 색상, 간격 값, 치수 등 다양한 디자인 속성에 적용할 수 있는 재사용 가능한 값을 저장할 수 있습니다.

변수 모드를 사용하면 필요한 모든 컨텍스트에 대해 여러 프레임을 만들 필요 없이 디자인의 다양한 컨텍스트를 표현할 수 있습니다. 이는 변수가 여러 값을 포함할 수 있으며, 각 변수 모드가 변수당 하나의 값을 저장하는 방식으로 구성되기 때문입니다.

예를 들어, 디자인에 라이트 모드와 다크 모드 버전을 만들어야 한다고 가정해 보겠습니다.

변수 모드를 사용하지 않는 경우, 기본값인 라이트 모드용 디자인을 먼저 만든 다음, 이를 복제해서 다크 모드에 필요한 모든 색상 채우기를 업데이트해야 합니다.

하지만 변수 모드를 사용하면, 기본값인 라이트 모드와 다크 모드용 두 가지 값 세트(또는 모드)를 가진 변수 컬렉션을 생성할 수 있습니다. 이 변수를 하나의 디자인 세트에 적용할 수 있습니다. 그러면 라이트 모드와 다크 모드 사이에서 디자인을 빠르게 전환할 수 있습니다.

세 번째 색상 테마가 필요한 경우 새 모드를 만들고 그 테마에 대한 값을 입력하기만 하면 되기 때문에, 이 값을 처음부터 다시 디자인에 적용하지 않아도 됩니다.

변수 모드가 지원할 수 있는 컨텍스트는 매우 다양합니다. 시작하는 데 도움이 될 몇 가지 아이디어를 소개합니다.

• 색상 변수를 사용해 고대비 모드 또는 색맹을 위한 다양한 테마와 같은 접근 가능한 색상 테마를 만듭니다.
• UI 복사를 현지화하여, 문자열 변수를 사용해 디자인에서 복사 흐름을 확인합니다.
• 시계, 모바일, 데스크톱 등 다양한 디바이스 크기를 고려하여, 숫자 변수를 사용해 다양한 간격과 패딩 크기에 따라 요소가 어떻게 반응하는지 확인합니다.

모드 만들기

1. 캔버스에서 아무 곳이나 클릭하여 모든 개체를 선택 해제합니다.
2. 오른쪽 사이드바의 Local variables(로컬 변수) 섹션에서 Open variables(변수 열기)를 클릭하여 변수 모달을 엽니다.
3. 새로운 모드를 만들고자 하는 컬렉션을 엽니다.
4. 기존 변수에서 열 머리글 오른쪽에 있는 New variable mode(새 변수 모드)를 클릭합니다. Figma는 첫 번째 열의 값을 새 열에 복제합니다.

모드를 복제하려면 모드 헤더를 마우스로 우클릭한 후 Duplicate mode(모드 복제)를 선택하는 방법도 있습니다.

기본 모드 변경

변수 모달에서 변수 컬렉션의 기본 모드는 가장 왼쪽에 있는 모드 열입니다.

개체가 변수 개체를 사용하거나 페이지에 변수를 사용하는 개체가 포함된 경우, 개체 또는 페이지는 특정 모드를 명시적으로 설정할 때까지 기본 모드의 값을 사용합니다.

모드 순서를 변경하여 변수 컬렉션의 기본 모드를 변경합니다.

기본 모드를 다른 모드로 변경하려면 다음 안내를 따르세요.

1. Variables(변수) 모달에서 변수 모드가 있는 변수 컬렉션을 엽니다.
2. 모드를 찾은 후 다음 중 하나를 선택합니다.
   • 마우스 오른쪽 버튼을 클릭하고 Set as default(기본값으로 설정)를 선택합니다.
   • 또는 변수 모드를 클릭하여 가장 왼쪽 열로 드래그합니다.

개체나 페이지의 변수 모드가 특정 모드가 아닌, 'Auto(자동)' 또는 'Default(기본값)'로 설정된 경우, 새로운 기본 모드가 무엇이든 상속됩니다.

개체나 페이지가 명시적으로 기본 모드로 설정된 경우, 그 모드가 더 이상 기본값이 아니더라도 계속 해당 모드에 연결된 상태로 유지됩니다.

모드 순서 변경

변수 컬렉션에서 모드 순서를 변경하려면 다음 중 하나를 선택하세요.

• 마우스 오른쪽 버튼을 클릭하고 Move column right(열 오른쪽으로 이동) 또는 Move column left(열 왼쪽으로 이동)를 선택합니다.
• 아니면 열을 클릭한 후 왼쪽이나 오른쪽으로 드래그합니다.

변수 컬렉션에서 열을 왼쪽 끝까지 이동하면 해당 열이 기본 모드가 됩니다.

모드 간 전환

개체 또는 페이지의 모드를 전환하면 디자인에서 원하는 변수 값을 사용할 수 있습니다. 다음 모드를 전환할 수 있습니다.

• 레이어
• 프레임
• 컴포넌트 및 컴포넌트 세트
• 섹션
• 그룹
• 페이지

개체의 모드 전환

레이어의 경우: 변수가 하나 이상 적용되고, 그 변수가 여러 모드를 가지고 있으면 모드를 전환할 수 있습니다.

그룹, 프레임, 컴포넌트, 컴포넌트 세트, 섹션: 중첩된 레이어에 하나 이상의 변수가 적용되고 그 변수가 여러 모드를 가지고 있는 경우, 모드를 전환할 수 있습니다.

개체의 모드를 전환하려면 다음 안내를 따르세요.

1. 레이어, 그룹 또는 컨테이너 개체를 선택합니다.
2. 오른쪽 사이드바의 Appearance(모양) 섹션에서 Apply variable mode(변수 모드 적용)을 클릭합니다.
3. 변수 컬렉션 위에 마우스를 올려 모드를 선택합니다. 

개체에 모드를 지정하면 왼쪽 사이드바의 Layers(레이어) 패널에서 레이어 이름 옆에 모드 아이콘과 모드 이름이 있는 태그가 표시됩니다. 여러 모드가 있는 경우, 태그 위에 마우스를 올리면 모드 목록을 볼 수 있습니다.

 

페이지의 모드 전환

로컬 변수 컬렉션에 여러 모드가 포함된 경우 페이지의 모드를 전환할 수 있습니다.

1. 캔버스의 모든 항목을 선택 해제합니다.
2. 오른쪽 사이드바의 Page(페이지) 섹션에서 Apply variable mode(변수 모드 적용)를 클릭합니다.
3. 변수 컬렉션 위에 마우스를 올려 모드를 선택합니다.

자동 모드 설정(개체 전용)

변수가 있는 개체는 기본적으로 모드가 Auto(자동)로 설정됩니다. 즉, 이 개체는 부모 컨테이너의 모드를 따릅니다.

• 부모 컨테이너도 'Auto(자동)'로 설정된 경우, 개체는 지정된 모드의 컨테이너에 도달할 때까지 레이어 계층 구조를 따라 계속 올라갑니다.
• 부모 컨테이너에 모드가 지정되지 않은 경우, 개체는 괄호 안에 표시된 컬렉션의 기본 모드를 따르게 됩니다.

변형 인스턴스와 함께 사용

불리언, 숫자, 문자열 변수는 변형 속성이 있는 컴포넌트 인스턴스에 할당할 수 있습니다.

문자열 및 숫자 변수

문자열 및 숫자 변수를 변형 인스턴스에 매핑하면 모드가 변경될 때 다른 변형으로 전환됩니다. 이렇게 하려면 변수 값이 변형 속성의 값과 일치해야 합니다.

1. 여러 값(또는 모드)을 가진 문자열 또는 숫자 변수를 만듭니다.
2. 변수의 값을 변형 속성의 값과 일치하도록 설정합니다.
3. 변형의 컴포넌트 인스턴스를 가져오고, 오른쪽 사이드바의 변형 속성 위로 마우스를 가져갑니다.
4. Assign variable(변수 할당)을 클릭하고 변수를 선택합니다.

이제 모드가 전환될 때마다 인스턴스가 다른 변형으로 전환됩니다.

불리언 변수

불리언 변수는 true 및 false 값을 가진 변형 속성에 매핑될 수 있습니다.

1. 여러 값(또는 모드)을 갖는 불리언 변수를 만듭니다.
2. 동일한 컴포넌트 세트 내에서 두 개의 변형 인스턴스를 만듭니다.
3. 한 변형의 값을 True로 설정하고 다른 변형의 값을 False로 설정합니다.
4. 변형 중 하나의 컴포넌트 인스턴스를 가져오고, 오른쪽 사이드바의 변형 속성 위로 마우스를 가져갑니다.
5. Assign variable(변수 할당)을 클릭하고 불리언 변수를 선택합니다.

프로토타입에서 변형 및 변수를 사용하는 방법 알아보기 →

중첩된 인스턴스

중첩된 인스턴스의 변형 속성에 변수를 바인딩할 수도 있습니다.

1. 다른 컴포넌트의 중첩된 인스턴스를 사용하여 컴포넌트를 만듭니다.
2. 여러 값(또는 모드)을 가진 문자열, 숫자 또는 불리언 변수를 만듭니다.
3. 변수의 값을 중첩된 인스턴스 컴포넌트 속성의 값과 일치하도록 설정합니다.
4. 컴포넌트의 인스턴스를 만듭니다.
5. 중첩된 인스턴스의 변형 속성에 변수를 할당합니다.

이제 중첩된 인스턴스는 모드가 전환될 때마다 다른 변형으로 전환됩니다.

모드 충돌

충돌이 있는 모든 모드는 모드 전환 기능에서 그 옆에 정보 아이콘을 표시합니다. 파일 내 개체가 동일한 변수의 다른 버전을 사용할 때 충돌이 발생합니다.

충돌이 있는 모드를 선택하면 모드는 렌더링할 수 있는 레이어에만 적용됩니다. 레이어는 이 모드를 포함하는 변수 버전을 사용하고 있어야 합니다.

충돌하는 모드를 해결하려면 다음 안내를 따르세요.

1. 주요 변수가 있는 파일을 열고 팀 라이브러리에 게시합니다. 
2. 충돌이 발생한 파일에서 라이브러리 모달의 업데이트를 검토하고 수락합니다.

파일에 대한 편집 가능 액세스 권한이 있는 사람만 해당 파일을 편집, 게시, 검토하고, 라이브러리 업데이트를 승인할 수 있다는 점에 유의하세요. 

모드 충돌 방지

모드 충돌은 모드가 변수에서 삭제되거나 변수에 추가되었는데 업데이트가 파일이나 개체에 적용되지 않은 경우 발생할 수 있습니다. 

다음은 이러한 충돌이 발생할 수 있는 상황들과 그에 대한 대처 방법입니다.