🔌
Bravorizer (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.
- 1.Open Figma Community to install the Bravorizer plugin on your account, and click Install in the top-right corner of the listing. 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”.
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.
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.