Hey folks! This is George, and I product manage Lottie Creator. I have a passion for logic in design, with a history in building design tools.
I recently had the pleasure of leading the massive launch of our new State Machines, a groundbreaking feature not only for the Lottie ecosystem but also internally as a company. We decided to take it a step further in the age of AI by introducing Prompt to State Machines.
If you haven't been in the loop, State Machines allow designers to make prod-ready, fully interactive UI in Lottie Creator. Here is an example of what State Machines can do:
State Machines was quite the paradigm shift for designers who were used to the traditional design/engineer hand-off cycle. Our team wished the process could be even easier, and fortunately, one of our dotLottie engineers had a solution.
Introducing Prompt to State Machines
Prompt to State Machines is an LLM-driven feature that takes user prompts and segments to create a state machine for the user, complete with Inputs, Interactions, Transitions, and all their settings.
Even though State Machines on its own could already save a lot of time in the design/engineer hand-off process, with Prompt to State Machines, that process can be made even simpler. All you have to do is just describe your desired logic to our AI, and it will build it for you, usually in a single shot. (As it turns out, this kind of logic is something LLMs are really good at.)
Now you have no excuse for not making your animations interactive!
Creating Interactive Lottie Animations with AI
This can be demonstrated quite easily with this emoji tool bar that has hover animations on each emoji.
For this example, we will need six segments: one for idle and one for each of the emoji animations.
From here, it is super easy. Click on the State Machines tab, where the entry point to Prompt to State Machines is next to the play button. Clicking it opens the chat window.
Here, we used the prompt “Make it so it plays an emoji animation when I hover that emoji.” This actually isn’t the best prompt in the world; ideally, you should be as descriptive as possible, but in this case, I wanted to see how it would perform in a more casual situation.
And indeed, Prompt to State Machines took the task seriously and output a perfectly functional state machine, complete with hover functionality, in a single shot.
From here, there are a few ways to improve the state machine further, like handling some of the return logic a bit smoother, but it’s already off to a great start. We’ve seen it do some pretty complex state machines before, such as this one from one of our dotLottie developers:
Overall, it’s a pretty smooth experience. As with all AI, the output is only as good as the input, so don’t be afraid to get descriptive with your prompts! I hope you have as much fun using Prompt to State Machines as we did building it.
Here are a few tips for writing good prompts:
1) Clearly explain the starting conditions of your state machine, such as indicating the beginning state or any other info, like the length of time-sensitive segments
2) Describe the state machine in a step-by-step basis, taking time to explain each step
3) Clearly indicate when a state needs to return back to a previous state (like hover on/off)
4) Use element and segment names as they appear in Animate Mode
5) Make sure elements and segments are properly named and organized
Create your first interactive Lottie with Prompt to State Machines
We encourage you to jump in and give it a try on your own animations, but if you just want a quick test, you can check out these examples:
Sample 1
Remix link: Volume animation
Prompt: Make the +/- buttons increase/decrease the progress of the main scene playback by 10%, clamped between 0 and 100.
Sample 2
Remix link: Reservation Counter
Prompt: I want the number to increase when I click ‘+’ and decrease when I click ‘-’. cap it at 10.
AI responsibility
We understand that AI can raise privacy concerns. Rest assured, none of your uploaded files are used to train or fine-tune our AI models. Your privacy and trust are paramount to us, and we are committed to using AI ethically.
