🔌Bravo plugin for Figma
Use our Figma plugin to speed up your Bravorizing process!
Last updated
Use our Figma plugin to speed up your Bravorizing process!
Last updated
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.
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.
Once it's done, you can run the Bravorizer plugin from the Resources panel by hovering over the plugin name and click “Run”.
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.
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
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.
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.
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.
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.
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.
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
