프로토타이핑

컴포넌트 프로토타입 아이콘 움직임

피그마 오픈카톡방2026. 3. 7.

질문사항

컴포넌트 버튼에 디폴트와 호버 프로토타입을 적용했을 때, 아이콘이 미세하게 움직이는 현상이 발생합니다. 간격, 텍스트 스타일은 모두 일치하고 색상만 바뀌는데 왜 이런 현상이 발생할까요?

답변

이 현상은 주로 프로토타입 연결 시 레이어 구조나 속성이 미세하게 달라 발생합니다. 특히 Smart Animate를 사용할 때 레이어 이름이나 구조가 일치하지 않으면 Figma가 레이어를 제대로 매칭하지 못해 움직임이 부자연스러워질 수 있습니다.

해결 방법은 다음과 같습니다:

원본 복사 후 수정: 디폴트 상태의 버튼 컴포넌트를 `Alt` (Windows) 또는 `Option` (Mac) 키를 눌러 복사한 후, 복사된 컴포넌트에서 호버 상태에 필요한 변경(예: 색상 변경)만 적용하세요. 이렇게 하면 레이어 구조와 이름이 동일하게 유지되어 Smart Animate가 원활하게 작동합니다.

레이어 이름 일치: 각 상태(Default, Hover)의 컴포넌트 내 모든 레이어 이름이 정확히 일치하는지 확인하세요.

제약 조건(Constraints) 확인: 아이콘이나 텍스트에 적용된 제약 조건이 두 상태에서 동일한지 확인하세요.

Smart Animate 설정: 프로토타입 연결 시 Smart Animate의 이징(Easing) 설정을 `Ease In-Out` 등으로 부드럽게 조절해 보세요.