Figma 캐러셀 애니메이션 제작 단계
1. 카드 컴포넌트 생성 및 초기 설정
-
카드 생성: 의료 기록과 같은 내용으로 카드를 만듭니다. Figma AI의 ‘Replace Content’ 기능을 활용하여 실제와 같은 데이터를 빠르게 채울 수 있습니다.
-
이름 지정: Figma가 애니메이션 대상을 인식할 수 있도록 각 프레임 또는 컴포넌트의 이름을 다르게 지정하는 것이 중요합니다.
2. 첫 번째 프레임 구성
-
요소 배치: 화면의 다른 요소들을 배치한 후, 모든 카드를 하나의 컨테이너 프레임 안에 넣습니다.
-
카드 정렬 및 크기 조정:
- 두 번째 카드를 오른쪽으로 이동시키고, 다른 카드들은 더 멀리 이동시킵니다.
- ‘K’ 키를 눌러 스케일링 옵션을 활성화한 후, 두 번째 카드는 0.9배, 나머지 카드들은 0.75배로 크기를 줄입니다.
3. 두 번째 프레임 생성 및 전환 상태 정의
-
프레임 복제: 첫 번째 프레임 전체를 복제합니다. 이때, 오른쪽 패널에서 ‘Clip Content’가 체크되어 있는지 확인합니다.
-
카드 위치 및 크기 조정: 복제된 프레임에서 다음 애니메이션 상태를 정의합니다.
- 세 번째 카드를 확대하여 두 번째 카드의 위치로 이동시킵니다.
- 두 번째 카드를 확대하여 첫 번째 카드의 위치로 이동시킵니다.
- 첫 번째 카드를 왼쪽 화면 밖으로 완전히 이동시킵니다.
4. 프로토타입 연결 설정
-
프레임 연결: 프로토타입 모드에서 버튼을 드래그하여 프레임들을 서로 연결합니다.
- 애니메이션 설정:
- 트리거는 ‘On Click’으로 설정합니다.
- 애니메이션은 ‘Instant’ 대신 ‘Smart Animate’로 변경합니다.
- 기본 설정으로도 충분하지만, 필요에 따라 애니메이션 설정을 미세 조정할 수 있습니다.
- 이전 버튼 연결: 이전 프레임으로 돌아가는 버튼도 동일한 방식으로 연결합니다.
5. 전체 캐러셀 완성
-
반복 작업: 두 번째 프레임을 복제하고, 이전과 동일하게 카드들의 크기를 조정하고 위치를 이동시키는 과정을 반복합니다 (예: 네 번째, 세 번째, 두 번째 카드 순서).
-
버튼 연결: 이 새로운 프레임도 버튼과 연결합니다.
-
전체 프로토타입: 이 과정을 여러 번 반복하면 완전한 캐러셀 프로토타입이 완성됩니다.