I found a way to make Apple's "Picker Wheel", fully editable in Figma, with strategically rotated frames and opposingly rotated nested text.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FZGOVedF0KNP3JeCb2QqOALC75oh2%2FuXvmuPBOYSmt4vIJuQ4h%2Fed4f859a-ca98-45b7-b5d9-aa2bcf4f6d48.mp4?alt=media&token=b80e103e-5e0b-4b20-81f4-47f644f4ce34","id":"ed4f859a-ca98-45b7-b5d9-aa2bcf4f6d48","width":2236,"height":1258,"filename":"008602.mp4","type":"video/mp4","caption":"","border":false}]}
```

I got this idea after [@eugurlu\_](https://twitter.com/eugurlu_) came to me to show me a sneak peek of a slide from his upcoming presentation for [@cladeclub](https://twitter.com/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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FZGOVedF0KNP3JeCb2QqOALC75oh2%2FuXvmuPBOYSmt4vIJuQ4h%2F0fd1e4e2-2dd2-4466-8be7-51b61e930997.jpg?alt=media&token=c9d859be-5d07-4406-9014-fa751f5407cc","id":"0fd1e4e2-2dd2-4466-8be7-51b61e930997","width":2235,"height":1256,"filename":"GLkSyzPW4AAJtdd.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FZGOVedF0KNP3JeCb2QqOALC75oh2%2FuXvmuPBOYSmt4vIJuQ4h%2Fca7535d1-838a-4cbc-9d43-a74fb9897ee7.jpg?alt=media&token=66c03609-c60c-4e49-8ad5-8e9bd801e9ce","id":"ca7535d1-838a-4cbc-9d43-a74fb9897ee7","width":2235,"height":1256,"filename":"GLkTGoNW4AAKVar.jpg","type":"image/jpeg","caption":"","border":false}]}
```

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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FZGOVedF0KNP3JeCb2QqOALC75oh2%2FuXvmuPBOYSmt4vIJuQ4h%2Faae7adf8-35c2-4a27-8a4c-690149091b9d.jpg?alt=media&token=91664552-9bfc-415c-b534-eea78d6dd073","id":"aae7adf8-35c2-4a27-8a4c-690149091b9d","width":2235,"height":1256,"filename":"GLkUP0TX0AIxBKN.jpg","type":"image/jpeg","caption":"","border":false}]}
```

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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FZGOVedF0KNP3JeCb2QqOALC75oh2%2FuXvmuPBOYSmt4vIJuQ4h%2Ffa96f42a-30ad-4ce4-ba9b-5bc40456c639.jpg?alt=media&token=5eae333f-d685-4d98-aa32-40131e159647","id":"fa96f42a-30ad-4ce4-ba9b-5bc40456c639","width":2235,"height":1256,"filename":"GLkUh-9XAAAHsKg.jpg","type":"image/jpeg","caption":"","border":false}]}
```

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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FZGOVedF0KNP3JeCb2QqOALC75oh2%2FuXvmuPBOYSmt4vIJuQ4h%2F6ab16f4f-8ffe-422b-9aa4-e78f1ebae9ac.jpg?alt=media&token=78c916c3-43dc-464a-bfef-2f8e46552fa7","id":"6ab16f4f-8ffe-422b-9aa4-e78f1ebae9ac","width":2235,"height":1256,"filename":"GLkUvj0XAAAWM_9.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FZGOVedF0KNP3JeCb2QqOALC75oh2%2FuXvmuPBOYSmt4vIJuQ4h%2F7c215278-3df6-4d51-85ca-30b6419a901a.jpg?alt=media&token=7cd79856-7d50-4881-8bb7-57d02d4dc878","id":"7c215278-3df6-4d51-85ca-30b6419a901a","width":2235,"height":1258,"filename":"GLkWVEyWsAAbNuK.jpg","type":"image/jpeg","caption":"","border":false}]}
```

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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FZGOVedF0KNP3JeCb2QqOALC75oh2%2FuXvmuPBOYSmt4vIJuQ4h%2F273fb05c-5890-4081-891f-235370557f6d.jpg?alt=media&token=54e3f9cc-0461-4314-a464-e9ce118ea727","id":"273fb05c-5890-4081-891f-235370557f6d","width":2235,"height":1258,"filename":"GLkW5Z7XwAAcKFX.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FZGOVedF0KNP3JeCb2QqOALC75oh2%2FuXvmuPBOYSmt4vIJuQ4h%2Ffb934bde-83da-46bd-b08d-56d2d88c28b3.jpg?alt=media&token=4c317cb5-48ef-46db-84d5-15e30f198f3f","id":"fb934bde-83da-46bd-b08d-56d2d88c28b3","width":2235,"height":1258,"filename":"GLkXu_oXcAAYQt6.jpg","type":"image/jpeg","caption":"","border":false}]}
```

Next is duplication. Just duplicate the top three elements, change the text, and centre for alignment with the soon to come full sentence.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FZGOVedF0KNP3JeCb2QqOALC75oh2%2FuXvmuPBOYSmt4vIJuQ4h%2Fb4ca01ff-0cae-4d50-9d33-fe34c3d02d7e.jpg?alt=media&token=1338bfba-911b-48a5-8fb1-8c5e4bd1a048","id":"b4ca01ff-0cae-4d50-9d33-fe34c3d02d7e","width":2235,"height":1258,"filename":"GLkYF8EWEAEO-OR.jpg","type":"image/jpeg","caption":"","border":false}]}
```

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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FZGOVedF0KNP3JeCb2QqOALC75oh2%2FuXvmuPBOYSmt4vIJuQ4h%2F5c48576c-1d95-42f4-b793-c1f2d177e562.jpg?alt=media&token=0e144e74-d629-4f70-a358-6423242713f9","id":"5c48576c-1d95-42f4-b793-c1f2d177e562","width":2235,"height":1258,"filename":"GLkYcYLWsAApRWJ.jpg","type":"image/jpeg","caption":"","border":false}]}
```

Using [@diagram](https://twitter.com/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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FZGOVedF0KNP3JeCb2QqOALC75oh2%2FuXvmuPBOYSmt4vIJuQ4h%2F9105ba3d-df83-49bc-a236-1a413dbad7c5.jpg?alt=media&token=cf7d9f74-78a7-41a6-95d9-a9dc5d77feee","id":"9105ba3d-df83-49bc-a236-1a413dbad7c5","width":1002,"height":1032,"filename":"GLkZTYWXYAAs6yR.jpg","type":"image/jpeg","caption":"","border":false}]}
```

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 :)

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FZGOVedF0KNP3JeCb2QqOALC75oh2%2FuXvmuPBOYSmt4vIJuQ4h%2Fd88ac647-17dd-4cf5-8de4-b93dc2a31c54.mp4?alt=media&token=6de1aee1-82af-4627-8456-2c136f40eadb","id":"d88ac647-17dd-4cf5-8de4-b93dc2a31c54","width":2236,"height":1258,"filename":"008621.mp4","type":"video/mp4","caption":"","border":false}]}
```

[Inspect it here!!!!](https://www.figma.com/community/file/1363321758221736411/apple-picker-wheel)

How to make Apple’s Apple Picker Wheel in Figma

You ever see that scene, be in a TV show or a movie, where a baby falls, and then the mother picks up the child and holds them close and pets them on the head while telling them “it’s ok, it's ok. You're ok, it's fine, you're ok, it's ok”, even if the baby has no concept of what she's saying, what being ok means, or what she's trying to do.

Even if she's just doing it to get the child to stop crying or if it's to calm the baby down, since it's only a minor accident and the baby has no clue as to how easy it would be to fix. She does it to somewhat calm the baby down, because why would anyone want their close ones to feel pain, or to suffer, or to feel something they don't want to be feeling?

Now you might be asking where in going with this. I'm bringing this up because I've been doing that to myself for the past year. Not… not the petting part… the… the saying it's ok part. Specifically, the part where you say “it'll be ok”. Not, “it's fine”, not “it’s ok”. It'll. It will. It will be ok.

“It will”, meaning not right now, not in a little bit, but later. Later, it will be ok. Specifically, I like to say, in a year.

“In a year it'll be ok”, “you'll be fine in a year”, “it'll be fine in a year”. In a year. Not a week, not a month, but a year. A year is a good time between now and forever. A year is a time where many people can visualise what they'll be doing in. People trust one year so much that they make plans, make plans for what they'll be doing in a year; “what are we gonna do next Christmas”, “what are we gonna dress up as for next year's Halloween”, “I can't wait for our one year anniversary”.

Personally, I can't fathom what I'll be doing in a year. How do I know? I can't remember what I did last year. I couldn't tell you what I did for the entirety of last year, unless it was some big thing that lasted a long time, I wouldn't be able to tell you what I did, who I was with, or what I do with who. So if I can't remember what I did last year, I won't be able to remember what I did last November

So I think a year is the perfect amount of time to think forward to. It'll be ok, in a year. I won't remember this, in a year. All of this will be gone, in a year. And even if it doesn't, even if something worse happens in a year, even if I'm poor, homeless, no job, no friends. I still think it'll be better than it is now. Because I won't be thinking about this. I'll have other things to worry about. And whaddya know, maybe I'll be telling myself it'll be ok in a year, next year.

Maybe next year this little issue will be one of those thoughts that you keep in little boxes in the attic of your brain. You know, those little boxes that open themselves up right before you go to sleep, or right when you get in the shower. The little boxes that contain all the embarrassing things you did in class, or the times you got rejected, or the time you did something stupid in public. You know those little ones.

Some of them are hard to get into, to get the thoughts in their boxes. One of them took me three years to get in, but it happens. Even if it does take a while to get into its box, it does go there sometimes, like an Airbnb or something, and occasionally comes out when you look at something on the internet. But after a while, they stay there.

Or maybe it does get better, as it normally does. Maybe I'll forget about what happened and not even think about this. Either way, it works.

It's better to worry about a future that doesn't exist, than a future that doesn't change.

---

Well then the issue is if it doesn't change. If the same problem continues to bother me for a year, then that's a problem. And here's my little analogy for that:

Life is like a game, you've probably heard that before, but it's so much more than that. Even if you're awake, if you're asleep, you're still playing. Playing a game you can't get spoiled. Playing a game, trying to reach a goal of which you don't know the contents of.

Along the way, you get to face these little challenges, important or not, and you go through them one by one, while trying to get to the end of the game.

Unlike many games, this one is special. Most games let you skip certain challenges if they're not related to the story, unneeded for completion. The game will let you skip these, but not let you skip the ones that are important to the progression of the main quest.

Sadly, the game we play doesn't tell you which ones are important and which aren't. So you're there stuck trying to skip the ones you think aren't important, while also trying to accept the ones that you think are. All the way until you reach a certain section of the game, where you can't progress until you've completed a certain challenge.

Now, this is where the funny part comes in. This whole time, the most hilarious bit, the funny part, the kicker, the punchline, the hysterical part.

You've been playing a game, that you made, for yourself. You're the one telling yourself that you can't continue. This one issue, no matter how big or small, is stopping you, because you can't get over it.

It's not your fault, not at all, you're not to blame for the problems that you face. But nonetheless, you're still playing. You're still there unable to beat it. You're just there twiddling your thumbs being sad or heartbroken or depressed with the problem that you face, that doesn't let you progress.

---

So to go back. Yea. It'll be ok. It'll be fine. In a year.

We hope.

---

In a year

Design Lead

Professional Diploma in UX Design

O'Level in Graphical Communication - Lv 3

O'Level in Physics - Lv 3

O'Level in Information Technology - Grade 2

VET Higher Diploma In Design Discovery with Adobe Creative Suite

ECDL Standard Certification - Lv 3

O'Level in English Language - Lv 3

O'Level in Mathematics - Lv 3

O'Level in Maltese - Lv 3

O'Level in English Literature - Lv 3

San Andrea School

MCAST HackSpace is an initiative within MCAST Applied Research & Innovation Centre (ARIC). It is operated under the Information & Communication Technology Applied Research (ICTAR) Information Security & Digital Forensics Group.

Voluntarily designed and integrated existing designs into a modern and user-friendly experience alongside a software developer.

Deisgn for HackSpace.mt

Brave-Fox is a Firefox Theme that brings Brave's design elements into Firefox.

It took ~4 weeks to make from knowing nothing about CSS, to knowing a lot.

Brave-Fox: The Reimagined Browser, Reimagined

Design for HackSpace.mt

I voluntarily designed Nalizyon's drink dispenser interface complete with a settings pane, management area, and full mobile support.

Drink Despenser for Nalizyon Catania

Drink Dispenser for Nalizyon Catania

A simple leaderboard I designed to display scores from my Embedded Systems assignment, which was a Snake game.

Snake Leaderboard

App Glassification

I didn't like the icons on my taskbar, so I made some to fit the new Windows 11 glass theme.

Glass Icons for Windows 11

Glass Icons for Windows

Discord Profile Pictures for Designers

Just a small game of hangman I had to do for my Scripting Assignment. Still proud of it though.

Fully Fledged Hangman with Python

Voluntarily designed Linkly, a simple open-source URL shortener with a flat design language and a simple interface.

Linkly for Nalizyon Catania

Progressive Blur Figma Plugin

Apple Picker Wheel in Figma

A python script I made that creates a Standard Deviation Table based on only a few given values.

Cumulative Frequency Graph sold separately.

Yes, I did make this to do my math homework for me.

Standard Deviation Table Generator

Personal Site :)

During my three months at FreeHour, I worked independently to design three websites, re-design their application, fully transfer all digital designs to Figma, recreate all current materials in vector format, and tend to all design-related needs. Lastly, I created tutorials on how to use Figma for the other members of the company to use after I am gone.

Graphic Design Intern

UI/UX Intern

Working on Kyo with Aether, I regularly provided feedback on design changes and participated in brainstorming sessions to make our projects as fun as possible, which was the main goal of the project. 

I was also adamant on transforming existing app designs from code into a detailed Figma design system, speeding up the design iteration process. As a result, I was the one in charge of the development and maintenance of our Figma library.

Jace

Work Experience

Projects

Side Projects

Education

Certifications

Contact