Figma Rating

Build a rating component in Figma as one set of 24 variants: six star states from zero to five filled stars, in Large 32, Medium 28, Small 24 and XS 22px sizes. Stars: a row of five star icons where filled stars use the amber rating colour and empty stars a light grey outline, with an even gap scaling per size. Add Booleans for a numeric score label such as 4.0 after the stars, a review count in parentheses, and a half-star state for the last filled star. Build an interactive variant for input where hovering a star previews the fill up to that star and clicking commits, wired as an interactive component across the six states. Compose three examples: a product card with Small stars and a count, a review summary with a large average score beside a five-row bar breakdown of how many reviews gave each star, and a survey question with the XS stars in a table row. Keep the star a nested icon so the shape can be swapped for hearts or thumbs, and bind colours to variables.