๐Ÿ”ŒBravo plugin for Figma

Use our Figma plugin to speed up your Bravorizing process!

The Bravorizer is the Bravo Studio plugin for Figma. Itโ€™s your assistant when you need to make an app design โ€œBravo compatibleโ€, so itโ€™s ready to sync with your Bravo app project.

Getting started with the plugin

  1. Open the Bravorizer page on Figma and click Try it out to install the plugin on your account. If you're not authorized in Figma, you will need to sign in first.

  2. Once it's done, you can run the Bravorizer plugin from the Resources panel by hovering over the plugin name and click โ€œRunโ€.

How to use the UI presets

The UI presets section is designed to accelerate the app creation process by providing a pre-made library of UI presets, complete with properly configured tags. Simply "copy & paste" the UI page into your Figma File, and begin customizing the preset with your unique design style.

How to use the Bravo Tagger

The Bravo Tagger section of the plugin helps you quickly add Bravo tags to the layer names.

A Bravo Tag is a text string that you place in the layer names of your design file. After you connect the design file with Bravo Studio, the layer with the tag will turn into a native mobile component or action in your final app (previewable with Bravo Vision).

How to add a tag

  1. Once you are running the plugin, select at least one layer to add a tag. Under โ€œSelected Layersโ€, you can confirm the selected layer and any existing tag the layer has.

  2. All the Bravo Tags are listed below, separated by categories. To find a tag, you can either browse the list or type in the search bar.

  3. Once you found the tag you want to add to the layer(s), click on the tag, it will appear next to the layer name above under โ€œSelected Layersโ€. Click โ€œAdd tagsโ€ to confirm and the tags will be added to the layer name.

How to remove a tag

Option 1: Manually edit by double clicking the layer name from the Layers panel in Figma and delete the tag.

Option 2: In the Bravorizer plugin, select the layer(s) and click the โ€œXโ€ icon next to each tag-detected on the layer.

Option 3: In the Bravorizer plugin, select the layer and click โ€œRemove tagsโ€ to remove all the tags from the layer(s) selected.

How to edit a tag

You shouldnโ€™t need to edit a tag as the plugin contains all the tags with their correct spelling. In the rare case that you need to, for a valid compatibility reason, simply manually edit the tag by double-clicking the layer name from the Layers panel in Figma.

How to use the Tag Checker

The Tag Checker reviews the selected layer(s) to make sure all the tags are correctly placed before you connect the design with your Bravo app.

  1. When you are on the Tag Checker section of the plugin, select a layer. We recommend selecting one or multiple app screens to thoroughly check the entire design.

  2. The Tag Checker will display errors (in grey) or suggestions (in blue) regarding the layer(s) selected.

3. If there are no errors or suggestions detected, your design (or at least the selected layers) is ready to be connected to Bravo! Open Bravo Studio to create a new app project from the design file or update an existing one.

Please note: changes in Figma don't auto-sync with Bravo. Your Bravo app will only update if you press the Update icon in Bravo Studio.

How to use the AI assistant

The Ask AI section is an AI assistant ready to answer questions directly from our documentation. Ask any question you have about Bravo and get help directly on the stop

Last updated