How to change color styles in the components with the Frameblox Plugin?

You can change color styles on the components using the Frameblox Plugin.

Open the Frameblox Plugin and navigate to the Style menu located in the bottom navigation bar.

Select a color style from the list if you wish to change the main colors in your project. To modify the primary color, open the Primary color section. You can either select a color from the palette or use your brand's RGB or HEX code.

Set the main color, referred to as the 500. This serves as the center of the color palette. The plugin will automatically generate lighter and darker shades based on the color you set.

Click the Update button at the bottom. In the Assets tab in Framer, under the Styles section, you'll see the colors added in the Color folder.

When you add a new component from the Frameblox Plugin, it automatically uses your selected color across all elements, including buttons, links, icons, navigation menus, banners, and toasts. To add components to your project, click on them directly. Note that using drag and drop won't change the component colors to your selected palette.

If you've used the drag-and-drop function to add components to your project, or if you've previously added a component, you can update the component color styles using a button in the Style menu.

To update the color styles, go to the Style menu. Select the components, sections, or entire page you want to update, then click the "Update Component Styles" button.

Afterward, if you want to change the colors again, you can do so easily. All components in your project will update automatically. The plugin changes all the colors in your palette.