After having made the zoom color picker, I was curious if there were other subtle spots around Figma's UI that could be improved. One of the things I did with the color picker was to extract principles I could use to form a list of heuristics to assess features.

The main takeaway from the color picker was that it was enabling a level of granularity over the controls that was desired, but wasn't present. So I took that lens and started poked around Figma again to find if there was something that met that criteria. And I found something.

Whenever selecting multiple text elements when they have more than one size, the font size dropdown now shows "Mixed" instead of a concrete value. We don't have any details about the sizes, or how many different sizes there are, or which text has what size. And we don't have any control over the separate sizes. All selected text can only be set to a single size. We're just met with a sort of dead end in terms of information, so it seemed like I good experiment to add some granularity where it felt necessary.

Process

The process for ideating on this one was different from all the experiments I've run in the past. Instead of ideating in Figma first, I gave Claude this prompt:

"Generate an HTML file with multiple examples of how to solve this Figma problem: when you select multiple text layers with different font sizes, the font size field just says 'Mixed.' I want an elegant solution. Show me multiple versions of ways to let people easily edit those individual text sizes."

Absolute game changer.

Having 15 different iterations resulted in some unique ideas that absolutely would have taken me longer to get to if it was just me on my own. What resulted after this was a lot of back and forth where I'd essentially keep iterating on individual sections inside the 15 components. Everything would stay fixed except the one element was working on. And over time, it was slowly whittled down to 3-4 strong concepts where:

1. The increment/decrement buttons

2. The ticks on the slider

3. The font size buttons

4. The button shapes

5. The animations

6. The popups

7. The colors

8. The slider

Had all been iterated on.

Implementation

But I wasn't entirely convinced that I was going to be able to judge the UX of the components if they weren't inside as close of a replica to Figma as possible. Keeping it inside Claude's side window felt too sterile in this case.

So everything down the undoing or redoing actions (there's a limit of 25), or changing alignment, or proper bounding boxes were all polished so that I could get the closest approximation to how this would feel in a real app. I put all three versions inside because it was almost impossible to pick which one was the best.

After that I just started to play around and test to see which felt better. Despite my affinity for the second design, it actually felt the worst. Expanding the slider made it frustrating whenever you wanted to click one of the pill buttons to consolidate all font sizes.

Lessons

I recently read Ryo Lu's post on simplicity, and he mentions that simplicity only emerges after you've grasped the full complexity. And there's a comment that perfectly sums up this concept using the below figure:

I think it's worth mentioning because there was a lot of information that I wanted to fit in this small 100x200px space. And it required starting with a lot of messier versions that included all the features I felt were necessary. Only after having reached that point though, was I able to focus on capturing that fidelity as simply as possible in that slot on Figma's sidebar.

The two main takeaways are:

1. Solve the problem first, simplify it second.

2. Iteration is still king when converging on the best solution.