[Daily Article] #2 Variable과 Style의 차이

아티클이라고 하기에는 피그마 고객센터 글이지만…
오늘 일을 하다가 관련된 기능을 좀 찾아보다가 보게 되었습니다.
피그마 Variable에 대해 잘은 알지 못하는 나에게 작은 도움이라도 되었으면…

---

 

The difference between variables and styles

베리어블과 스타일의 차이

 
As Figma extends its feature set with variables, you might be wondering: What is the difference between variables and styles? When should I choose one over the other? Are styles becoming obsolete?

피그마가 베리어블 기능을 확장하면서, 당신은 베리어블과 스타일의 차이에 대해 궁금해졌을 것이다. 언제 어떤 기능을 사용해야 하는 걸까? 스타일은 이제 한 물 가게 된 것일까?
*obsolete 구식인

 

After all, they seem to function similarly on the surface:

표면적으로 둘의 기능은 비슷해보인다.

• Both act as sources of truths.
• Both can be published to team libraries and reused throughout designs.
• Both support efficient design system management because updates to a variable or style will prompt updates for all desigs using them.

• 둘 다 진실의 근원으로 작용한다. (원본 소스로서 작용한다는 뜻)
• 둘 다 팀 라이브러리에 퍼블리싱할 수 있고 디자인 파일들 내에서 재사용할 수 있다.
• 둘 다 효과적인 디자인 시스템 관리에 도움을 준다. 베리어블이나 스타일로 업데이트를 하면 모든 디자인들을 업데이트하게 할 수 있기 때문이다.

 
Styles and variables have key differences that make them valuable in different situations.

스타일과 베리어블은 각자 다른 상황에서 주요한 기능을 한다는 차이가 있다.

In this article, we’ll highlight their differences and help you decide whether to use on, or both, in your designs.

이 글에서는, 둘의 차이점에 대해 알아보고 당신의 디자인에 어떤 것을 사용할지, 혹은 둘 다 사용할지에 대해 결정을 도와주거자 한다.

https://youtu.be/JyCmacSyDY4

Foundational differences

근본적인 차이

There are a couple of key differences between styles and variables:
• The types of values they use
• Their appearance on canvas and use of modes

스타일과 베리어블의 주요한 차이점에는 두가지가 있다.
• 값의 형태가다르다.
• 캔버스에 나타나는 모습과 사용 모드가 다르다.

Types of values

값의 형태

Variables use single, raw, reusable values.
For example, raw values can include solid fills like #FFFFFF, numbers like 16 or -32.75, and boolean values true and false.

베리어블은 단일의, 날 것의, 재사용 가능한 값들을 사용한다.
예를 들어, 날 것의 값은 
#FFFFFF로 솔리드 채우기, 16이나 -32.75와 같은 수치, 불 방식의 값들이 포함될 수 있다.
*boolean 컴퓨터와 전자공학에서 참과 거짓을 나타내는 숫자 1과 0만을 이용하는 방식

Styles use single, raw values; data with multiple values; as well as other formats. 
For example, a color style can use solid fills (single raw values), gradients (multiple values), as well as other formats (images, GIFs, videos, and blend modes).

스타일은 단일의, 날 것의 값을 사용하는데; 여러 개의 값을 가지고 있는 데이터를 사용한다.; 다른 포맷의 값도 사용할 수 있다.
예를 들어, 컬러 스타일은 솔리드 fill(단일 값), 그라이디언트 fill(복수 값), 아예 다른 포맷(이미지, gif, 비디오, 블렌드모드)까지 모두 사용할 수 있다.

Appearance on canvas

캔버스에 나타나는 모습

Styles are built to hold a combination of values, where the values get expressed all at once.

스타일은 여러 개의 값들이 함께 나타나야 하는 경우에 값들의 합을 나타내기 위해 만들어졌다.

For example, looking at a color style is like looking at a “stack” of cards from above, where each card is a fill. This stack can include any combination of fill types and variables. If the color at the top is transparent enough, you can see the color below it. You can also manually rearrange fills to change what you see from the top.

예를 들어, 컬러 스타일을 보는 것은 위에서부터 카드 더미를 보는 것과 같은데, 이 때 카드는 각각 fill 되어 있다. 이 더미는 어떤 fill 타입과 베리어블들의 조합을 포함할 수 있다. 만약 맨 위에 있는 컬러가 투명이라면, 아래에 있는 색을 볼 수 있을 것이다. 직접 어떤 fill을 위에서 볼지 순서를 재정리할 수도 있다.

출처 - 원문

Variables are built to hold one or more single, reusable values, but only one value can be expressed at a time. Each value corresponds to a different variable mode. This is true of all variable types. A variable is like a special set of cards with which you can view only one card at a time.

베리어블은 하나의 혹은 더 단일의 재사용 가능한 값을 위해 만들어졌다. 하지만 한 번에 한 가지 값만 표시될 수 있다. 각 값들은 다른 베리어블 모드에 각자 일치한다. 이는 베리어블 유형 모두에 해당되는 내용이다. 베리어블은 한 번에 하나만 볼 수 있는 카드들의 스페셜 세트와 같다.
*This is true~ 이것은 ~에 해당한다

For example, let’s say we have a collection of variables with light and dark modes. We apply them to various layers in a frame, and set the frame to dark mode. All layers with the variables will express the values from dark mode. If we switch the frame to light mode, the variables will switch their expressed values to light mode.

예를 들어, 라이트 모드와 다크 모드 베리어블 세트가 있다고 가정해보자. 우리는 프레임 속 다양한 레이어들에 이를 적용하고, 그 프레임을 다크 모드로 설정한다. 모든 레이어들은 다크 모드 값으로 나타날 것이다. 만약 라이트 모드로 전환한다면, 베리어블은 라이트 모드로 값을 전환시킬 것이다.

출처 - 원문

Even though modes are built for variables, Figma allows us to apply them to styles.

‘모드’가 베리어블을 위한 기능이기는 하지만, 피그마는 스타일에도 이를 적용할 수 있게끔 했다.

Say we have a number variable for a default font size. The variable has two single, raw values: 16 for a mobile mode and 18 for a desktop mode. We apply this variable to a text style’s font family property, as well as other variables and values to other properties.

폰트 사이즈에 대해 숫자 값으로 베리어블이 적용되어 있다고 하자. 베리어블은 두 가지 단일이, raw 값이 있을 것이다. : 모바일 모드이서는 16, 데스크탑 모드에서는 18. 우리는 이 베리어블을 텍스트 스타일의 폰트 패밀리 옵션에 적용할 수 있다. 다른 옵션에 다른 베리어블, 값들을 적용할 수 있는 것처럼 말이다.

Now, we can switch the mode on any text layer using this text style, because it uses a variable with multiple modes.

이제, 우리는 이 텍스트 스타일을 사용하고 있는 모든 텍스트 레이어에서 모드를 전환할 수 있을 것이다. 그것이 다중 모드의 베리어블을 사용하고 있기 때문이다.

출처 - 원문

Takeaways
• A variable stores raw, reusable values. Styles stores a composite of different values.
• If a variable has multiple values (i.e. modes), it can only express one value at a time. A style’s composite of values are expressed all at once.
• If you want to create different contexts for your design elements (such as light and dark modes) you will need to use variables and variable modes.

요약
• 베리어블은 raw하고 재사용 가능한 데이토를 저장한다. 스타일은 다른 값들의 합을 저장한다.
• 베리어블이 여러 개의 값을 가지고 있다면, (다시 말해 모드) 한 번에 한 가지 값만 표시할 수 있다. 스타일 값들의 합은 한 번에 함께 보인다.
• 만약 구성 요소의 다른 상태를 만들고 싶다면 (라이트, 다크 모드와 같이) 베리어블과 베리어블 모드를 이용해야 할 것이다.
*composite 합성물
*i.e. 다시 말해 (in other words)

Scalability and management

확장성과 관리
*scalability 확장성

One of the most powerful ways of managing and scaling a design system is through aliasing tokens.

가장 효과적으로 디자인 시스템을 관리하고 확장하는 방법은 ‘엘리어싱 토큰’을 활용하는 것이다.

• A design token is an industry term to refer to reusable values, meant to help design and code stay in sync.
• Aliasing is a method of organizing a design system by allowing any design token to inherit the value of another design token.

• 디자인 토큰은 재사용 값들에 대한 산업 용어로, 디자인과 코드를 동일하게 맞추는 데에 도움을 준다.
• ‘엘리어싱’은 디자인 시스템을 어떤 디자인 토큰이든지 다른 디자인 토큰으로부터 값을 물려받을 수 있게 하는 디자인 시스템 구성 방식을 말한다.

Variables allows you to do exactly this.
For example, let’s say the variable "brand-400" (which is one of our design tokens) has a value of #EAEA00. We want the variable "icon-default" (another design token) to be an alias of brand-400, meaning it will inherit whatever value brand-400 has.

베리어블은 이것이 가능하게 만들어준다. “brand-400”이라는 디자인 토큰 중의 하나가 #EAEA00이라는 값을 가졌다고 가정해보자. 우리는 또 다른 디자인 토큰인 “icon-default”가 brand-400가 어떤 값을 가지든 그 값을 그대로 따라 가지지기를 원한다.
*inherit 물려받다

If the value of brand-400 ever changes, then icon-default will follow suit, as long as it’s still bound to brand-400’s definition.

brand-400의 정의에 묶여있는 한, brand-400의 값이 변하면, icon-default도 따라서 바뀔 것이다.

Styles don't support aliasing. In other words, they cannot be applied to variables and other styles. Variables can be applied to both.

스타일은 엘리어싱을 돕지 않는가. 다시 말하자면, 스타일은 베리어블에 다른 스타일과 함께 적용될 수 없다. 베리어블은 양 쪽에 모두 적용될 수 있다.

Because variables support aliasing, it offers more robust support for complex, scalable token structures. They allow you to define primitive values that can flow through other tokens and elements of your design system. It also makes updating and managing design systems more efficient.

왜냐하면 베리어블은 엘리성을 돕기 때문에, 복잡하고 확장 가능한 토큰 구조에 대해 더 튼튼한 도움을 제공한다. 그들은 다른 토큰과 디자인 시스템 전체를 관통하는 초기 값을 정의하는 데에 도움을 준다. 또 디자인 시스템을 더욱 효과적트로 업데이트 하고 관리하는 데에 도움을 준다.
*robust 튼튼한
*primitive 초기의

 

For example, let’s say we create a variable that acts as a global token, and we use it to define other variables at varying levels. If the global token changes, then everything downstream changes.

예를 들어, 글로벌 토큰으로 작용하는 베리어블을 만들었다고 하자. 우리는 그것을 다른 베리어블의 다양한 수준의 레벨들을 정의하는 데에 사용한다. 만약 글로벌 토큰이 바뀌면, 모든 후속의 것들이 바뀐다.
*varying 가지각색의
*downstream 후속의

출처 - 원문

If we only want some tokens to change, this structure allows us to choose the correct token upstream and change it without having to manually rework everything downstream.
만약 몇몇의 토큰만 바꾸기를 원한다면, 이 구조는 상위에서부터 알맞은 토큰을 고르는 데 도움을 줄 것이고 수동으로 모든 하위의 것들을 고치지 않아도 될 것이다.

출처 - 원문

Aliasing is supported for all variable types.

엘리어싱은 모든 베리어블 타입에서 지원된다.

 
Takeaways:

• Variables can be applied to styles and other variables, but styles cannot be applied to either
• Variables help scale a growing design system and make managing a design system more efficient

요약

• 베리어블은 스타일과 또 다른 베리어블에 적용할 수 있다. 하지만 스타일은 둘 중 하나라도 적용할 수 없다.
• 베리어블은 디자인 시스템을 키우는 데에 도움을 주고 디자인 시스템 관리를 더 효과적으로 할 수 있게 해준다.

 

Supporting features

부가 기능
 

Scope variables

Scoping is fully supported for number variables but will be expanded to other variable types in the future.
Scope variables to limit which properties a variable can be applied to.

스코핑은 전적으로 숫자 베리어블을 위한 기능인데 미래에는 다른 베리어블 타입에도 범위가 확장될 것이다. 스코프 베리어블은 베리어블이 적용될 수 있는 옵션을 제한한다.

 
For example, you can limit a color variable to only stroke fills, so you wouldn’t be able to apply the variable to any other fill properties. This gives you better control over where it can be used and cuts out the guesswork when designing.

예를 들어, 컬러 베어블을 스트로크에만 fill하도록 제한할 수 있고 다른 속성들에 베리어블을 적용할 필요가 없어질 것이다. 이것은 사용될 수 있는 영역을 컨트롤 하기 더 좋은 환경을 줄 것이고, 디자인을 할 때 추측성 일을 하지 않게끔 하는 데 도움을 줄 것이다.

 
Takeaways:

• Since scoping is available to variables but not styles, use variables if you want to take advantage of scoping capabilities
• Scoping is currently available for number variables and will expand to other types in the future

요약
스코핑은 베리어블에 사용 가능하고 스타일에는 사용이 불가능하기 때문에 스코핑 기능의 장점을 얻어가고 싶다면 베리어불을 이용하라.
스코핑은 현재 숫자 베리어블에만 사용 가능하고 앞으로 다른 타입으로까지 범위가 확장될 것이다.

 

Prototype with variables

베리어블로 프로토타입 만들기

In prototyping, variables are used to store object states or properties. Prototype interactions are used to modify variable values, which can change the appearance, content, or visibility of objects in a design—all in a few simple frames.

프로토타입에 있어서, 베리어블은 오브젝트 상태 혹은 속성을 저장하는 데에 사용되었다. 프로토타입 인터랙션은 오브젝트의 외관, 내용, 가시성을 바꿀 수 있는 베리어블 값을 변경하는 데에 사용되었으며 이 속성들은 소수의 단순한 프레임 하나에 들어있다.

 

Code syntax with variables

Code syntax is currently in development and will be available soon.
When you open a variable’s editing modal, you’ll see a section titled Code syntax. Code syntax represents variables in code using valid variable names. This information will appear in Dev Mode and will help designers and developers create a seamless handoff experience.

Code syntax는 현재 개발 중이며 곧 사용 가능할 것이다.
베리어블 에디터 모달을 열면 Code syntax라고 써있는 섹션을 볼 수 있을 것이다. Code syntax는 유효한 이름을 가진 베리어블들을 사용하여 베리어블을 코드로 나타낸다.이 정보는 개발 모드에서 나타날 것이고 디자이너와 개발자가 매끄럽게 작업을 넘기는 경험을 하는 데에 도움을 줄 것이다.
*seamless 매끄러운
*handoff 공을 넘기는 것

 
Takeaway
If you're looking to improve your handoff experience, you can take variables and code syntax into consideration
핸드오프를 개선하기 위한 방법을 찾고 있다면, 베리어블과 code syntax를 고려해볼 수 있겠다.
 

Final thoughts

마치며
 

Whether you choose to use variables or styles depends largely on your goals. You might focus solely on variables to take advantage of design token scalability. Or you might find that sticking to styles is suitable for your projects. Or you might end up using some combination of both!

베리어블이나 스타일 둘 중 하나를 고르는 것은 당신의 목표에 큰 영향을 미칠 것이다. 당신은 디자인 토큰 확장성에 이점을 가져오기 위해 베리어블에만 오롯이 집중할 수도 있다. 혹은 스타일이 프로젝트에 더 적합할 수도 있다. 아니면 결국 이 두 가지를 모두 사용할 수도 있다!
*end up 결국 ~하게 되다

 
Styles will remain ‌a key feature in Figma design. Despite their similarities, variables are not a replacement for styles. Rather, they are additive to Figma’s core feature set.

스타일은 피그마 디자인에 있어서 주요 특징으로 남아있을 것이다. 그들의 유사성에도 불구하고, 베리어블은 스타일의 대체품은 아니다. 그보다는, 피그마의 핵심 특징 세트에 추가되는 것일 것이다.
 

---

 

너무 길었다 글....
일단 처음에는 최대한 이해해보려고 의역을 했는데
가면 갈수록 아예 모르겠어서 점점 직역으로 변화했다(?)
아무래도 베리어블을 기능적으로 좀 써본 후에 영어로 된 글을 읽었으면 이해에 도움이 됐을텐데
전혀 모르는 상태라서 영어부터 읽으니 더 이해가 안가는 것 같다 ㅠㅠ
특히 디자인 용어 (피그마에서만 쓰는 용어) 같은 게 있다보니 더 이해가 안갔다
베리어블을 한 번 써보고 나서 다시 이 글을 꺼내볼 때는 이해가 됐으면 좋겠다...


출처

https://help.figma.com/hc/en-us/articles/15871097384471-The-difference-between-variables-and-styles