Style Setuper

Year

2023

My role

Design, Prototype, Code, Marketing

See live

figma.com

What's been done

Found a problem, talked with fellow designers, designed the UI, coded the plugin, released for people to use.

Context

Style Setuper is a user-friendly Figma plugin that simplifies the process of setting up text styles from scratch. It saves you time and effort by scanning selected frames, identifying all text nodes, and analyzing the most frequently used styles. Based on this analysis, the plugin suggests text styles to be created, ensuring a cohesive design.

Initial state screen — Upon opening the plugin and if nothing's selected it fill ask you to select a frame. Selecting anything else will results in a cute error.

Text styles tab — After selecting a frame the plugin will scan each text layer inside and geenrate a list of styles to be created

Targeting animation — It might be hard to understand what which style is which, so you can click and zoom into view an example for each of the styles. Clicking again will cycle through more of them.

Merge reason dropdowns — If a style is used rarely or there's a very similar style already the plugin will match them as merge candidates adding the yellow banner. It is up to user to decide if they want to merge and with what.

Merge animation — Merges are a frequent action so they've been given enough attention interaction-wise.

On the animation above you can see that I set to merge H1 to H4 and then tried to merge H4 to Body 1. H1 was reverted to the default ‘no-merge’ state. That’s done on purpose because how can you merge H1 to H4 if H4 won’t exist, since it’s getting merged to Body 1. There are a lot more of these edge cases I had to think about and solve.

Button label always keeps up with the current number of styles to be created. Either users turned some off or is merging, it always shown how much styles will be created.

Max amount of styles banner — Here's what happens if you try to scan a frame with a ton of styles. I had to draw the line somewhere.

Color styles tab of the plugin — Colors tab looks similar to the text and also has merging functionality.

Naming colors is harder than naming text styles, there are only so many names and millions of colors. I’m using an API here to get color names and adding numbers if multiple colors received the same names. For gradients I pick a random color from the gradient and add ’… gradient’ after it’s name.

Variables created by the plugin — Color creation is more sophisticated than text. It first creates variables for each unique color and then mixes variable to create styles

If two fill combos have the same color in them, it will only be created once as a variable and then used in both styles. This allows for easy editing afterwards.

Feedback after running the plugin — After you click on 'Create styles' you get a feedback toast with some insights. These are pretty shocking sometimes.