질문사항
Figma 컴포넌트에 Hover와 Click 인터랙션을 동시에 적용하려고 할 때 충돌이 발생합니다. Hover: Default > Hover, Click: Default > Active와 같이 설정하고 싶은데, 해결 방법이 있을까요?
답변
Figma에서 하나의 컴포넌트에 `Hover`와 `Click` 트리거를 동시에 직접 적용하는 것은 현재 지원되지 않아 충돌이 발생할 수 있습니다. Figma의 프로토타입 시스템은 일반적으로 하나의 이벤트에 하나의 트리거를 할당하는 방식으로 작동합니다.
이러한 제한을 우회하고 Hover와 Click 인터랙션을 모두 구현하려면 다음과 같은 방법을 고려할 수 있습니다.
인터랙션 분리: `Hover` 상태를 위한 별도의 컴포넌트 변형(Variant)을 만들고, `Click` 상태를 위한 또 다른 변형을 만듭니다. 예를 들어, `Default`, `Hover`, `Active` 세 가지 변형을 만듭니다. `Default`에서 `Hover`로 가는 인터랙션은 `While Hovering` 트리거를 사용합니다. `Hover` 상태에서 `Click`을 처리하려면, `Hover` 변형에 `On Click` 트리거를 추가하여 `Active` 변형으로 전환하도록 설정할 수 있습니다. (이 경우, `Default`에서 `Click`은 직접적으로 `Active`로 가지 못하고 `Hover`를 거쳐야 합니다.)중첩된 컴포넌트 (Nested Components) 활용: 내부 컴포넌트에 `Hover` 인터랙션을 적용하고, 외부 컴포넌트에 `Click` 인터랙션을 적용하는 방식으로 분리할 수 있습니다. 예를 들어, 버튼 텍스트와 배경을 포함하는 내부 컴포넌트에 `Hover` 효과를 주고, 이 내부 컴포넌트를 감싸는 외부 컴포넌트에 `Click` 효과를 주는 방식입니다.Smart Animate와 Delay 활용 (복잡성 증가): 경우에 따라서는 `Smart Animate`와 `Delay`를 조합하여 특정 상태 전환을 시뮬레이션할 수 있지만, 이는 복잡하며 모든 시나리오에 적합하지 않을 수 있습니다.가장 일반적이고 권장되는 방법은 컴포넌트 변형(Variants)을 사용하여 각 상태를 명확히 분리하고, 각 변형에 필요한 인터랙션을 할당하는 것입니다.