Category: GUI Design

구성 요소(Component)를 만들고 설계 시스템을 구축할 때 약간의 차이점만 제외하고 서로 유사한 구성 요소가 필요하다는 것을 알게 될 것이다.

예를 들어 버튼에 대해 여러 구성 요소가 있을 수 있으며 다양한 상태 및 크기와 밝은 모드 및 어두운 모드에 대한 별도의 구성 요소가 있을 수 있다.

변형(Variants)을 사용하면 유사한 구성 요소를 단일 컨테이너로 그룹화하고 구성할 수 있다. 이렇게 하면 구성 요소 라이브러리가 단순화되고 모든 사람이 필요한 것을 더 쉽게 찾을 수 있다.

변형의 속성과 값을 사용자 지정하여 디자인 시스템에서 추측을 없애고 구성 요소를 프런트 엔드 코드(front-end code)에 더 가깝게 만든다.

속성(properties) 및 값(values)

속성 및 해당 값을 사용하여 변형의 속성을 정의할 수 있다. 

속성과 값을 필요한 만큼 추가하고 디자인 시스템에 맞게 사용자 지정할 수 있다. 속성과 값을 디자인 시스템의 코드 구성 요소에 매핑할 수도 있다.

• 속성(Properties)은 구성 요소의 가변적인 측면이다. 예를 들어 버튼 구성 요소의 속성은 type, size, state, 또는 icon.
• 값(Values)은 각 속성에 사용할 수 있는 다양한 옵션이다. 예를 들어 state 속성은 default, hover, pressed 및 disabled 값을 가질 수 있다.

구성 요소 세트 내의 모든 변형은 동일한 속성과 값을 사용하지만 각 변형은 고유한 조합이어야 한다. 속성과 값의 가능한 모든 조합에 대해 구성 요소가 필요하지 않다.

액션(action)에서 속성과 값

예제를 살펴보자! 24개의 고유한 변형(Variants)이 있는 버튼 구성 요소가 있다. 아래 이미지는 단일 구성 요소 세트 내의 이 구성 요소에 대한 모든 변형을 보여준다.

버튼 구성 요소 집합에는 각각 고유한 값 집합이 있는 네 가지 속성이 있다.

• 기본(Primary) 및 보조(Secondary) 값이 있는 유형(Type) 속성이다 .
• Large 및 Small 값 이 있는 Size 속성이다.
• Default , Pressed 및 Inactive 값이 있는 상태(State) 속성이다.
• 아이콘(Icon) 속성에는 True 및 False 값이 있다.

Figma는 이러한 속성과 값을 사용하여 구성 요소 집합에서 필요한 변형을 결정한다. 아래 이미지에서 구성 요소 집합의 인스턴스를 만들고 다음 값을 구성했다.

• Type: Primary(기본)
• Size: Large
• State: Default(기본값)
• Icon: False (or off)

레이어 이름(Layer names) 및 구문(syntax)

레이어 이름 지정은 변형(variants) 생성 및 관리의 중요한 측면이다. 대부분 임의적일 수 있는 Figma의 다른 레이어 이름과 달리 구성 요소 집합의 변형(variants) 이름에는 매우 구체적인 구문이 있다.

여기에는 해당 변형(variants)의 속성 및 값에 대한 정보가 포함된다. 레이어 패널에서 변형의 이름을 바꾸려고 할 때만 이 구문을 볼 수 있다.

변형(variants) 이름은 다음 구조를 따른다. Property1=value, Property2=value, Property3=value

구성 요소(components)를 변형(variants)으로 결합

Figma에 이미 구성 요소 라이브러리가 있는 경우 구성 요소를 변형으로 결합할 수 있다. 일반적인 프로세스는 다음과 같다.

• 슬래시(/) 명명 규칙을 사용하도록 구성 요소의 이름을 바꾼다.
• 캔버스에서 component 구성
• component를 variants으로 결합
• 속성에 설명적인 이름을 지정한다.

Components 이름 바꾸기

Figma는 슬래시 명명 시스템을 사용하여 자산(Asset) 패널 및 인스턴스 메뉴에서 component를 구성한다. component 이름의 각각 /은 또 다른 수준의 계층 구조를 만든다.

이렇게 하면 라이브러리를 더 쉽게 탐색하거나 관련 component를 찾고 교체할 수 있다. Component의 이름 지정 및 구성 방법 알아보기 →

이 이름 지정 시스템을 사용하여 기존 component를 variants으로 변환할 수도 있다. 정확하게 변환하려면 component 이름이 다음 구조를 따라야 한다.

componentName/property1value/property2value/property3value

• 첫 번째 앞의 텍스트 /는 component 집합의 이름이 된다.
• Figma는 / component 이름에서 다른 모든 속성에 대해 새 속성을 생성한 다음 속성을 값으로 추가한다.
• 네이밍 시스템에서 접미사를 사용한 경우 구성 요소의 이름에 접미사를 추가하고 /로 구분해야 한다.

이름이 있는 버튼 구성 요소 Button/Primary/Large/Default/False에는 다음과 같은 속성과 값이 있다.

Component set name: Button
Variant: Primary
Property 2: Large
Property 3: Default
Property 4: False

아래 이미지에서 나머지 component 이름(왼쪽)이 어떻게 variants 값(오른쪽)으로 변환되는지 확인할 수 있다.

특정 components에 대한 variants가 많은 경우 components를 행, 열 또는 그리드로 구성할 수 있다.

이렇게 하면 디자인 시스템을 사용하는 모든 사람에게 다차원적 특성을 전달하는 데 도움이 된다. Component sets 옆에 텍스트 레이어를 추가하여 관련 속성 및 값에 주석을 추가할 수도 있다.

아래 예에서는 버튼 variants을 그리드에 정렬했다. 또한 속성 값에 해당하는 텍스트 레이어를 캔버스에 추가했다.

변형(variants)으로 결합

1. 결합할 component를 선택한다. 레이어 및 개체 선택 방법 알아보기 →
2. 오른쪽 사이드바에서 Combine as Variants 버튼을 클릭한다.
3. Figma는 모든 component를 단일 component sets에 추가한다.

속성을 설명하는 이름 지정

변환 프로세스의 일부로 Figma는 일반 속성을 만들고 component 이름에 값으로 추가한 속성을 추가한다.

Figma는 속성의 이름을 모르기 때문에 첫 번째 속성의 이름을 지정한 다음 , , 등 Variant으로 순차적으로 번호를 지정한다 . Property 2 Property 3

이러한 속성의 이름을 더 설명적인 것으로 변경해야 한다.

1. component sets을 선택한다.
2. 오른쪽 사이드바의 Variants 섹션에서 현재 속성을 본다.
3. 속성 위로 마우스를 가져가면 주변에 회색 상자가 나타난다.
4. 속성을 편집하고 더 설명적인 이름을 지정하려면 클릭한다.
5. 적용하려면 속성 외부를 클릭하라.
6. 나머지 속성에 대해 반복한다.

새 변형(variants) 만들기

• 맥: ⌥ Option + ⌘ Command + K
• 윈도우: Ctrl + Alt + K

Components 생성 방법 알아보기 →

1. component 선택
2. 슬래시 네이밍 규칙을 사용하도록 component의 이름을 바꾼다(권장).
3. 오른쪽 사이드바에서 Variants 섹션에서 ‘+’ 클릭하여 첫 번째 변형을 추가한다.
4. Figma는 다음과 같은 몇 가지 작업을 수행한다.
   • 동일한 속성을 가진 동일한 component 만들기
   • 두 component를 component sets에 variants으로 추가
   • 슬래시 네이밍 규칙을 사용한 경우 / 앞의 텍스트는 component sets의 이름이 되고 뒤의 속성은 값으로 사용된다.
5. 필요에 따라 variants을 시각적으로 변경한다.

속성 및 값 추가

변형(variants)을 처음 생성할 때 또는 디자인 시스템이 발전함에 따라 속성과 값을 variants에 추가한다.

component set에 속성을 추가한다.

1. component set을 선택한다.
2. 오른쪽 사이드바 변형 섹션에서 ‘⋯’ 클릭
3. 새 속성 추가를 선택 한다.

변형을 선택한 경우에만 값을 추가할 수 있다. 이를 수행하는 몇 가지 방법이 있다.

• 현재 값 옆에 있는 ‘˅’ 클릭하여 옵션에서 새로 추가를 선택한다.
• 값 필드를 클릭하고 새 값을 입력한다.
• 레이어 패널에서 변형을 두 번 클릭하고 원하는 속성 값을 업데이트한다.

Component set에 더 많은 variants 추가

다음 방법 중 하나를 사용하여 component set에 변형을 계속 추가한다.

• component set 내부의 캔버스를 클릭한다. 두 개 이상의 변형이 있는 경우에만 이 옵션이 표시된다.
• 오른쪽 사이드바의 variants 섹션을 클릭하고 새 변형 추가를 선택한다.
• 키보드 단축키를 사용하여 기존 변형 복제:
  • 맥 : [keybt]⌘ Command[/keybt] + [keybt]D[/keybt]
  • 윈도우 : [keybt]Ctrl[/keybt] + [keybt]D[/keybt]
• 다른 component를 component set로 끌어서 변형으로 추가한다.

Variants 관리

Variants 구성

Component에 새 변형을 추가할 때 Figma의 기본 동작은 동일한 간격으로 단일 열에 변형을 추가하는 것이다.

Component를 변환하기 전에 다른 레이아웃에 있는 경우 Figma는 component set에 대해 동일한 레이아웃을 유지한다.

Figma의 기본 동작을 무시하고 원하는 방식으로 변형을 정렬할 수 있다.

• 변형을 선택하고 component set 내의 새 좌표로 이동한다. Figma를 사용하면 다른 변형의 상단을 포함하여 component set 내의 아무 곳에나 변형을 배치할 수 있다.
• 오른쪽 사이드바에서 component set의 크기를 조정하거나 일반 프레임처럼 캔버스에서 크기를 조정한다.
• 모든 변형을 선택한 경우: 오른쪽 사이드바의 필드를 사용하여 변형 사이의 수평 및 수직의 공간을 조정한다.

속성 및 값 이름 바꾸기

속성 또는 값의 이름을 바꾸려면 component set을 선택하고 오른쪽 사이드바의 Variant 섹션에서 속성 또는 값을 업데이트해야 한다.

속성 이름을 바꾸려면 다음을 수행한다.

1. 속성을 클릭하고 더 설명적인 이름을 입력한다.
2. Enter / Return 키를 눌러 적용하거나 속성 외부를 클릭하여 적용한다.
3. 나머지 속성에 대해 반복한다.

값의 이름을 바꾸려면 다음을 수행한다.

1. 값을 두 번 클릭하고 새 이름을 입력한다.
2. Enter/ Return 키를 눌러 적용한다.

속성 및 값 재정렬

속성과 값이 오른쪽 사이드바에 나타나는 순서를 변경할 수 있다. 속성을 재정렬하면 Figma는 일치하도록 변형의 이름과 구문을 조정한다.

속성을 재정렬하려면 다음을 수행한다.

1. 구성 요소 집합을 선택한다.
2. 변형 섹션 에서 속성 필드의 왼쪽 가장자리 위로 마우스를 가져갈 때까지 ‘=’ 나타난다.
3. 속성을 클릭하고 위나 아래로 끌어 순서를 변경한다.

값을 재정렬하려면 다음을 수행한다.

1. 값을 길게 클릭한다.
2. 값으로 끌어서 새 순서로 만든다.
3. 적용하려면 릴리스 한다.

속성 제거

속성을 제거하려면:

1. 구성 요소 집합을 선택한다.
2. 사이드바 의 변형 섹션 에서 속성 위로 마우스를 가져간다 .
3. ‘-‘를 클릭하여 제거한다.

라이브러리에 Component sets 게시

전문 또는 교육 팀 또는 Figma 조직의 구성원인 경우 변형을 공동 작업자와 공유할 수 있다.

팀이나 조직의 구성원이 사용할 수 있도록 스타일 및 일반 구성 요소와 함께 구성 요소 집합을 게시한다.

구성 요소 세트는 다른 구성 요소와 함께 자산 패널에 나타난다. Figma는 구성 요소 세트의 왼쪽 상단 모서리에 있는 변형을 기본 변형으로 사용한다.

그런 다음 공동 작업자는 구성 요소 세트를 파일로 끌어서 인스턴스를 생성할 수 있다. 그런 다음 오른쪽 사이드바에서 속성 값을 구성하여 구성 요소 집합의 다른 모든 변형에 액세스할 수 있다.

라이브러리 게시 방법 알아보기 →

변형(variants) 사용

Component sets는 일반 구성 요소와 함께 자산 패널에 나타난다. 따라서 자산 패널에서 특정 변형을 찾는 대신 구성 요소 집합만 선택하면 된다.

캔버스에 해당 구성 요소의 인스턴스가 설정되면 인스턴스의 속성 값을 구성하여 변형(variant)을 선택할 수 있다.

구성 요소 세트(component sets) 선택

1. 왼쪽 사이드바에서 자산 탭을 클릭 하거나 키보드 단축키를 사용한다.
   • 맥 :

오른쪽 사이드바에서 속성과 값을 구성하여 구성 요소 집합에서 다른 변형을 선택합니다.

1. 인스턴스를 선택합니다.
2. 오른쪽 사이드바에서 구성 요소의 이름을 봅니다. 구성 요소에 변형이 있는 경우 구성 요소 이름 아래에 해당 구성 요소 집합의 속성과 값을 구성하는 필드가 표시됩니다.
   • 사용 ‘⌄’ 속성 옆에 있는 원하는 값 조합을 선택합니다.
   • 다음을 사용하여 특정 속성을 껐다가 켭니다. On 그리고 Off 토글 스위치

인스턴스(instances) 간 스왑(swap)

일반 구성 요소와 마찬가지로 변형을 사용할 때 인스턴스 간에 교체할 ​​수 있다.

가장 효율적인 방법은 인스턴스 메뉴 를 사용하는 것이다. 인스턴스 메뉴를 사용하면 현재 파일 또는 활성화된 팀 라이브러리에서 구성 요소 교체를 찾을 수 있다.

구성 요소를 선택한 경우 오른쪽 사이드바의 속성 패널에서 인스턴스 메뉴에 액세스한다.

1. 변경할 인스턴스를 선택한다.
2. 오른쪽 사이드바에서 구성 요소 이름을 클릭한다.
3. 인스턴스 메뉴를 사용하여 다른 구성 요소를 검색하고 선택한다.

인스턴스 메뉴를 사용하여 교체하는 방법 알아보기 →

속성 재정의(override)

구성 요소 라이브러리는 설계 시스템의 이상적인 구현을 정의하고 개략적으로 설명한다.

이러한 구성 요소에는 버튼 레이블과 같이 변경해야 하는 일반 정보가 포함되어 있는 경우가 많다. 일부 상황에서는 해당 특정 인스턴스의 다른 측면을 변경해야 할 수도 있다.

재정의(Overrides)를 사용하면 인스턴스를 표면적으로 변경할 수 있다. Figma는 텍스트, 채우기, 획 및 효과 속성에 대한 재정의를 지원한다. 지원되는 재정의에 대해 자세히 알아보기 →

보존 재정의(override)

Figma는 다른 변형을 선택하거나 인스턴스 메뉴에서 인스턴스 간에 교체할 ​​때 재정의를 유지하려고 시도한다.

Figma는 다음 기준을 사용하여 재정의를 유지할지 여부를 결정한다.

• 레이어 이름은 현재 인스턴스와 선택하는 변형 또는 인스턴스 간에 일치해야 한다. 이는 인스턴스를 교체하고 변형을 선택할 때 모두 적용된다.
• 변형을 선택할 때 Figma는 재정의한 레이어 속성이 원래 변형 간에 일치하는지 확인한다. 그렇다면 Figma는 재정의를 유지한다.

아래 예제에서 Figma는 3단계에서 채우기 재정의를 유지하지만 4단계에서는 유지하지 않는다. 이는 default primary 버튼과 hover primary 버튼이 모두 의 동일한 채우기로 시작했기 때문이다 #1BC47D. 우리의 재정의는 16진수 코드에서  #1BC47D로 변경하는 것이었다 #F531B3.

hover secondary 변형의 채우기가 있으므로 Figma는 4단계에서 재정의를 유지하지 않는다 #ffffff. 이는 원래 재정의를 적용한 채우기와 다르다( #1BC47D).

출처: Variants in Figma