Create a Customer Satisfaction Meter in Figma

Step 2: Create the Gauge Arc

1. • Draw a Circle:
     • Select the Ellipse tool O and draw a perfect circle by holding down the Shift key while dragging. Set the size to 40x40 pixels.
     • Align the circle to the center of the frame.
   • Create a Triangle:
     • Use the Polygon tool Shift + P to draw a triangle. In the properties panel, set the number of sides to 3.
     • Adjust the triangle’s size so that it intersects the top half of the circle. Position the triangle over the circle so that the base of the triangle aligns with the bottom of the circle, and the point touches the top of the circle.
   • Intersect the Circle and Triangle:
     • Select both the circle and the triangle by holding Shift and clicking on each shape.
     • In the top toolbar, click on the “Intersect” option to create an arc shape from the intersection of the circle and the triangle.
   • Add a Smaller Circle:
     • Draw another circle using the Ellipse tool O and set its size to 25x25 pixels.
     • Align this smaller circle to the bottom of the big circle intersected shape.
   • Subtract the Smaller Circle:
     • Select both the intersected shape and the smaller circle by holding Shift.
     • In the top toolbar, click on the “Subtract” option to cut out the smaller circle from the intersected shape, creating a hollow arc.
   • Style the Arc:
     • Set the fill color of the final arc shape to black #000000.
     • If you want to represent a specific satisfaction level, you can duplicate the arc, rotate it, and trim it using Boolean operations to match the desired angle.

Step 3: Adding the Rating Sections

1. Create the First Half Circle:
   • Draw a circle using the Ellipse tool O and set the size to 300x300 pixels.
   • Convert the circle into a half-circle by adjusting the Arc settings in the right panel. Set the Start angle to -90° and the End angle to 90°. and the radius to 50%
   • Fill the half-circle with red #FF1C25 to represent an angry customer.
2. Duplicate and Adjust Colors:
   • Duplicate the half-circle Ctrl/Cmd + D four times to create the other rating sections.
   • For each duplicate, decrease the radius by 10% and change the fill color as follows:
     • Sad Customer: Orange #F16D00
     • Neutral Customer: Yellow #FABF09
     • Happy Customer: Green #75BC46
     • Super Happy Customer: Dark Green #388E3C
3. Position the Sections:
   • Arrange the five half-circles in a row, aligning them horizontally with equal spacing between each.
   • Ensure that all the half-circles are positioned within the arc created in step 2, forming a complete gauge.
4. Group the Sections:
   • Select all five half-circles and group them Ctrl/Cmd + G. This grouping makes it easier to adjust or move the rating sections.

Step 4: Adding the Icons

• Add Icons to Each Section:
  • Option 1: Draw the Icons:
    • Use the Pen tool P or Shape tools to draw simple icons representing each emotion:
      • Angry: A frowning face with furrowed brows.
      • Sad: A slightly downturned mouth and teardrop.
      • Neutral: A straight line for the mouth.
      • Happy: A smiling face.
      • Super Happy: A wide smile with raised eyebrows or a starry-eyed face.
  • Option 2: Use the Iconify Plugin:
    • Install the Iconify plugin in Figma if you haven’t already.
    • Open the plugin and search for relevant icons:
      • Angry: Search for “angry face” or “frown.”
      • Sad: Search for “sad face” or “teardrop.”
      • Neutral: Search for “neutral face” or “meh.”
      • Happy: Search for “smile” or “happy face.”
      • Super Happy: Search for “grinning face” or “star eyes.”
    • Drag and drop the icons onto the corresponding half-circle section.
• Style and Align the Icons:
  • Adjust the size of each icon to fit well within the half-circle.
  • Center the icons horizontally and vertically within their respective sections.
  • Ensure that the icons contrast well with the background color of each section.
• Group the Sections with Icons:
  • Select each half-circle and its corresponding icon, then group them Ctrl/Cmd + G.
  • Finally, group all five sections together to keep the entire rating gauge organized.

Step 5: Add Arced Text Using the Arc Plugin

1. Install the Arc Plugin:
   • If you haven’t already installed the Arc plugin in Figma, go to the Figma Community tab, search for “Arc,” and install it.
2. Add the Text:
   • Use the Text tool T to type “Customer Satisfaction Meter.”
   • Set the font to Outfit, the size to 40px, and adjust the weight to bold.
3. Apply the Arc Effect:
   • With the text selected, open the Arc plugin.
   • In the Arc plugin, set the arc value to 40 to create a smooth, rounded arc that follows the curve of your gauge.
   • Position the arced text above or around the top of your gauge, ensuring it aligns with the overall design.
4. Adjust the Placement:
   • Once the text is arced, you can manually adjust its placement by dragging it into the desired position on the canvas.
   • Make sure the text is centered and doesn’t overlap with other elements of your design.
5. Style the Text:
   • Set the text color  #CCCBCB for a soft contrast against the background.
   • If necessary, fine-tune the arc and placement to fit the overall design.

Step 6: Add a Circle Shadow

1. Draw the Shadow Circle:
   • Select the Ellipse tool O and draw a circle.
   • Set the circle’s dimensions to 288px height and 25px width.
2. Style the Circle:
   • Set the fill color of the circle to #D9D9D9 to give it a soft shadow appearance.
3. Position the Shadow:
   • Place the circle behind your gauge, aligning it so that it appears as a subtle shadow beneath the meter.
   • Adjust the placement if needed to ensure the shadow looks natural and enhances the overall design.

Step 7: Prepare and Rotate the Gauge Arc

• Create the Movement Circle:
  • Select the Ellipse tool (O) and draw a circle with dimensions of 300x300 pixels.
  • Set the fill color to transparent by clicking on the color fill option and selecting “None.”
• Align and Group:
  • Center the transparent circle with the colored sections of your gauge.
  • Select both the transparent circle and the gauge arc.
  • Group them Ctrl/Cmd + G and name the group “Arc” in the layers panel.
• Rotate the Arc:
  • With the “Arc” group selected, use the rotation handle (circular arrow icon) to rotate the gauge arc. Set the rotation to 90 degrees for the desired angle.

Step 8: Create the “Angry” State

• Duplicate the Frame:
  • In the layers panel, right-click on the current frame and select “Duplicate.”
  • Rename the duplicated frame to “Angry.”
• Adjust the Gauge Arc:
  • Select the “Arc” group within the “Angry” frame.
  • Rotate the gauge arc to 73 degrees to reflect the “Angry” state.
• Resize the Sad Icon:
  • In the “Angry” frame, locate the sad icon that corresponds to the “Sad” section of your gauge.
  • Increase the size of the sad icon to 53px to emphasize the “Angry” state.

Step 9: Create Individual States for Each Icon

• Duplicate the Frame for Each State:
  • Right-click on the “Angry” frame and select “Duplicate.”
  • Repeat this process for each emotion: sad, neutral, happy, and super happy.
  • Rename each duplicated frame to match the emotion it represents (e.g., “Sad,” “Neutral,” “Happy,” “Super Happy”).
• Adjust the Gauge Arc and Icons:
  • Sad Frame:
    • Rotate the gauge arc in the “Sad” frame to reflect the next level of dissatisfaction.
    • Increase the size of the sad icon to 53px to emphasize this state.
  • Neutral Frame:
    • Rotate the gauge arc in the “Neutral” frame to center it.
    • Increase the size of the neutral icon to 53px.
  • Happy Frame:
    • Rotate the gauge arc in the “Happy” frame to the corresponding degree of happiness.
    • Increase the size of the happy icon to 53px.
  • Super Happy Frame:
    • Rotate the gauge arc in the “Super Happy” frame to the final degree representing satisfaction.
    • Increase the size of the super happy icon to 53px.
• Check and Organize:
  • Ensure each frame is properly named according to the emotion it represents.
  • Double-check the rotation angles and icon sizes to ensure they correctly reflect the intended state.