# Motion System
Use approved colors, easing curves, fonts, motion presets, and collection assets directly in VS Code.

Motion System gives designers and developers the same shared motion language. Authoring surfaces such as After Effects, Figma, Lottie Creator, and the web help teams create and apply system items; the VS Code extension turns those items into values, code, URLs, and downloadable assets for implementation.

The **System** tab is read-only. Create, edit, publish, and organize Motion System content in the supported authoring surface appropriate to the task.

<Image src="https://assets.docs.lottiefiles.com/static/e7a8e011d2-640.webp" alt="Motion System asset preview in VS Code" caption="Motion System asset preview in VS Code" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/e7a8e011d2-640.webp 640w, https://assets.docs.lottiefiles.com/static/e7a8e011d2-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/e7a8e011d2-1920.webp 1920w" width="1920" height="1080" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAj0lEQVR4nGPwiUj+D8Jmtk7/tfWN/xua2/73CU8Ci3mHJ/1lADH8IlP+q6pr/GdjZf4vLCwCkgArAGEGn4iU/15hCf/tHZ3/x8cn/ndx8/zvERL/3zcyBaLALyr1v2tg9H8vb7//Gzdu/Z+ekf3f2T/qP0gcYkIkxARjE7P/dnb2/w0Mjf97hkJM8I5I/gMAGmdMtt9WmecAAAAASUVORK5CYII=" />

## What developers can use

- **Brand Colors** - solid colors and gradients with CSS, TypeScript, React, and Tailwind representations.
- **Easing Curves** - cubic-bezier values and code for transitions or animation timing.
- **Fonts** - real font previews, CSS and TypeScript usage, `@font-face`, and eligible font downloads.
- **Motion Presets** - live previews and CSS, React, Vue, or keyframe-data output.
- **Collection Assets** - Lottie and image previews, CDN or embed code, and downloads.

## Fastest workflow

1. Choose the correct workspace in **Workspace**.
2. Open **System**.
3. Select a Motion System when the workspace contains more than one.
4. Search for a primitive.
5. Click **Use**.
6. Choose a code format.
7. Copy it or insert it at the active editor cursor.

## In this chapter

- [Motion System basics](/en/integrations/vscode/06_motion-system/motion-system-basics) - shared concepts and the read-only VS Code role.
- [Using Motion System primitives](/en/integrations/vscode/06_motion-system/using-motion-system-primitives) - code, insert, URL, and download workflows.
- [Motion System panel controls](/en/integrations/vscode/06_motion-system/motion-system-panel-controls) - complete UI reference.

## Related

- [Motion System for After Effects](/en/integrations/after-effects/11_motion-system)
- [Motion System for Figma](/en/integrations/figma/09_motion-system)
- [Workspace](/en/integrations/vscode/03_workspace)