# 첫 애니메이션
LottieFiles 플러그인으로 Figma 프레임에서 간단한 Lottie 애니메이션을 만듭니다.

가장 빠른 첫 내보내기는 선택한 단일 프레임에 프리셋을 적용하는 방식입니다. 전체 프로토타입이 없어도 selection, preview, 기능 검수, 내보내기를 깔끔하게 한 번 통과해 볼 수 있습니다.

## 시작하기 전에

- 플러그인을 설치하고 엽니다. [설치](installation)를 참고하세요.
- Figma에서 간단한 프레임을 만들거나 선택합니다.
- 장면은 단순하게 유지하세요. 셰이프, text, image fill, basic fill, basic stroke는 layered effect보다 내보내기 쉽습니다.

## 단계

### 1. 프레임 선택

애니메이션으로 만들 프레임을 선택합니다. 첫 시도에서는 프로토타입 플로우 시작점이 아닌 프레임을 고르세요.

### 2. Animate 클릭

LottieFiles 플러그인을 열고 **Animate**를 클릭합니다. 플러그인이 선택한 Figma 장면을 읽고 Figma to Lottie 워크플로를 엽니다.

### 3. 프리셋 선택

사용 가능한 프리셋 목록에서 하나를 고릅니다. 프리셋은 복잡한 전환이 필요 없는 간단한 아이콘, 로고, 마이크로 인터랙션에 좋습니다.

### 4. 애니메이션 미리 보기

플러그인 미리 보기로 모션을 확인합니다. 렌더링 또는 내보내기 중 주황색 경고가 보이면 다시 시도하기 전에 [기능 검수](../06_feature-checking)를 여세요.

### 5. 내보내기

다음 단계에 맞는 출력물을 선택합니다.

- **dotLottie (`.lottie`)** — 더 작은 파일과 상태 머신, 테마, 모션 토큰 같은 고급 기능에 권장됩니다.
- **Lottie JSON** — 레거시 `lottie-web` 스타일 플레이어와의 호환성이 필요할 때 사용합니다.
- **GIF, MP4, WebM, MOV** — 디자인 리뷰, slides, Lottie 재생을 지원하지 않는 도구에 사용합니다.

## 결과 확인

내보낸 뒤 애니메이션을 Lottie preview에서 열거나 Workspace에 저장합니다. 프로덕션 핸드오프라면 개발자가 어떤 런타임을 써야 하는지 알고 있는지 확인하세요. 인터랙티브 상태 머신은 dotLottie와 dotLottie 런타임이 필요합니다.

## 관련 문서

- [프리셋 사용](../04_figma-to-lottie/using-presets)
- [출력 형식 선택](../05_export-and-handoff/choosing-an-output-format)
- [플레이어 컨트롤](../08_runtime-compatibility/player-controls)