변수와 컬렉션 생성 및 관리

시작하기 전에

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

요금제를 이용하는 모든 사람

파일 편집 가능 액세스 권한이 있는 사람은 누구나 변수를 만들고 편집할 수 있습니다.

변수에 대한 리소스가 더 필요하신가요? 변수 가이드를 확인해 보세요.

변수 모달 액세스

변수 모달을 사용하여 다음 사항을 생성 및 관리하세요.

1. 변수 컬렉션
2. 변수
3. 변수 모드
4. 변수 그룹

변수 모달 액세스 방법:

1. Esc 키를 누르거나 캔버스를 클릭하여 캔버스의 모든 항목을 선택 해제합니다.
2. 오른쪽 사이드바에서 로컬 변수 섹션을 찾습니다.
3. 변수 열기를 클릭합니다.

토글 사이드바를 클릭하면 변수 모달에서 추가 옵션을 볼 수 있습니다.

변수 만들기

1. 아무 컬렉션에서 + 변수 만들기를 클릭합니다.
2. 드롭다운에서 변수 유형을 선택합니다.
3. 첫 번째 열에 변수의 이름을 입력하고, 두 번째 열에 값을 입력합니다.

각 컬렉션은 최대 5,000개의 변수를 가질 수 있습니다.

변수를 복제하려면 하나 이상의 변수를 선택하고 ⇧ Shift Enter를 누릅니다.

변수를 삭제하려면 변수를 마우스 오른쪽 버튼으로 클릭하고 변수 삭제를 선택합니다.

별칭 만들기

변수의 별칭을 만들어 그 값을 기존 변수에 연결합니다. 이렇게 하면 디자인 토큰을 구현하고, 디자인 업데이트 사항을 더 효율적으로 관리할 수 있습니다.

예를 들어, 동일한 색상 변수를 참조하는 여러 색상 변수가 있다고 가정해 봅시다. 해당 색상을 업데이트해야 하는 경우, 색상의 모든 인스턴스를 수동으로 업데이트하는 대신 소스만 업데이트하면 됩니다.

변수는 동일한 유형의 다른 변수를 참조할 수 있습니다.

변수에 별칭을 만드는 방법:

1. 변수 모달을 엽니다.
2. 변수 값을 마우스 오른쪽 버튼으로 클릭하고 별칭 만들기를 선택합니다.
3. 라이브러리 탭에서 별칭을 설정할 변수를 선택합니다. 검색창을 사용하여 이름으로 변수를 찾거나 사용 가능한 라이브러리를 둘러볼 수 있습니다.

별칭을 분리하려면 값 필드 위에 마우스를 올려놓고 별칭 분리를 클릭합니다.

변수 복사 및 붙여넣기

변수를 복사하여 다른 파일에 있는 컬렉션을 포함한 모든 컬렉션에 붙여 넣을 수 있습니다.

1. 변수 모달에서 원하는 컬렉션을 엽니다.
2. 하나 이상의 변수를 선택합니다.
   • 여러 변수를 선택하려면 Mac에서는 ⌘ Command 키를, Windows에서는 ⌃ Control 키를 누릅니다.
   • 변수 범위를 선택하려면 ⇧ Shift 키를 길게 누릅니다.
3. 선택 항목을 마우스 오른쪽 버튼으로 클릭하고 복사를 선택합니다.
4. 아무 컬렉션에서 마우스 오른쪽 버튼을 클릭하고 붙여넣기를 선택합니다.

변수 편집

변수의 행 위에 마우스를 올리고 변수 편집 아이콘을 클릭하여 모달을 엽니다.

여기에서 다음 작업을 수행할 수 있습니다.

1. 변수 이름을 바꿉니다.
2. 변수를 어떻게 사용해야 하는지 설명하는 내용을 추가합니다.
3. 변수의 값을 수정합니다.
4. 코드 구문을 추가합니다.
5. 게시에서 변수를 숨깁니다.
6. 변수의 범위를 지정하여 변수를 적용할 수 있는 속성을 제한합니다.

변수의 범위 지정

변수의 범위를 지정하여 변수가 적용될 수 있는 속성을 제한합니다. 이 작업은 디자인에 사용할 변수를 결정할 때 명확성을 높여줍니다.

예를 들어, 변수를 모서리 반경에 한정하면, 그 변수는 모서리 반경에만 적용할 수 있고 다른 지원되는 속성에는 옵션으로 나타나지 않습니다.

숫자, 색상, 문자열 변수에 대해 범위를 지정할 수 있습니다.

변수의 범위를 설정 방법:

1. 변수 하나 또는 여러 개를 마우스 오른쪽 버튼으로 클릭한 후 변수 편집을 선택합니다. 아무 단일 변수의 오른쪽에 있는 변수 편집을 클릭할 수도 있습니다.
2. 범위 탭을 엽니다.
3. 체크박스를 사용하여 해당 속성에서 변수의 사용 가능 여부를 전환합니다. 모두 표시를 선택하여 변수를 모든 지원되는 속성에서 사용할 수 있도록 합니다.

코드 구문 추가

코드 구문을 사용하면 유효한 변수 이름으로 코드에서 변수를 표현하여 원활한 핸드오프 환경을 지원할 수 있습니다. 변수를 사용하여 요소를 검사할 때 변수의 코드 구문이 Dev Mode의 코드 스니펫에 나타납니다. 현재 변수용 코드 스니펫은 CSS, SwiftUI, 그리고 Compose에서 지원됩니다. 

웹, Android, iOS 등 플랫폼당 하나의 이름을 만들 수 있습니다. 이 기능을 사용하면 변수별로 최대 세 개의 코드 구문을 사용할 수 있습니다. 

변수에 코드 구문을 추가하는 방법:

1. 코드 구문 섹션의 변수 편집 모달에서 코드 구문 추가를 클릭합니다.
2. 드롭다운에서 웹, Android 또는 iOS를 선택합니다.
3. 입력 상자를 사용해서 변수 이름을 입력합니다. 미리보기는 변수 이름이 코드 스니펫에 어떻게 나타나는지를 보여줍니다.

변수 일괄 편집

한 번에 여러 변수를 편집하는 방법:

1. 변수 모달에서 아무 컬렉션이나 엽니다.
2. 키보드 바로가기를 사용하여 여러 변수를 선택합니다.
   • ⌘ Command / Control 키를 누른 상태에서 클릭하여 개별 변수를 선택합니다.
   • Shift 키를 누르고 클릭하여 변수 범위를 선택합니다.
3. 선택한 변수를 마우스 오른쪽 버튼으로 클릭하고 변수 편집을 클릭합니다.
4. 변수 편집 모달에서 수행할 수 있는 작업:
   • 변수 유형이 지원하는 경우 변수 범위 설정
   • 게시에서 변수 숨기기

변수 컬렉션 생성 및 관리

컬렉션은 변수 및 모드의 집합입니다. 컬렉션을 사용하면 관련 변수를 함께 구성할 수 있습니다. 예를 들어 한 컬렉션은 다양한 언어로 텍스트를 지역화하는 데 사용하고 다른 컬렉션은 공간 값에 사용합니다.

변수 컬렉션 생성

변수 컬렉션을 만들려면 변수 모달의 사이드바로 이동하여 추가 옵션 > 컬렉션 만들기를 클릭합니다.

파일에 변수가 생성되지 않은 경우, 새로운 변수 컬렉션을 생성하려면 먼저 변수를 만들어야 합니다.

변수 컬렉션 이름 변경

변수 컬렉션 이름 변경 방법:

1. 변수 모달의 사이드바에서 컬렉션 드롭다운을 열고 관리할 컬렉션을 선택합니다.
2. 더 많은 옵션을 클릭하고 컬렉션 이름 변경을 선택합니다.

변수 컬렉션 삭제

변수 컬렉션을 삭제하면 포함된 변수도 모두 삭제됩니다. 변수를 사용하던 모든 속성은 변수 및 기존 모드에서 연결이 끊어집니다. 변수와 컬렉션은 작업을 즉시 취소하거나 파일의 이전 버전을 복원해야만 복원할 수 있습니다. 

변수 컬렉션 삭제 방법:

1. 변수 모달의 사이드바에서 컬렉션 드롭다운을 열고 관리할 컬렉션을 선택합니다.
2. 더 많은 옵션을 클릭하고 컬렉션 삭제를 선택합니다.

파일에서 변수 컬렉션 순서 바꾸기

변수를 디자인에 적용할 때 더 빠르게 정리하고 찾을 수 있게 변수 컬렉션 순서를 바꾸세요. 변수 컬렉션의 순서를 변경하면 변수 모드 선택기와 변수 선택기에서 나타나는 순서에 영향을 미칩니다.

파일에서 변수 컬렉션 순서 바꾸는 방법:

1. 변수 모달의 사이드바에서 더 많은 옵션을 클릭하고 컬렉션 순서 바꾸기를 선택합니다.
2. 컬렉션 팝업에서 수행할 수 있는 작업:
   • 컬렉션을 클릭하고 드래그하여 순서 변경
   • A-Z 순서로 정렬을 클릭하여 컬렉션을 알파벳순으로 정렬

변수 선택 그룹화

컬렉션 내의 그룹에 변수를 추가하여 해당 변수를 추가로 구성할 수 있습니다. 예를 들어 텍스트에 사용되는 색상에 한 그룹을 사용하고 선에 사용되는 색상에 다른 그룹을 사용합니다.

변수를 그룹으로 정리하는 방법:

1. 변수 모달에서 여러 변수를 선택합니다.
   • 여러 변수를 선택하려면 ⌘ Command / Control 키를 길게 누릅니다.
   • Shift 키를 길게 눌러 변수 범위를 선택합니다.
2. 선택 항목을 마우스 오른쪽 버튼으로 클릭하고 선택 항목이 있는 새 그룹을 선택합니다.

그룹 순서를 변경하려면 변수 모달의 사이드바에서 그룹을 클릭 및 드래그합니다. 그룹을 다른 그룹으로 클릭하여 드래그하여 중첩할 수도 있습니다. 

그룹 이름 변경

1. 변수 모달의 사이드바에서 그룹 이름을 두 번 클릭합니다.
2. 변수 그룹에 새 이름을 입력합니다.

그룹 관리

1. 변수 모달의 사이드바에서 사이드바의 그룹 이름을 마우스 오른쪽 버튼으로 클릭합니다.
2. 메뉴에서 원하는 작업을 선택합니다.
   • 그룹 해제
   • 그룹 복제
   • 그룹 삭제