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.
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 ![]()
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?
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).
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.
Thank you for your tutorial. I really appreciated it! I will let yk how it goes after I finish.