변수와 스타일의 차이점
Figma가 변수 기능을 확장하면서, 여러 가지 궁금한 점이 생기셨을 수 있습니다. 변수와 스타일의 차이가 무엇인가요? 변수와 스타일은 각기 언제 사용해야 하나요? 스타일은 이제 사용되지 않나요?
결국, 표면적으로는 비슷하게 작동하는 것처럼 보여.
- 둘 다 진실 공급원 역할을 합니다.
- 둘 다 팀 라이브러리에 게시할 수 있고, 디자인 전반에서 재사용할 수 있습니다.
- 변수나 스타일을 업데이트하면 사용하는 모든 디자인이 업데이트되기 때문에 둘 다 효율적인 디자인 시스템 관리를 지원합니다.
스타일과 변수에는 중요한 차이점이 있어 서로 다른 상황에서 유용하게 사용됩니다.
여기에서는 스타일과 변수의 차이점을 짚어보고, 디자인에서 하나만 사용할지, 두 가지를 함께 활용할지 결정하는 데 도움이 되는 정보를 알려드립니다.
기초적인 차이
스타일과 변수 사이에는 사용하는 값의 유형, 캔버스에서의 모양, 모드 사용 등 몇 가지 주요 차이점이 있습니다.
스타일은 다양한 속성을 저장할 수 있습니다.
- 단색 채우기
#FFFFFF와 같이 단일 원시 값을 가진 속성 - 색상 그레이디언트와 같이 여러 원시 값을 가진 속성
- 블렌드 모드, 이미지, GIF, 동영상과 같은 기타 형식
스타일은 여러 값의 조합을 담도록 설계되어 있어 모든 값이 동시에 표현됩니다. 예를 들어, 글꼴, 글꼴 크기, 글꼴 굵기 속성을 하나의 텍스트 스타일에 동시에 저장할 수 있습니다. 텍스트 레이어에 스타일을 적용하면 모든 속성이 텍스트 레이어에 동시에 적용됩니다.
또 다른 예로, 다양한 채우기 유형과 변수의 조합으로 구성되고 위에서 아래로 정렬된 색상 스타일을 살펴보겠습니다. 색상 스타일은 각 카드가 채우기인 카드 더미를 위에서 내려다보는 것과 같습니다. 상단 색상이 충분히 투명하면 아래쪽 색상도 볼 수 있습니다. 채우기를 수동으로 재배치하여 상단에 표시되는 내용을 변경할 수도 있습니다.
변수는 단일 원시 값을 저장할 수 있습니다. 예를 들어, 원시 값에는 #FFFFFF와 같은 단색 채우기, 16 또는 -32.75와 같은 숫자, true 및 false와 같은 불리언 값이 포함될 수 있습니다.
변수는 하나 이상의 재사용 가능한 단일 값을 보유하도록 만들어졌지만, 한 번에 하나의 값만 표현할 수 있습니다. 각 값은 다른 변수 모드에 대응합니다. 이는 모든 변수 유형에 해당됩니다. 스타일과 달리 변수는 하나의 카드만 볼 수 있는 카드 세트와 같으며, 어떤 카드를 볼 수 있는지는 컨텍스트에 따라 달라집니다.
예를 들어, 라이트 및 다크 모드가 있는 변수 컬렉션이 있다고 가정해 보겠습니다. 프레임의 여러 레이어에 적용한 후 프레임을 다크 모드로 설정합니다. 변수가 포함된 모든 레이어는 다크 모드의 값을 표시합니다. 프레임을 라이트 모드로 전환하면 변수의 표현된 값이 라이트 모드로 전환됩니다.
모드는 변수를 위해 만들어졌지만, Figma에서는 스타일에 변수를 적용할 수 있습니다.
기본 글꼴 크기에 대한 숫자 변수가 있다고 가정해 보겠습니다. 변수에는 두 개의 단일 원시 값이 있습니다. 모바일 모드의 경우16, 데스크톱 모드의 경우18입니다. 이 변수는 텍스트 스타일의 글꼴 속성에 적용되며, 다른 속성에도 변수나 값들을 함께 설정할 수 있습니다..
이제 이 텍스트 스타일에 다중 모드를 가진 변수가 적용되어 있으므로 어떤 텍스트 레이어든 모드를 쉽게 전환할 수 있습니다.
인사이트
- 변수는 재사용 가능한 원시 값을 저장합니다. 스타일은 다양한 값의 조합을 저장합니다.
- 변수에 여러 값이 있는 경우(예: 모드)에는 한 번에 하나의 값만 표현할 수 있습니다. 스타일의 값 조합은 한 번에 모두 표현됩니다.
- 디자인 요소에 다양한 컨텍스트(예: 라이트 및 다크 모드)를 만들고 싶다면 변수와 변수 모드를 사용해야 합니다.
확장성 및 관리
디자인 시스템을 효율적으로 관리하고 확장하는 가장 강력한 방법 중 하나는 바로 토큰에 별칭을 지정하는 것입니다.
- 디자인 토큰은 재사용 가능한 값을 지칭하는 업계 용어로, 디자인과 코드가 동기화되도록 돕습니다.
- 별칭은 디자인 시스템을 구성하는 방법으로, 디자인 토큰이 다른 디자인 토큰의 값을 상속할 수 있도록 합니다.
변수를 사용하면 바로 이 작업을 수행할 수 있습니다.
예를 들어 디자인 토큰 중 하나인 'brand-400' 변수의 값이 #EAEA00이라고 가정해 보겠습니다. 또다 른 디자인 토큰인 변수 'icon-default'를 brand-400의 별칭으로 지정해 brand-400이 갖는 모든 값을 상속받게 하고 싶습니다.
brand-400의 값이 변경되면, icon-default가 여전히 brand-400에 연결되어 있는 한 그 변경 사항이 그대로 반영됩니다.
스타일은 별칭을 지원하지 않습니다. 즉, 변수 및 기타 스타일에는 적용할 수 없습니다. 변수는 두 가지 모두에 적용할 수 있습니다.
변수는 별칭을 지원하므로 복잡하고 확장 가능한 토큰 구조를 보다 견고하게 구성할 수 있습니다. 이를 통해 디자인 시스템의 다른 토큰이나 요소들에 전달될 수 있는 기본값을 정의할 수 있습니다. 또한 디자인 시스템을 보다 효율적으로 업데이트하고 관리할 수 있습니다.
예를 들어, 전역 토큰 역할을 하는 변수를 하나 생성하고 이를 기반으로 다른 여러 단계의 변수들을 정의한다고 가정해보겠습니다. 글로벌 토큰이 변경되면 그에 연결된 모든 하위 요소들도 함께 변경됩니다.
일부 토큰만 변경하려는 경우, 이 구조를 사용하면 상위 단계에서 적절한 토큰을 선택하고 변경함으로써, 하위 요소들을 일일이 수동으로 수정하지 않아도 자동으로 반영할 수 있습니다.
별칭은 모든 변수 유형에 대해 지원됩니다. 변수 별칭을 지정하는 방법을 알아보세요.
인사이트:
- 변수는 스타일과 다른 변수에 적용할 수 있지만, 스타일은 변수나 다른 스타일에 적용할 수 없습니다.
- 변수는 성장하는 디자인 시스템을 확장하고 디자인 시스템을 더 효율적으로 관리하는 데 도움이 됩니다.
지원 기능
범위 변수
범위 지정은 숫자 변수에 완전히 지원되며, 앞으로 다른 변수 유형으로 확장될 예정입니다.
변수의 범위를 설정하여 변수가 적용될 수 있는 속성을 제한합니다.
예를 들어, 색상 변수를 선 채우기로만 제한하면 다른 속성에는 해당 변수를 적용할 수 없게 됩니다. 이를 통해 변수가 어디에 사용될 수 있는지 더 명확하게 제어할 수 있으며, 디자인할 때 추측이나 혼동을 줄일 수 있습니다.
인사이트:
- 변수에는 범위 지정이 가능하지만 스타일에는 불가능하므로, 범위 지정 기능을 활용하려면 변수를 사용하세요.
- 범위 지정은 현재 숫자 변수에 사용할 수 있으며, 앞으로 다른 유형으로 확장될 것입니다.
변수가 있는 프로토타입
프로토타입 제작에서 변수는 개체의 속성을 저장하는 데 사용됩니다. 프로토타입 인터랙션을 통해 변수 값을 변경하면 몇 개의 간단한 프레임만으로도 디자인 내 개체의 모양, 내용, 표시를 동적으로 제어할 수 있습니다.
고급 프로토타입에서 변수를 사용하는 방법을 배워보세요.
변수가 있는 코드 구문
코드 구문은 현재 개발 중이며 곧 제공될 예정입니다.
변수 편집 모달을 열면 코드 구문이라는 제목의 섹션이 표시됩니다. 코드 구문은 유효한 변수 이름을 사용하여 코드 내의 변수를 나타냅니다. 이 정보는 Dev Mode에 표시되며, 디자이너와 개발자가 원활한 핸드오프 경험을 만드는 데 도움이 됩니다.
인사이트: 핸드오프 환경을 개선하려면 변수와 코드 구문을 고려할 수 있습니다.
맺는 말
변수를 사용할지 스타일을 사용할지 여부는 목표에 따라 달라집니다. 디자인 토큰의 확장성과 유연성을 최대한 활용하고 싶다면, 변수에만 집중하는 것도 하나의 전략이 될 수 있습니다. 또는 스타일을 고수하는 것이 프로젝트에 적합할 수도 있습니다. 또는 두 가지를 모두 사용할 수도 있습니다.
스타일은 Figma Design의 주요 기능으로 유지될 예정입니다. 유사점이 있기는 하지만, 변수는 스타일을 대체할 수 없습니다. 그보다는 Figma의 핵심 기능 세트에 추가되는 기능으로 보아야 합니다.