Theming

By default, apps generated with Buzzy AI include a pre-defined collection of themes that you can use to customise the look and feel of your app using Figma. You can also create your own themes.

Switching between themes

Every app generated with Buzzy AI can be imported into Figma for advanced customisation. Once imported, the file will include a set of pre-defined themes including colours, shadows, spacing variables.

To swap your current theme to another theme, find the Theme selection menu in the right side panel of your Figma window. Then, select the theme you want to switch to. It may take a few seconds for Figma to update your design with the new theme variables.

Once your design is updated on your Figma canvas, hit 'Update the app' from the Publish tab of your Buzzy plugin to update your live Buzzy app.

How to swap between themes in Figma and change the look of your Buzzy app in a few clicks

Modifying a theme

You can also customise one of the pre-defined themes to make it your own. A theme is composed of a set of variables that control different aspects of your app's design such as colours, spacing or other effects (shadows for example).

You can modify these variables to make up your own theme. Open the 'Local variables' panel in your Figma file to start modifying.

Figma may take a few minutes to update your theme with the new variables.

Can't see the 'Local variables' section in the right-side panel in Figma? Click anywhere on the Figma canvas and make sure you are not selecting any layers, then you should see the 'Local variables' section appear.

At this time, Figma only allows one theme to be modified if the file is stored in the user's drafts. To work around this, you can simply delete the themes you are not using to only keep the one you will be modifying. Watch the tutorial video for an example!

How to customise a theme using the Figma variables

Customising UI components

In addition to the colours and spacing, you can also modify more specific aspects of your design.

You can customise the look and feel of any UI elements of your Buzzy app simply by leveraging the UI toolkit included in any Buzzy AI-generated file.

By default, once imported into Figma, the apps generated with Buzzy AI will have a 'Components' page which contains a range of Figma components used throughout the app's design. The master components are stored in the 'Components' page of your Figma file, while instances of those components are present in your app's design.

This allows you to quickly and easily give your app its own unique look, without the need to change each individual UI element in your design.

How to customise specific UI elements using master Figma components