Product Reviews UI Design in Figma | Figma Tutorial
Product Reviews UI Design in Figma, Figma Tutorial.
In this video I will show you product reviews ui design in figma, fgma tutorial.
Here's a step-by-step guide to designing a Product Reviews UI in Figma, ideal for an e-commerce or product page. This is great for both beginners and intermediate designers.
Design a clean and functional Product Reviews Section UI in Figma that includes:
• Overall rating
• Star ratings
• Individual user reviews
• Filters (e.g. most helpful, newest, etc.)
• Review submission button
Tools Needed:
• Figma
• (Web or Desktop App)
• Optional: Google Fonts (like Inter or Roboto)
Step-by-Step Tutorial:
Step 1: Create a New Frame
• Open Figma → New Design File.
• Press A to insert a frame. Choose a size like Desktop (1440 x 1024).
Step 2: Set Up the Layout Grid
• With the frame selected, go to the right panel → Layout Grid → Add Grid → Change it to Columns.
• Set to 12 columns, 20px gutter, margin 120px or as per your layout style.
Step 3: Add the Section Title
Use the T tool and type:
• Customer Reviews
• Set font size to 24px, font weight Bold (use Inter, Roboto, or Poppins).
• Align left.
Step 4: Add the Overall Rating
• Create a container on the left (around 300px width).
• Inside, add:
• Big rating text: 4.5
• 5 Star icons (use Plugins like “Material Symbols” or copy from Icon libraries)
• Small text: “Based on 1,245 reviews”
Step 5: Star Rating Breakdown
Add bars showing rating distribution:
Rating → Bar → Count
5 Stars ████████ 800
4 Stars █████ 250
3 Stars ███ 120
2 Stars ██ 50
1 Star █ 25
• Use Auto Layout for better alignment.
• Use light gray bars with colored fill.
Step 6: Review Filter Bar
Top right area:
Dropdowns or tabs:
• Most Recent
• Most Helpful
• Highest Rating
• Lowest Rating
Step 7: Individual Reviews Card Design
• Create a card (around 600px width):
• Reviewer Name + Avatar
• Star Rating (use icons)
• Date of review
• Review Text (e.g., “I love this product…”)
• Optional: Thumbs up/down for helpful votes
• Use Auto Layout vertically
• Make 3-4 of these cards stacked with spacing (e.g., 24px).
Step 8: Add “Write a Review” CTA
Bottom of the section:
• Button: “Write a Review”
• Use a primary color and rounded corners.
Extra Touches:
• Add hover effects using variants.
• Add pagination or “Load more reviews” button.
• Use consistent spacing (8pt system is ideal).
• Use shadows for cards for depth.
Optional: Use Figma Components & Styles
• Make Review Card a component
• Use Text Styles for headings, body, small text
This Video Also Includes: product design, figma, ux design, figma review, figma design, ui design, product reviews design in figma, product reviews ui design in figma, product review design in figma, product reviews in figma, product reviews design figma, product review design figma, figma introduction, figma review 2024, design, product reviews ui design, product reviews figma, product review design, figma overview, product review ui design, web design, design for figma and more.
You Can Check Also MY Figma Tutorials Below:
Figma Tutorial | Figma Tutorial for Beginners and Advanced:
• Figma Tutorial | Figma Tutorial for Beginn...
Watch More At:
/ @gdalam602
Order me on Fiverr:
https://www.fiverr.com/mdnurealam602
Get (A-Z) Alphabetical Logo & Other Logos and Design Elements from Here:
https://www.shutterstock.com/en/g/Nur...
#figma #productreviewsuidesign #figmatutorial #productreviews #uidesign #productreview #review #tutorial #graphicdesign