Create a star rating component with Rive’s State Machine

Rive’s visual State Machine is a way for designers to build interactive graphics that actually work (not just mockups or prototypes). It puts the designer in the driver’s seat for the functionality that ships in the product.

We think this is an important creative aspect that is missing in modern workflows, particularly in product design.

State machines make designers think more like developers, without having to write code. At the same time, visual state machines make it easy for developers to implement graphics without needing to be involved in every design iteration. Without a state machine, the logic created by a designer would need to be recreated in code by a developer, which is an inefficient use of both roles.

The component we’re creating

If you want to follow along, remix this 👉 star rating file from the Rive Community.

In the file, you’ll find an artboard named Tutorial to follow along. There’s also an artboard named Complete if you want to see the finished component.

Design and animation

Rive has two modes: Design and Animate. This is somewhat unique in the design tool space. I wrote about it here if you’re interested in the details.

In Design Mode, we created the stars and all the shapes needed for the various states.

In Animate Mode, we created six animations for all the states (empty and rating 1-5).

If you remixed our star rating file, then you’ll see that the Tutorial artboard is already set up with these animations for you. I’m not going to walk through that process, as it should be pretty straightforward if you’re familiar with design and animation. If you’re new to both, check out any design or animation tutorials, as these concepts are relatively similar across tools.

Adding interactivity

Animations as states

In a state machine, each state is an animation. You can even have multiple animations associated with a state (though we won’t cover that here).

Drag and drop the star animations onto the state machine graph to set up your states.

Also, add the empty animation and connect it to the Entry state. This will make your state machine start with no stars selected.

Transitions

Transitions enable designers to define the possible sequences of actions that can happen without having to write code. Without a state machine, all this logic would have to be written in code.

For this component, we’re going to create transitions from Any State to the star states. A transition from the Any State will happen regardless of what state is currently active.

Inputs

Inputs are the contract between designers and developers. You can change the values of inputs at runtime and the state machine reacts to those changes.

In this case, we’re going to create a number input called “Rating.”

Conditions

Select the transition from the Any State to your first star state. Set its condition to Rating == 1. Do the same for the other transitions using the appropriate Rating value (e.g., set Rating == 2 for the second star and so on).

At this point, you can play your state machine and change the value of the Rating input from 1 to 5. You’ll see that it correctly sets the state based on the Rating input’s value.

Listeners

If you want to interact with the component by clicking on the stars in the Rive Editor, you need to use Listeners. Add a listener for your first star and set it to use the star’s shape as a target. Set the type to Pointer Down and tell it to set Rating to 1. Repeat this for all the stars and increase the input to match the star number.

Tip: add a listener with your target already selected. It will automatically set the listener to use your selection as the target.

You’re finished! Can you take this further?

If you want to make this component even better, how would you set it up so that it starts on the correct rating? Right now it always starts on the empty state, but in a real app, you’d probably want it to show the currently set rating. Try to figure it out on your own, and if you can’t, take a look at my screenshot below for a pretty big hint.

Dive deeper into the concepts we covered

• 📄 Learn how state machines make iteration a breeze.

• 📺 Animation mixing video. The State Machine can do more than just play one animation at a time – it can blend and mix multiple animations at the same time.

• 🎨 Learn more about designing state machines in the Rive Editor.