Help design battleground emote wheel

Hi Developers,

I’m a newbie to Figma, and I’m just wondering how I would create this emote wheel in Figma. I only need the background on the wheel and not the text or preview character.

Use the Ellipse tool to draw your shape, then use a mask if you need to clip anything. If you are trying to make the segmented slices, just draw a wedge or use a boolean subtraction with a larger circle.

Are you able to make a video for the last part where u said:

“If you are trying to make the segmented slices, just draw a wedge or use a boolean subtraction with a larger circle.”

I’m kinda lost after drawing a circle; please bear with me, as I’m new :skull:

What I got rn for my emote wheel

A video is overkill for this. Just draw a thin rectangle, rotate it, and use the Boolean Subtract tool on your main circle to cut out the slice shape.

How do I get boolean subtract tool?

Is it one of these or…

Select both shapes and look at the top center of the toolbar. There is a dropdown menu there for Boolean operations.

Just use any SVG editor
I use Inkscape/Affinity, for example
Create a circle, boolean it with the smaller circle (from the center)
Then cast 8 “rays” (frames or whatever from the center)
Then if they are a stroke, convert them to shape
Union all these shapes and break them apart
This will create 8 cells
Since 360 divided by 8 = 45, then you should tilt each ray by 45

Was funny figuring this out










Now clean up the mess, and it will be 8 separate pieces:

Obviously, it’s only one out of many ways to go about it
You can also use EditableImage, but it honestly will be overkill, imo.

Have made UI similar to that before

The scripting part is just unit vector math checking the center of a frame and where you click/hover and deselecting the previous one aswell as checking distance

The UI in the video is like 9 frames (8 for the background cell) and 1 for the outline (recollorable).

1 Like

The math checks out, but just make sure you export those as clean PNGs or optimized paths. If you import raw vectors with too many nodes, it is just going to bloat the asset unnecessarily.

1 Like

Thank you for your tutorial. I really appreciated it! I will let yk how it goes after I finish.