Framer

Framer용 LottieFiles 플러그인은 공개 애니메이션과 팀의 비공개 LottieFiles Workspace를 Framer 캔버스 안으로 가져옵니다. 애니메이션을 찾아 확인하고, 게시할 수 있는 플레이어 컴포넌트로 삽입한 뒤 실제 사이트에서 결과를 검증하세요.

핵심 워크플로

1. 찾기 - Explore에서 애니메이션을 찾거나 Workspace에서 승인된 버전을 선택합니다.

2. 준비하기 - 필요에 따라 배경, 팔레트, 렌더러, 테마, 하위 애니메이션 또는 상태 머신을 설정합니다.

3. 삽입하기 - 애니메이션을 Framer 코드 컴포넌트로 캔버스에 추가합니다.

4. 미리 보기 - Framer에서 반응형 동작과 인터랙션을 확인합니다.

5. 게시하기 - 사이트를 게시하고 공개 URL에서 애니메이션을 검증합니다.

애니메이션 원본 선택

• Explore는 공개 LottieFiles 라이브러리입니다. 새로운 모션이 필요할 때 무료 또는 Premium 애니메이션을 찾아보세요.

• Workspace에는 워크스페이스, 프로젝트, 폴더로 정리된 비공개 및 팀 에셋이 있습니다. 프로덕션에는 승인된 에셋을 사용하세요.

• 로컬 파일은 먼저 Workspace에 업로드합니다. Framer에 넣기 전에 팀이 검토할 수 있는 원본을 하나로 유지할 수 있습니다.

플러그인이 추가하는 요소

애니메이션을 삽입하면 플러그인이 LottieFiles 플레이어 코드 컴포넌트를 Framer 캔버스에 추가합니다. 애니메이션 원본과 지원되는 재생, 테마, 상태 머신 설정은 이 컴포넌트를 통해 Framer 미리 보기와 게시된 사이트에 전달됩니다.

삽입한 컴포넌트는 Workspace 파일과 실시간으로 동기화되지 않습니다. 원본이 바뀌면 새 버전을 검토하고 컴포넌트를 교체하거나 다시 삽입한 뒤 사이트를 다시 게시하세요.

시작하기

1. 빠른 시작 - 플러그인을 열고 무료 애니메이션을 Framer 사이트에 게시합니다.

2. Workspace - 비공개 또는 팀에서 승인한 애니메이션 에셋을 사용합니다.

3. 삽입 및 게시 - 컴포넌트의 동작을 이해하고 미리 본 뒤 실제 결과를 검증합니다.

관련 문서

• 애니메이션 준비

• 호환성 및 제한

• 문제 해결