모션 토큰
Figma 플러그인에서 런타임에 제어할 수 있는 모션 토큰을 만들고 재사용한 뒤 dotLottie로 내보냅니다.
모션 토큰을 사용하면 런타임에서 텍스트, 색상, 트랜스폼, 그레이디언트 같은 애니메이션 속성을 코드로 제어할 수 있습니다. 모션 토큰은 dotLottie 기능이므로 Figma 작업물을 .lottie로 내보낼 때만 유지됩니다.
모션 토큰은 LottieFiles 플러그인 안에서 바로 만들 수 있습니다. 내보내기 전에 Motion Tokens 패널을 열어 레이어 속성을 토큰으로 만들면, 최종 제품에서 해당 값을 런타임에 바꿀 수 있습니다.
Figma 내보내기에서 중요한 이유
모션 토큰은 dotLottie 전용입니다. Lottie JSON으로 내보내면 상태 머신과 테마처럼 모션 토큰도 제거됩니다.
Figma에서 다시 내보내지 않아도 하나의 파일로 라이트/다크 테마, 브랜드 팔레트, 데이터 기반 값 같은 여러 변형을 만들 수 있습니다.
개발자는 dotLottie Slots API를 통해 토큰이 적용된 속성을 실시간 데이터와 연결할 수 있습니다.
Motion Tokens 패널
플러그인에서 Motion Tokens 패널을 열면 애니메이션의 모든 레이어와 각 레이어의 속성 목록을 볼 수 있습니다.
여기에서 다음 작업을 할 수 있습니다.
속성 옆 체크박스를 선택해 토큰을 만듭니다.
나중에 어떤 값을 제어하는지 알아보기 쉽도록 토큰 이름을 바꿉니다.
다른 레이어에 기존 토큰을 재사용합니다. 단, 해당 레이어의 속성 값이 토큰 값과 정확히 같을 때만 가능합니다.
값이 정확히 일치해야 토큰 연결을 예측 가능하게 유지할 수 있습니다. 하나의 토큰은 하나의 값을 나타내므로, 여러 레이어에 같은 토큰을 재사용하면 런타임에서 함께 업데이트됩니다.
워크플로
LottieFiles 플러그인으로 Figma 장면을 모션 출력물로 변환합니다.
Motion Tokens 패널을 열고 제어하려는 레이어를 찾습니다.
텍스트, 색상, 위치, 크기, 회전, 불투명도 같은 속성 옆 체크박스를 선택해 토큰을 만들고 이름을 바꿉니다.
값이 정확히 같은 다른 레이어에 이미 연결한 토큰을 재사용합니다.
토큰을 유지하려면 dotLottie(
.lottie)로 내보냅니다.
삽입할 때 토큰 편집
모션 토큰이 포함된 애니메이션을 Explore 또는 Workspace에서 미리 볼 때도 같은 토큰 컨트롤이 표시됩니다.
Explore 또는 Workspace에서 애니메이션 미리 보기를 엽니다.
애니메이션에 모션 토큰이 있으면 미리 보기에서 Motion Tokens 패널을 사용할 수 있습니다.
토큰 목록을 확인하고 브랜드 색상이나 라벨 텍스트처럼 Figma 장면에 맞는 값으로 수정합니다.
현재 값을 프리셋 변형으로 보관하려면 새 사용자 지정 테마로 저장합니다.
애니메이션을 캔버스에 삽입합니다. 플러그인은 수정한 토큰 값이 적용된 상태로 애니메이션을 배치합니다.
삽입하기 전에 특정 테마나 직접 수정한 토큰 값을 적용하고 싶을 때 이 흐름을 사용하세요.
중요한 형식 규칙
모션 토큰은 dotLottie에 저장됩니다. 같은 작업을 Lottie JSON으로 내보내면 토큰이 상태 머신, 테마와 함께 제거됩니다. 모션 토큰이 필요할 때는 항상 **dotLottie(.lottie)**로 내보내세요.
핸드오프 참고
개발자에게 모션 토큰은 dotLottie 런타임이 필요하며 Slots API를 통해 실시간 데이터와 연결된다고 알려 주세요. 일반 Lottie 런타임은 토큰을 읽을 수 없습니다.