질문사항
스크롤에 따라 모양이 변하는 FAB(Floating Action Button)를 피그마에서 구현하는 방법을 찾고 있습니다. 어떤 키워드로 튜토리얼을 검색해야 할까요?
답변
피그마의 기본 프로토타이핑 기능에는 '스크롤 시' 직접적인 트리거가 없습니다. 하지만 '스크롤에 따라 모양이 변하는' 효과를 유사하게 구현할 수 있는 방법은 있습니다.
구현 방법:
인터랙티브 컴포넌트 활용: FAB의 여러 상태(예: 기본 상태, 확장된 상태)를 각각의 베리언트(Variant)로 가진 컴포넌트 세트를 만듭니다.트리거 대체: '스크롤 시'를 직접 사용할 수 없으므로, 다른 트리거를 활용하여 유사한 경험을 제공할 수 있습니다. On Drag: 사용자가 특정 요소를 드래그할 때 FAB의 상태가 변하도록 설정할 수 있습니다. After Delay: 특정 시간 지연 후 FAB의 상태가 변하도록 설정할 수 있습니다. On Click/Tap: 특정 요소를 클릭하거나 탭했을 때 FAB의 상태가 변하도록 설정할 수 있습니다. Mouse Enter/Leave: 마우스 오버/아웃 시 상태가 변하도록 설정할 수 있습니다 (웹 환경에 적합).스마트 애니메이트(Smart Animate): 베리언트 간 전환 시 'Smart Animate'를 사용하여 부드러운 애니메이션 효과를 줄 수 있습니다.튜토리얼 검색 키워드:
"Figma interactive components scroll effect" "Figma FAB animation" "Figma variant change on scroll workaround" "Figma Smart Animate FAB"이러한 키워드로 검색하면 다양한 튜토리얼과 예시를 찾을 수 있을 것입니다.