Community forum for knowledge and support

Updated 6 months ago

managing styles effectively

At a glance

The community member is looking for ways to manage styles in their design workflow, as it can get unwieldy quickly. In Figma, there is a plugin called Batch Styler that can help with this. In Webflow, the community member can use the Style Guide page to customize styles, and the Finsweet tool to rename classes in bulk using the Folders feature. Another Webflow tip is to use the keyboard shortcut G and click the brush icon to clean up any unused styles, but be cautious of removing custom classes used in code embeds. The community members have provided these solutions to the original poster's question.

Useful resources

hey folks - what is everyone using to manage styles? It can get unwieldy pretty quickly, so I was thinking there must be a way to bulk rename and remove unused styles to help keep things organised

V
M
T
3 comments

In Figma there is a plugin called <i>Batch Styler</i>. In Webflow, I don’t think there is something like this so I customize everything in the <i>Style Guide</i> page.

I would say in Webflow hitting G on your keyboard and hitting the little brush icon top right will clean up any unused styles.

If you created custom classes that you are only using in code embeds, you'll wipe those away if you use this tool - so just put a div with those custom classes somewhere on the style guide page and you'll be fine. All other global utility classes used to do layout and other things should already be on the style guide page so using this tool won't hurt anything. Not a bad idea to do a backup before doing it though (cmd + s to do a backup snapshot in Webflow).

In Webflow, using the Finsweet tool, you can rename classes in bulk using the Folders feature. We have a quick doc on that here:
https://www.relume.io/resources/docs/working-with-finsweet-tools#folders

Hope that helps, Viktor covered the Figma side, so if neither of these is what you meant or if we didn't answer your question - feel free to expand on it more with some examples as well.

Thanks - the finsweet folders solves the problem!

Add a reply
Sign up and join the conversation on Slack