프로토타이핑

프로토타입 캐러셀 애니메이션 구현

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

질문사항

피그마 프로토타입으로 5개 배너가 있는 캐러셀을 구현할 수 있을까요? 우측 화살표 클릭 시 좌측 최상단 배너가 중앙으로 오고, 중앙 배너는 우측 최하단으로 이동하는 애니메이션을 만들고 싶습니다. (중앙 배너는 제목+내용, 양옆 4개 배너는 제목만 표시)

네, 피그마의 프로토타입 기능을 활용하여 해당 배너 캐러셀 애니메이션을 구현할 수 있습니다. Smart Animate 기능을 사용하면 각 배너의 위치, 크기, 내용 변화를 부드럽게 전환할 수 있습니다.

구현 방법:

각 배너의 초기 상태(좌측 최상단, 중앙, 우측 최하단 등)를 프레임으로 만듭니다.

우측 화살표 클릭 시 다음 상태로 전환되는 인터랙션을 설정합니다.

'Smart Animate'를 전환 효과로 선택하여 부드러운 움직임을 만듭니다.

중앙 배너의 내용 변화(제목+내용)와 양옆 배너의 내용 변화(제목만)도 각 프레임에서 미리 구성해두면 Smart Animate가 이를 인식하여 전환합니다.

디자인 제안: 참고할 만한 실제 앱이나 웹사이트 예시가 있다면 구현에 더 도움이 될 수 있습니다. 메인 배너를 중앙에 두는 방식 외에, 메인을 한쪽으로 몰고 작은 배너들을 일렬로 나열하는 방식 등 다양한 캐러셀 디자인을 고려해볼 수 있습니다.