Note: Figma는 기존 규칙을 사용하여 component set의 기본 variant에 적용한 재정의(overrides)를 유지한다 . 예: 버튼 레이블의 내용 변경 또는 아이콘 교체.
component set의 인스턴스를 캔버스에 추가하면 해당 component set의 다른 variant도 함께 가져온다. 기술적으로 여전히 다른 variant에 재정의(overrides)를 적용할 수 있지만 Figma는 프레젠테이션 보기에서 이러한 재정의를 반영하지 않는다.
더 많은 상호 작용(interactions) 추가
대화형 구성 요소(interactive components)로 프로토타입을 구축할 때 variant interactions 위에 일반 상호 작용을 추가할 수 있다.
아래 예에서는 지연이 있는 variant interactions 위에 클릭 trigger가 있는 상호작용을 추가했다.
상호 작용 순서는 사용하는 트리거가 variant interactions과 동일한 트리거인지 여부에 따라 달라진다. Prototype triggers에 대해 자세히 알아보기 →
동일한 트리거(triggers)
두 상호 작용이 동일한 트리거를 사용하는 경우 Figma는 프로토타입 상호 작용을 사용하고 변형 상호 작용을 무시 한다.
예를 들어:
토글 스위치에는 구성 요소 세트 의 On 및 Off 변형(variants) 간에 On click → Change to 변형 상호 작용이 있다.
토글 스위치에서 다른 프레임으로 On click → Navigate to 상호 작용을 추가한다 .
사용자가 토글 스위치를 클릭하면 Figma가 다음 프레임으로 이동한다.
다른 트리거(triggers)
다른 트리거와의 상호 작용을 추가하면 Figma는 상호 작용과 변형 상호 작용을 모두 재생한다.
예를 들어:
버튼에는 default 변형 과 hover 변형 간에 On hover → Change to 변형 상호 작용이 있다.
프로토타입을 만들 때 On click → Navigate to 상호작용을 추가한다.
Figma는 hover시 Change to호버 변형 후 다음 프레임 On click 에서 Navigate to 한다.
상호작용 보기
대화형 구성 요소를 사용할 때 오른쪽 사이드바의 Prototype 탭에서 Interactions 및 Variant interactions 에 대한 별도의 섹션을 볼 수 있다.
기본 component에서 variant interaction을 추가하고 편집한다. 인스턴스에서는 variant interaction을 편집할 수 없다.
인스턴스에서 component set에 액세스하고 편집하려면:
인스턴스를 선택한다.
오른쪽 사이드바의 Instance 섹션에서 ‘?’ 아이콘을 클릭한다.
메인 component로 이동을 선택 한다.
오른쪽 사이드바의 Prototype 탭으로 이동 한다.
Variant interactions을 수정한다.
사용자 정의 글꼴이 있는 대화형 구성 요소
대화형 구성 요소 내부의 텍스트에 사용자 정의 글꼴을 사용할 때 프로토타입 뷰어의 장치에 해당 사용자 정의 글꼴이 설치되어 있지 않을 수 있다는 점에 유의하자. 이러한 경우 Figma는 프로토타입을 제시할 때 사용자 정의 글꼴을 올바르게 표시하기 위해 대화형 구성 요소의 변형에 대한 캐시된 정보를 사용하지만 텍스트 재정의를 유지하고 상호 작용에 대한 글꼴 설정을 변경할 수 없는 경우 글꼴을 Inter로 대체할 수 있다.
예를 들어 프로토타입을 보고 있는 사람이 자신의 장치에 사용 중인 사용자 정의 글꼴이 설치되어 있지 않다고 가정해 보겠다. 대화형 구성 요소의 인스턴스에 텍스트 재정의가 있는 경우:
변형 변경에 가중치 또는 밑줄과 같은 글꼴 설정 변경이 포함되는 경우 Figma는 사용자 정의 글꼴을 Inter로 대체할 수 있다.
변형의 변경이 버튼의 배경색과 같은 글꼴 설정과 관련이 없는 경우 Figma는 올바른 글꼴을 표시한다.
변환 프로세스의 일부로 Figma는 일반 속성을 만들고 component 이름에 값으로 추가한 속성을 추가한다.
Figma는 속성의 이름을 모르기 때문에 첫 번째 속성의 이름을 지정한 다음 , , 등 Variant으로 순차적으로 번호를 지정한다 . Property 2Property 3
이러한 속성의 이름을 더 설명적인 것으로 변경해야 한다.
component sets을 선택한다.
오른쪽 사이드바의 Variants 섹션에서 현재 속성을 본다.
속성 위로 마우스를 가져가면 주변에 회색 상자가 나타난다.
속성을 편집하고 더 설명적인 이름을 지정하려면 클릭한다.
적용하려면 속성 외부를 클릭하라.
나머지 속성에 대해 반복한다.
Note:Figma는 일반 component와 동일한 방식으로 component sets을 처리한다. 설명과 문서 링크를 추가할 수 있다. Assets 패널에서 캔버스로 드래그하고 인스턴스 간에 교체할 수도 있다.
새 변형(variants) 만들기
Note:Figma는 component sets라는 단일 컨테이너에 변형을 배치한다. component sets에는 component만 포함될 수 있다. 도구 모음에서 component 만들기를 클릭 하거나 키보드 단축키를 사용하여 선택 항목을 component로 바꾼다.
이러한 구성 요소에는 버튼 레이블과 같이 변경해야 하는 일반 정보가 포함되어 있는 경우가 많다. 일부 상황에서는 해당 특정 인스턴스의 다른 측면을 변경해야 할 수도 있다.
재정의(Overrides)를 사용하면 인스턴스를 표면적으로 변경할 수 있다. Figma는 텍스트, 채우기, 획 및 효과 속성에 대한 재정의를 지원한다. 지원되는 재정의에 대해 자세히 알아보기 →
보존 재정의(override)
Figma는 다른 변형을 선택하거나 인스턴스 메뉴에서 인스턴스 간에 교체할 때 재정의를 유지하려고 시도한다.
Figma는 다음 기준을 사용하여 재정의를 유지할지 여부를 결정한다.
레이어 이름은 현재 인스턴스와 선택하는 변형 또는 인스턴스 간에 일치해야 한다. 이는 인스턴스를 교체하고 변형을 선택할 때 모두 적용된다.
변형을 선택할 때 Figma는 재정의한 레이어 속성이 원래 변형 간에 일치하는지 확인한다. 그렇다면 Figma는 재정의를 유지한다.
아래 예제에서 Figma는 3단계에서 채우기 재정의를 유지하지만 4단계에서는 유지하지 않는다. 이는 default primary 버튼과 hover primary 버튼이 모두 의 동일한 채우기로 시작했기 때문이다 #1BC47D. 우리의 재정의는 16진수 코드에서 #1BC47D로 변경하는 것이었다 #F531B3.
hover secondary 변형의 채우기가 있으므로 Figma는 4단계에서 재정의를 유지하지 않는다 #ffffff. 이는 원래 재정의를 적용한 채우기와 다르다( #1BC47D).
Tip!팁! Component set에서 사용할 수 있는 변형이나 원래 스타일이 확실하지 않은 경우 원본 파일에서 component set을 볼 수 있다. 인스턴스를 선택한 상태에서 ‘❖’은 오른쪽 사이드바의 구성요소 이름 옆에 있다.
