Back

Batch Styler

Change multiple Text or Color Styles at once

Editing styles in Figma is a pain. With Batch Styler it becomes way easier: It allows you to edit as many styles in one click as you want. Need to change multiple text styles to use a new font or change your primary color? Batch Styler got you covered.

Batch Styler for Figma - Change multiple Color / Text Styles at once | Product Hunt
InstallGithubSponsor
Batch Styler

Easily update styles — within seconds!

Batch-change Text Styles

Update many text styles and their properties all at once, for example their font family.

Batch-change Color Styles

Update color styles by changing for example only their base hue, lightness, saturation, or hex values.

Change style names

Find & Replace across all selected styles, renaming styles is easier than ever.

Filter styles by name

Only show styles that match a certain pattern to help you edit your styles even quicker.

Change Descriptions

Update all descriptions of your styles, quickly annotating your design system.

Bulk-delete styles

Need to remove a bunch of styles? Select styles, hit Delete selected. Boom!

How to use

Batch-change Text Styles

Select all styles you want to change and then edit their values. Font names and weights are mapped, if a weight is not found the plugin will tell you which weights should get remapped.

Change style names

Select all styles you wish to change (you can Cmd + A all styles), enter the to-be-replaced string into the Find field, and enter the new value into the Replace field. So, for example if you wanted to change all `Heading 1 / Body`, `Heading 1 / Regular` and so on to `H1 / Body`, `H1 / Regular` you would enter `Heading 1` into the Find field and `H1` into the Replace field.

Change Style descriptions

You can also (batch) change descriptions of styles, for that simply select as many styles as you want and enter your desired description into the Description field. Leave empty to delete.

Bulk-delete styles

Select all styles, then hit the `Delete selected` button. Done!

Version 23

Style Descriptions

February 6th, 2021

  • Added ability to bulk-change style descriptions! For now, any description you enter into the field will get added to all inputs.

Version 22

New major release!

December 12th, 2020

  • Added ability to bulk-delete styles!
  • Added hex input to color styles
  • Fixed Find & Replace Style names to be more intuitive: Changing names of styles should now be way easier.
  • Changed behaviour of multiple values being entered to Color values to respect your input. If you select 3 styles and only change one value, it will only update this one value (changing 12, 16, 24 to 12, 24, 32 now updates the styles accordingly).
  • Added repeat-behaviour similar to Figmas stroke behaviour: If you select 10 styles but only enter 3 values (4, 8, 32) it will repeat those values for all selected styles
  • Fixed negative letter spacing values (% and px)
  • Allowed entering letter spacing as numbers as well as numbers appended by a `px` as well as the number itself - Added hex field
Other resources

UX Blockframes

A kit consisting of 24 frames to be used in sitemaps or wireframes - or even hero sections on your website!

Buy now
4.99 €

Figma Tokens

Speed up your workflow by integrating Tokens (Border Radii, Spacing, etc) into your workflow!

More

AutoGrid

The missing grid functionality for AutoLayout: Quickly create rows and columns of any given size.

More
Sign up and get informed about updates & new launches.

I'm currently building a mailing list for all people interested in following along any updates and new releases, once or twice a month, tops!