# Motion System
Motion System is a design system for motion. With it, you can create a set of reusable motion patterns and apply them to your animations, ensuring consistency and efficiency across your animations.

## Motion System in LottieFiles Platform

Motion Systems are created and managed in the LottieFiles Platform.

If this is your first time using Motion Systems, you will see a button to create your first motion system.

<Image src="https://assets.docs.lottiefiles.com/static/e962de5ca4-640.webp" alt="Motion System workflow blank state" caption="Motion System in the LottieFiles Platform" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/e962de5ca4-640.webp 640w, https://assets.docs.lottiefiles.com/static/e962de5ca4-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/e962de5ca4-1920.webp 1920w" width="2310" height="1614" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAb0lEQVR4nGWMSwrDMAxEff8z9RzZplDSLkyxokiylQYmyCSloYuHmI8mvcsMtdZpbYVYg1XHRIwhZyRixaIVRQyPQiAxqHnXmQXp/HgR43Yf8STuOhbj9kIQxuYfmDmWwwu+hTBZ6yWU34V/HMyCHVcLuPkHX8nhAAAAAElFTkSuQmCC" />

Here you can select from two options; import a PDF of your design system to be analyzed by our AI to create a motion system for you, or create a new motion system from scratch.

<Image src="https://assets.docs.lottiefiles.com/static/d9fde486ae-640.webp" alt="Motion System workflow new system" caption="Create a new Motion System" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/d9fde486ae-640.webp 640w, https://assets.docs.lottiefiles.com/static/d9fde486ae-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/d9fde486ae-1920.webp 1920w" width="3000" height="1875" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAACE4AAAhOAFFljFgAAAAhklEQVR4nFWOzQqCUBBG7/OpKG3sd5NZvV7QRpKK2gRiZvfaol0g0TvUrRNTtmjgMIvvY+YorzPCa0e4YYQTDv+QTAX9CbMkJS81xbH6YE5nFqstfjdGtQZTTH3hBdwfFmufyNTXG0Fv/L0wT9dk2rDLD2SFZq8rkuUGXwryxxWHBue3G4c3prtr1mWfBXAAAAAASUVORK5CYII=" />

From there, you can create and manage Sections. Sections are a collection of elements that can be applied to your animations. They include the following elements:

- Colors
- Easings
- Fonts
- Motion Presets
- Assets, including images and Lottie animations

As well as Documentation for notes and guidelines.

<Image src="https://assets.docs.lottiefiles.com/static/e86c7a08a5-640.webp" alt="Motion System workflow add section" caption="Add a new Section" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/e86c7a08a5-640.webp 640w, https://assets.docs.lottiefiles.com/static/e86c7a08a5-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/e86c7a08a5-1920.webp 1920w" width="2240" height="1194" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAYAAACzzX7wAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAS0lEQVR4nF2LSQqAMBAE5//v8xMmRKKzxkuHCQjqoaBXqu1A64xLHGKxMB+oLNj2AmJ1JFmcrIvUbIEuBnpeiZrD4375+A/iM8hsAsHfe5a2WR9aAAAAAElFTkSuQmCC" />

<Image src="https://assets.docs.lottiefiles.com/static/cc8f79dff9-640.webp" alt="Motion System workflow complete system" caption="Complete Motion System" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/cc8f79dff9-640.webp 640w, https://assets.docs.lottiefiles.com/static/cc8f79dff9-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/cc8f79dff9-1920.webp 1920w" width="2308" height="1612" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAcklEQVR4nG2NMQpCMRBEc2c7z2BpJYKXstZChLT+mJ9NsrtPEmw+OvCKYR5MaEnAoavyXmVDyoWw48r+eOByOjMyRDWblNoId0vcng9ijPTvYO4TGYIsBTWnduWV8u+FtIaqYWa4+4baOqFqn+Vf8ip8AKTcuQ5n5nR0AAAAAElFTkSuQmCC" />

Motion Presets can be added to your Motion System from here, but they cannot be created in the LottieFiles Platform and instead need to be created in Creator via the Motion Presets plugin.

<Image src="https://assets.docs.lottiefiles.com/static/90e886524c-640.webp" alt="Motion System workflow motion presets" caption="Add Motion Presets to your Motion System" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/90e886524c-640.webp 640w, https://assets.docs.lottiefiles.com/static/90e886524c-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/90e886524c-1920.webp 1920w" width="3000" height="1875" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAACE4AAAhOAFFljFgAAAAcUlEQVR4nGPwiUj+7xuZ8n/+0tX/dx048n/PwWP/F61Y/983Ivk/SI7BOzzpv19U6v8bt+/9h4Fbd++DNYHk4AouXLn+/9v3n/+/fv/5/8LVG//90BVcunbz/6/ff/7//vPn/9Ubt7EouH4TYcUdhBUAllFwwkMGkxoAAAAASUVORK5CYII=" />

When you are finished, you can publish your motion system to make it available to your team.

## Motion System in LottieFiles Creator

Motion Systems can be used in Creator via the Motion System plugin. If you don't have a Motion System, you can click the button to take you to the LottieFiles Platform to create one.

<Image src="https://assets.docs.lottiefiles.com/static/68ebe477f9-640.webp" alt="Motion System in Creator blank state" caption="Motion System in LottieFiles Creator" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/68ebe477f9-640.webp 640w, https://assets.docs.lottiefiles.com/static/68ebe477f9-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/68ebe477f9-1920.webp 1920w" width="3000" height="1875" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAACE4AAAhOAFFljFgAAAAgElEQVR4nGPwiUj+7x2e+N8jJA4Fe4XG/wfJMYAIHROr/1JKqv9llNT+yyqp/ZdUVP6vaWT+3zcy5T8DiFDVNfovJiX7X9HIBIxBbDU9Y4gCn8iU/xqG5v+lFJT/y2jpgjGIrWkINQFkhWdown+PkPj/HsGx/z2CQW6IB4uB3AAAaypGIPMDM6IAAAAASUVORK5CYII=" />

If you have a Motion System, you can select it from the dropdown and it will be available in the Motion System plugin.

<Image src="https://assets.docs.lottiefiles.com/static/5f165b745c-640.webp" alt="Motion System in Creator" caption="Motion System in LottieFiles Creator" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/5f165b745c-640.webp 640w, https://assets.docs.lottiefiles.com/static/5f165b745c-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/5f165b745c-1920.webp 1920w" width="3000" height="1875" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAACE4AAAhOAFFljFgAAAAkElEQVR4nC2MywqCUABE/YQWbUQxJRTMQiztYWQQZIFKQuErCnz8/y+cuNVizjDMMFJa9Vwfb+K8Ib41nPPnV5f7C9FJAv7+hL4M0OYuqmEi61Nsb01WD0hpPWDZLqNtgBLukJUJY1XDXKx+AwHH22BHEc7hiGHN0Cwbxw//D1VPUnZkRUdatCRlSyJc5KrnA5A8RvWYvrc7AAAAAElFTkSuQmCC" />

Once you have selected a Motion System, you can start using it in your animations. In the above image you can see that I have the Brand Colors section open. However, there is an info message that tells me I need to select a layer with a fill color to apply the colors to. This is because I don't yet have anything selected. So let's select a layer with a fill color and apply the colors to it.

<Image src="https://assets.docs.lottiefiles.com/static/ea195b77af-640.webp" alt="Motion System in Creator apply color" caption="Apply color to a layer" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/ea195b77af-640.webp 640w, https://assets.docs.lottiefiles.com/static/ea195b77af-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/ea195b77af-1920.webp 1920w" width="3390" height="2121" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAACE4AAAhOAFFljFgAAAAj0lEQVR4nE3OvQqCUABA4bu2NzUI9iNpaUSUlVGgJMTVO0m3aFJrjMB6pZ6jRzvRHzSc9fCJVBeoLCfRJXKbf9LFu2RXIjaHE+G5YiUznPEca+TT7g8xbY9gnSJm1ZXa444bS+o9ByOKMEyLRqfLNE6/h8sNP5S4iyUTqWjZHk1nQBArxL9B7Y+ol+Vn0AVP3ExKOlmO1oUAAAAASUVORK5CYII=" />

Here we can see that the info message has disappeared and there is an "Apply" button that appears when I hover over the color. Clicking this button will apply the color to the selected layer.

The rest of the sections work in a similar way. However, Motion Presets cannot be created in the LottieFiles Platform and instead need to be created in Creator via the Motion Presets plugin.

<Image src="https://assets.docs.lottiefiles.com/static/724805b53c-640.webp" alt="Motion System in Creator motion presets" caption="Add Motion Presets to your Motion System" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/724805b53c-640.webp 640w, https://assets.docs.lottiefiles.com/static/724805b53c-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/724805b53c-1920.webp 1920w" width="3000" height="1878" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAACE4AAAhOAFFljFgAAAAfklEQVR4nFWOwQqCQAAF/Y0OYaEYLeVBDGRPGkmQqxWh5noz1///gwmXDnadGR7PUe8PZTdyffZEMuUQS/J7R6kNs3NUO1BpQ6ZqNoHADQRZUVtWtMMyaPBEiLcPOavGstn9BWt/x8rdkt5eVHr6LdgPhvyhOZ4kIkq4LD58AetPSp10Rmq5AAAAAElFTkSuQmCC" />

After creating a new Motion Preset in the Motion Presets plugin, you can add it to your Motion System from the Motion System plugin.
