$246, Costs more than your $30 budget
Cover illustration. The files are listed under What's inside.
Advanced SaaS Motion UI System
A motion system for SaaS products: 400 animated UI elements, motion tokens for duration and easing, Figma prototypes, React components and Lottie files.
$249
$219 more than your $30 budget
Added to your cart.View your cart
- Includes the Standard license: personal, commercial and client work for one person.
- Instant download after payment, plus an email with links that stay active for 30 days.
- Refund within 14 days if you haven't downloaded it yet, if it doesn't work in the supported software listed here, or if it's faulty and we can't fix it.
- Contents
- 400 elements
- File formats
- .fig, .jsx, .css, .json, .aep, .mp4
- Supported software
- Figma, React, Tailwind CSS, Lottie, After Effects
- Download size
- 940 MB
- Good for
- SaaS design systems
- Shipping UI motion in React
- Motion tokens for handoff
About this product
Motion here is treated as part of the design system. Duration, easing and distance are defined as tokens, stored as Figma variables and exported as JSON and CSS custom properties, then applied to 400 animated elements across buttons, inputs, menus, modals, toasts, tables, charts, navigation, onboarding steps and page transitions. Each element exists as a Figma component with Smart Animate and as a React component styled with Tailwind CSS.
Rules come with the assets, so a SaaS team that wants its product to move consistently does not have to write motion guidelines from scratch: documentation pages explain when to use each token, how to stagger lists and how to respect reduced-motion settings. Illustrative states such as success, error and empty screens come as Lottie files with After Effects sources.
What's inside
- 400 animated elements across 10 SaaS interface groups
- Duration, easing and distance tokens as Figma variables
- Tokens exported as JSON and CSS custom properties
- React components styled with Tailwind CSS
- Documentation on staggering, choreography and reduced motion
- Lottie files with After Effects sources for illustrative states
License
Standard license
Included with every purchase
For one person. Use the assets in unlimited personal and commercial projects, including work you deliver to clients.
Allowed
- Create social posts and ads for a client from a social media template
- Use the same asset in as many of your projects as you like
- Design a client's website with a UI kit and hand over the finished site
- Build your startup's pitch deck from a presentation template
Not allowed
- Reselling, sharing, sublicensing or giving away the files, as they are or modified, for example on stock sites or marketplaces
- Uploading the files anywhere others can download or extract them, such as a public repository
- Letting several people work from one Standard license (a Team license covers that)
- Selling print-on-demand merchandise or templates built on the assets without an Extended license
$259, Costs more than your $30 budget
$234, Costs more than your $30 budget
$249, Costs more than your $30 budget