I found a way to make Apple's "Picker Wheel", fully editable in Figma, with strategically rotated frames and opposingly rotated nested text.
I got this idea after @eugurlu_ came to me to show me a sneak peek of a slide from his upcoming presentation for @cladeclub.
After being in awe of the idea, I was then disappointed to see how it was implemented, being a ruse made by flattened text, squashed down, to give the perception of rotation. Rendering the text uneditable.
Since I'm crazy and want everything to be non-destructive and have a semi-reproducible method of creation for such a cool effect, I wanted to take a snag at creating something that I could reuse without having to flatten text every time I wanted to create a new string.
First, we need to find how a "wheel" actually feels perceived from the front. While we can't get infinite angles of z rotation in Figma, we can get close. So after some iterating, I found what seems to be a good enough formula of sizes for our wheel which is split into 7 segments.
Next, we need to get the text to look like its that tall, from a front perspective. I'll be doing the top three and middle first just because we can then easily duplicate the top three for the bottom ones. Do note that these text elements are wrapped in frames. That will be important later.
Using "Skew It, Let's Do It", I granularly matched the heights of the text by adjusting the X rotation of the text's parent to a negative number that was visually accurate. I'm using "Skew It, Let's Do It" because its the only plugin out of ~9 that allow you to use the arrow keys to adjust the value, while also validating decimal points.
Here's the last "hard" part. Making the text look straight. By selecting the text inside the frame, and giving it a positive rotation on the X axis, you can make the text look straight. I used a regular version of each string and overlayed them to try match accurately.
There is no "perfect" way to mathematically get the angle needed, at least not one that I thought of within the 30 minutes it took to make this, so it's the only "eye-ball it" part of this method.
Next is duplication. Just duplicate the top three elements, change the text, and centre for alignment with the soon to come full sentence.
Lastly is alignment. As you can see, the start of each text element isn't actually aligned to the following item from the left side. There's no "automatic way" to have this adjusted, as it depends on the angles you use in the tiling process. So I made one.
Using @diagram's Automator Plugin, I've created an easy to understand script that gets the text within each of these options, retrieves its width, and frames the parent frame to that fixed width, allowing each option to be sized based on the contents, removing any extra padding.
Using said automation, you get the final result, text that's accurate in width and skewed in height! You can then add any effects you'd like, like a mask to make it fade to the background, adjust the gap between to taste, or anything else :)