# 모션 토큰
Figma 플러그인에서 런타임에 제어할 수 있는 모션 토큰을 만들고 재사용한 뒤 dotLottie로 내보냅니다.

모션 토큰을 사용하면 런타임에서 텍스트, 색상, 트랜스폼, 그레이디언트 같은 애니메이션 속성을 코드로 제어할 수 있습니다. 모션 토큰은 dotLottie 기능이므로 Figma 작업물을 `.lottie`로 내보낼 때만 유지됩니다.

모션 토큰은 LottieFiles 플러그인 안에서 바로 만들 수 있습니다. 내보내기 전에 **Motion Tokens** 패널을 열어 레이어 속성을 토큰으로 만들면, 최종 제품에서 해당 값을 런타임에 바꿀 수 있습니다.

## Figma 내보내기에서 중요한 이유

- 모션 토큰은 dotLottie 전용입니다. Lottie JSON으로 내보내면 상태 머신과 테마처럼 모션 토큰도 제거됩니다.
- Figma에서 다시 내보내지 않아도 하나의 파일로 라이트/다크 테마, 브랜드 팔레트, 데이터 기반 값 같은 여러 변형을 만들 수 있습니다.
- 개발자는 dotLottie Slots API를 통해 토큰이 적용된 속성을 실시간 데이터와 연결할 수 있습니다.

## Motion Tokens 패널

플러그인에서 **Motion Tokens** 패널을 열면 애니메이션의 모든 레이어와 각 레이어의 속성 목록을 볼 수 있습니다.

<Image src="https://assets.docs.lottiefiles.com/static/d9a3e1681b-640.webp" alt="애니메이션 미리 보기 아래 Motion Tokens 패널이 강조된 LottieFiles Figma 플러그인" caption="Figma to Lottie 미리 보기에서 Motion Tokens 패널을 엽니다" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/d9a3e1681b-640.webp 640w, https://assets.docs.lottiefiles.com/static/d9a3e1681b-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/d9a3e1681b-1920.webp 1920w" width="1920" height="1251" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAAlUlEQVR4nE2NMQsBYQBAvx9HHfkDMrjLgsHxGwiDjCaUAYVMJhnuugxKEtkNVr6Ouu980VOkbnjb6z1hpHP8Wawclq7HYDLn6t9pdMeIhGkTzxQxzApSSpzDmfVmSxAE9EczRMoqEcvaJK0yl4dC6jfu7kgYhvSGU0R0cXu+8F/g7U8opX6FqFBrdyjUW+SrTbTWX+EDYZVyV7yX2R4AAAAASUVORK5CYII=" />

여기에서 다음 작업을 할 수 있습니다.

- 속성 옆 체크박스를 선택해 **토큰을 만듭니다**.
- 나중에 어떤 값을 제어하는지 알아보기 쉽도록 **토큰 이름을 바꿉니다**.
- 다른 레이어에 **기존 토큰을 재사용합니다**. 단, 해당 레이어의 속성 값이 토큰 값과 정확히 같을 때만 가능합니다.

값이 정확히 일치해야 토큰 연결을 예측 가능하게 유지할 수 있습니다. 하나의 토큰은 하나의 값을 나타내므로, 여러 레이어에 같은 토큰을 재사용하면 런타임에서 함께 업데이트됩니다.

## 워크플로

1. LottieFiles 플러그인으로 Figma 장면을 모션 출력물로 변환합니다.
2. **Motion Tokens** 패널을 열고 제어하려는 레이어를 찾습니다.
3. 텍스트, 색상, 위치, 크기, 회전, 불투명도 같은 속성 옆 체크박스를 선택해 토큰을 만들고 이름을 바꿉니다.
4. 값이 정확히 같은 다른 레이어에 이미 연결한 토큰을 재사용합니다.
5. 토큰을 유지하려면 dotLottie(`.lottie`)로 내보냅니다.

<Image src="https://assets.docs.lottiefiles.com/static/f3963ad822-640.webp" alt="선택한 벡터 레이어에서 토큰으로 만들 수 있는 값을 보여주는 Motion Tokens 패널" caption="지원되는 레이어 속성을 선택해 모션 토큰을 만듭니다" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/f3963ad822-640.webp 640w, https://assets.docs.lottiefiles.com/static/f3963ad822-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/f3963ad822-1920.webp 1920w" width="1920" height="1251" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAAhUlEQVR4nGPwiEz+H5tX9n/n/kP/dx08/H/F5m3/X3/68j+rpuM/SI4BRORUNP1/+/7j/5fvvv0/durs/58/f/4vbepEUlDV/P/95x//v/349f/46fP/f/36hUXBl9//P/34+//YmYv///z+g6ogNCX/f2v/9P8Jze3/O+Ys+P/371+4AgAKrXJImdP8fwAAAABJRU5ErkJggg==" />

## 삽입할 때 토큰 편집

모션 토큰이 포함된 애니메이션을 **Explore** 또는 **Workspace**에서 미리 볼 때도 같은 토큰 컨트롤이 표시됩니다.

1. Explore 또는 Workspace에서 애니메이션 미리 보기를 엽니다.
2. 애니메이션에 모션 토큰이 있으면 미리 보기에서 Motion Tokens 패널을 사용할 수 있습니다.
3. 토큰 목록을 확인하고 브랜드 색상이나 라벨 텍스트처럼 Figma 장면에 맞는 값으로 수정합니다.
4. 현재 값을 프리셋 변형으로 보관하려면 새 사용자 지정 테마로 저장합니다.
5. 애니메이션을 캔버스에 삽입합니다. 플러그인은 수정한 토큰 값이 적용된 상태로 애니메이션을 배치합니다.

삽입하기 전에 특정 테마나 직접 수정한 토큰 값을 적용하고 싶을 때 이 흐름을 사용하세요.

<Image src="https://assets.docs.lottiefiles.com/static/e578a9cb64-640.webp" alt="토큰 값을 편집한 뒤 사용자 지정 테마가 선택된 Motion Tokens 패널" caption="삽입하거나 다운로드하기 전에 수정한 토큰 값을 사용자 지정 테마로 저장합니다" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/e578a9cb64-640.webp 640w, https://assets.docs.lottiefiles.com/static/e578a9cb64-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/e578a9cb64-1920.webp 1920w" width="1920" height="1251" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAAh0lEQVR4nGPwiEz+H5tX9n/rvkP/dx08/H/x5q3/X3/68j+rpuM/SI4BRORUNP1/+fbT/9sPXv0/evLM/58/f/4vbepEKEiuav3/8st3MN5/7ur/X79+oSpIrG7///7X3/+vv/38f/Dyjf9/fv9BVRCakv+/pW/a/7imtv8dcxb8//v3L1wBAOGEceQ+O2VCAAAAAElFTkSuQmCC" />

## 중요한 형식 규칙

모션 토큰은 dotLottie에 저장됩니다. 같은 작업을 Lottie JSON으로 내보내면 토큰이 상태 머신, 테마와 함께 제거됩니다. 모션 토큰이 필요할 때는 항상 \*\*dotLottie(`.lottie`)\*\*로 내보내세요.

## 핸드오프 참고

개발자에게 모션 토큰은 dotLottie 런타임이 필요하며 Slots API를 통해 실시간 데이터와 연결된다고 알려 주세요. 일반 Lottie 런타임은 토큰을 읽을 수 없습니다.

## 관련 문서

- [Creator의 Motion Tokens](/en/creator/12_motion-tokens)
- [애니메이션 삽입](../02_explore/inserting-animations)
- [Workspace 애니메이션 삽입](../03_workspace/inserting-workspace-animations)
- [출력 형식 선택](../05_export-and-handoff/choosing-an-output-format)
- [인터랙티브 상태 머신 내보내기](exporting-interactive-state-machines)
- [개발자 핸드오프](../05_export-and-handoff/developer-handoff)