변수, 컬렉션 및 모드 개요

시작하기 전에

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

모든 요금제를 사용하는 모든 사람이 변수를 생성하고 사용할 수 있음

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

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

변수는 색상, 숫자, 문자열과 같은 원시 값으로, 라이트 및 다크 모드 또는 모바일 및 데스크톱 모드와 같은 디자인 컨텍스트에 따라 값이 변경될 수 있습니다.

스타일 및 구성요소와 마찬가지로 변수도 팀 라이브러리에 게시할 수 있습니다. 변수 값을 업데이트하면 그에 따라 파일 전체의 디자인을 업데이트할 수 있습니다. 그러면 프로젝트 전반에 걸쳐 일관된 디자인을 생성하고 디자인 시스템을 더욱 효율적으로 업데이트할 수 있습니다.

변수 유형

변수에는 네 가지 유형이 있으며, 각 유형은 특정 속성 및 요소에 적용될 수 있습니다.

변수 유형	정의
색상	단색 채우기
숫자	숫자 값
문자열	텍스트 문자열
부울	True 또는 False 값

색상 변수

색상 변수는 #000000 또는 #FFCD29와 같은 단색 값을 사용합니다.

이 변수는 다크 모드 및 라이트 모드와 같은 테마를 처리하는 데 적합합니다. 또한 브랜드의 색상 팔레트를 구성하는 데도 도움이 될 수 있습니다. 복잡한 디자인 시스템이 있고 디자인 토큰을 구현하려는 경우 색상 변수에 별칭을 지정하면 됩니다.

숫자 변수

숫자 변수는 24 또는 -8과 같은 숫자 값을 사용합니다. 정수나 최대 소수점 둘째 자리까지의 소수(예: 12.75)를 사용할 수 있습니다.

이 변수는 반응형 디자인을 처리하고 다양한 언어 간에 달라지는 텍스트 속성을 처리하는 데 적합합니다. 재사용 가능한 미리 정의된 스타일을 사용하기 위해 텍스트 스타일 내에서 변수에 번호를 매길 수도 있으므로 어떤 속성 조합이 함께 사용되는지 기억하지 않아도 됩니다.

특정 속성은 지원하는 숫자 범위가 더 작습니다. 자세한 내용은 아래의 토글을 확인하세요.

문자열 변수

문자열 변수는 Inter, Hello world! 또는 94102와 같은 일련의 문자를 사용합니다. 이러한 변수는 서로 다르게 지역화된 디자인 간에 언어를 전환하고, 다른 변수와 결합하여 텍스트 스타일을 생성하며, 프로토타입 제작 시 구성요소 변형을 전환하는 데 유용합니다.

부울 변수

부울 변수는 true 및 false 값을 사용합니다. 이 변수는 디자인의 특정 컨텍스트에 대한 레이어를 숨기고 표시하는 데 적합합니다.

토큰 및 별칭 지정

변수는 다른 변수를 참조할 수 있습니다. 즉, 변수를 다른 변수에 적용할 수 있습니다. 이를 “별칭 지정”이라고도 하는데, 이렇게 하면 디자인 토큰을 구현할 수 있습니다.

변수는 동일한 유형의 다른 변수를 참조할 수 있습니다. 예를 들어 색상 변수는 다른 색상 변수를 참조할 수 있습니다. 텍스트 변수는 다른 텍스트 변수를 참조할 수 있습니다.

변수 별칭 지정 방법 알아보기 →

컬렉션 및 그룹

컬렉션과 그룹은 모두 변수를 구성하고 더 쉽게 찾을 수 있도록 하는 데 사용됩니다.

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

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

변수 모드

모드는 컬렉션의 변수 값 목록으로, 변수당 하나의 값을 저장합니다. 또한 모드는 디자인의 다양한 컨텍스트를 나타냅니다.

변수에 여러 정의가 있는 경우 각 정의는 모드와 연관됩니다. 변수가 레이어의 속성에 적용되면 레이어는 현재 모드를 기반으로 값을 표현하므로 컨텍스트 간에 디자인을 빠르게 전환할 수 있습니다.

예를 들어 두 색상 값(한 모드에서는 파란색, 다른 모드에서는 흰색)을 저장하는 색상 변수가 있을 수 있습니다. 이 변수를 텍스트 레이어에 적용하면 해당 모드에 따라 파란색 또는 흰색으로 표시됩니다.

다음은 모드를 사용하여 컨텍스트를 전환할 수 있는 몇 가지 방법입니다.

• 라이트 및 다크 모드와 같은 다양한 색상 테마
• 디자인에서 카피 흐름 방식을 확인하기 위한 다양한 언어
• 다양한 간격과 패딩을 적용할 경우 요소가 어떻게 보이는지 확인하기 위한 기기 크기

변수 모드로 디자인 컨텍스트를 전환하는 방법 알아보기 →

고려 사항

스타일 및 변수

변수와 스타일은 모두 신뢰할 수 있는 소스 역할을 하며 효율성과 일관성을 위해 디자인 전반에서 재사용할 수 있습니다.

변수를 사용할지 또는 스타일을 사용할지 결정할 때는 다음 사항에 유의하세요.

• 스타일은 값의 합성을 만드는 데 적합합니다. 또한 스타일은 다른 스타일이나 변수에 사용할 수 없습니다.
• 변수를 사용하면 라이트 모드 및 다크 모드와 같은 여러 모드를 만들 수 있습니다. 또한 변수를 스타일 및 다른 변수에 적용할 수 있으며, 이렇게 하면 디자인 토큰을 구현할 수 있습니다.

스타일과 변수의 차이점 알아보기 →