Rating Form Elements

In this tutorial, we'll look into how to add rating form elements to your Figma form and how to style them.

The use of these form elements is very intuitive and doesn’t require any configurations. However, you might want to style your rating elements in a unique way, which you  can thanks to Figma. Our rating elements section includes Star Rating, Scale Rating, Ranking and Slider.

Adding Rating Form Elements to Your Form

Adding rating form elements to a form in figma

‍

Steps

  1. Select the star rating/scale rating/ranking/slider from the Library in the plugin. It will then be added to the component library frame.
  2. Copy the rating component from there and paste it to your form, or drag it from Figma's assets panel.

Styling Your Rating Form Elements

These interactive form elements are supposed to catch the most attention in your form. Customising them in a unique way makes user experience even more engaging.

Star Rating

What's cool is that a star rating doesn't have to be restricted to stars only. It can easily become a heart rating or a pineapple rating or whatever subject rating.

Customising the style of a star rating form element in a Figma form


Steps to customise your star rating

  1. Select variants of your star rating and go to the Layers section on your left.
  2. Replace the star icon of the component with a different icon, a heart vector in our example.
  3. Then, re-style the new variants, as you need to highlight the state of the variant with different colours.

Scale Rating

Customising the scale rating in figma

In the example above we change our scale rating from square to round. Of course you can change this to your liking (e.g. colour, font, etc).

Available Rating Form Elements

Star Rating

Users provide feedback by selecting stars, representing their level of satisfaction or preference. It’s an intuitive and highly engaging way to collect feedback

Scale Rating

Scale rating allows users to rate on a predefined scale, offering a structured method for assessment using a numerical scale.

Ranking

Ranking enables users to prioritise or rank items in order of preference.

Slider

Users interact by sliding a visual marker along a range, providing a dynamic and engaging way to input values or preferences.

‍