Bravo Studio Help Center
  • Get started with Bravo Studio 👏
  • Get Started
    • 🚀Create your first app
    • 🌟Bravo introduction
      • Get ready to create your app with ChatGPT
      • Create an app
        • Creating an app with Figma
        • Creating an app with Adobe XD
      • Duplicate an app
      • Delete an app
      • Replace linked Figma file
      • The app page
      • Sharing your app
      • Add an editor to your app
      • Fonts
        • Adobe XD - Supported fonts
    • 📱Bravo Vision previewer
    • ✨Unlock power features to create interactive apps
    • 🎓Help and tutorials
      • 📖App guide tutorials
        • Sample app tutorial: Your first binding
        • How to build a Fitness app with Bravo, Xano and RevenueCat
        • Foodgram: Social content sharing
        • Expedition journal: Write and share your adventures
        • My Subscriptions: Display data based on device ID
        • My Notes: using user ID and email from Firebase
        • My Store: Sell physical products with Bravo and Stripe
        • Titan: How to create a Smart Home App with No-Code?
        • n8n: Building an expense tracking app in 10min
      • 📺Learn with videos
      • 📚Learn with articles
      • 🗃️Browse by app feature
        • Save or "bookmark" a page
        • Backend search with Airtable
        • Backend search with Xano
        • Nested lists (list within a list)
        • Create and edit user profile (Firebase + Airtable)
        • Skeleton loader
        • Create albums in your app with Bravo Infinite images
  • Set up your design
    • 🖌️Get your Figma ready for Bravo
      • 🗃️Structuring the design: the layer hierarchy
      • 🪄Bravo Tags: adding functionality to the UI elements
      • 🧱The container
        • Setting up a container on Figma
        • Setting up a container on Adobe XD
      • 📲App navigation
        • Setting up app navigation on Figma
        • Setting up app navigation on Adobe XD
    • 🔌Bravo plugin for Figma
    • 💾Sample design files
    • 🤓Best Practices
  • App components
    • 📒Bravo Tags Master List
    • 🚪Menus
      • Modal Menu
      • Modal pages
      • Tabs Menu
      • Pop Up pages
      • Slide Menu
    • 🍞Pages
      • Modal pages
      • Pop-up pages
      • Swipe page
      • Transitions page
      • Page reveal animations
      • Page tabs
      • 🔮Stateful pages
    • 📦Containers
      • Swipe to delete
      • Top bar
      • Carousel slider
      • Aspect ratio relative to screen
      • Sortable List
      • Layer (sticky element)
    • 👋Intro & Onboarding
      • Intro page
      • Post-login page (Onboarding)
    • ⌛Loading experience
      • Loading page
      • Custom loading page
      • No loading
      • Preload
    • 📝Form & input fields
      • 👁️Password Visibility Toggle
      • 🩷Stateful input
        • ☑️Checkboxes (Multiple select)
        • ✅Required Checkbox
        • 🔘Radio buttons (Single select)
      • ⏳Input time Interval
      • 📄Dropdown selector
      • 🎚️Slider control
      • 🗓️Calendar picker
      • 📄Send form input to a database
    • 💎Components
      • Autoplay Video
      • GIF
      • SVG Component
      • Web view
      • Web Components using AI
      • Web view communication
      • LottieFile
      • Lottie-animated component
      • Flexible text (Flexo)
      • Zoomable image
      • Component states
      • Stateful component (like button)
      • Setting up the backend of Stateful component (like button)
      • Haptic Feedback (Buzzz)
      • Progress bar
      • Rich text
      • Date, Time and Currency Formatter
      • Scrollable text
      • Text Lines & Truncation
      • Status bar
    • ⚡Mobile actions
      • Mobile Actions
      • Play audio
      • Record audio
      • Play video
      • Scan QR code (external URL)
      • Scan codes (remote action)
      • Search & filter
      • Refresh page
      • Share location
    • 📱App Icon & Splash Screen
    • 🗺️Map with markers
    • 📈Charts
  • Data and Backend
    • 🗂️Set up a no-code backend
      • Xano
        • Nested lists (list > list > detail page) with Xano
        • Create a bookmark functionality with remote actions and device ID with Xano
        • Multi-user setup with Xano
        • 🔒Setting up the Xano Log in Snippet
          • ♻️Refresh Token
      • Airtable
        • Nested lists (list > list > detail page) with Airtable
        • Sort list with Airtable
        • Connect multiple tables from Airtable to one app
        • Update Airtable's API key to Access Token
      • Backendless
      • Bubble
      • Notion
        • Getting data from a Notion table
      • Firebase
        • Getting data from Firestore
    • 💾Set up API requests
      • Set up from scratch
        • Airtable
          • Set up an API GET request for list page - Airtable
          • Set up an API GET request for detail page - Airtable
          • Set up an API POST request - Airtable
          • Set up an API DELETE request - Airtable
        • Xano
          • Set up an API GET request for list page - Xano
          • Set up an API GET request for detail page - Xano
          • Set up an API PATCH request - Xano
          • Set up an API POST request - Xano
          • Set up an API DELETE request - Xano
      • Using GraphQL body type
      • Set up with API wizard & importer
        • Using the Airtable API Wizard
        • Using the Xano API wizard
    • 🎲Variables
      • Built-in variables
      • Set Variable
    • 📚Data Collection & Binding: Complete Collection
    • 🗂️Pagination
    • 🐛Debugging API issues
      • ⚙️Debugging requests in the API Collection
      • 📲Event logger
      • 🔗Link property
  • Data binding
    • 🤝Data binding types
      • API binding types
      • Bind multiple API requests to one screen
      • How to connect my API to a mobile actions
      • Remote actions: trigger an API request with a UI element
    • 💡Display data in your app
      • Bind data to design for a list page
      • Bind data to design for a detail page
    • 🆕Create data from your app
    • 🗑️Delete data from your app
    • 🚦Conditional Visibility
    • 🎛️Conditional Actions
  • Integrations & Settings
    • 🖇️Deep Links
      • 🖇️Deep Links for Bravo Vision
      • 🖇️Deep Links for published apps
      • 🖇️Troubleshooting Deep Links
    • 🔔Push Notifications with OneSignal
      • How to get a Bravo page URL
    • ⚙️Firebase Configuration
    • 🔐User Authentication
      • 🔑Authentication with Kinde and Xano
      • 🧙🏽Authentication with OAuth 2.0
        • Using social logins to authenticate users
        • Using AWS Cognito to authenticate users
        • Connecting to Spotify API
      • 📲User login with Firebase
        • ✉️Email and password Login with Firebase
        • 📞Phone Login with Firebase
        • 🍎Social Login with Firebase
        • 👻Anonymous Login with Firebase
      • ⛓️Authentication with custom backend
        • Set up Xano as your user authentication backend
    • 💰Stripe: One-time Payment
    • 💬Chat: CometChat
    • 💸RevenueCat: In-app purchases and subscriptions
    • 📉Bravo Analytics
    • 📳Facebook App Events
    • 📊Google Analytics
    • 🌐Multilingual apps
    • 🕸️How to connect with Webflow API
    • 📡NFC connection
    • 🎯Admob
  • App Publication
    • 🚀Publishing your app
      • iOS Publication: Complete Process
        • 1. Generate Certificates, AppIDs and Provisions
        • 2. Get the IPA
        • 3. Upload IPA to App Store Connect
        • 4. Test your app on TestFlight (optional)
        • 6. App Store publication
        • 7. Updating an app in the App Store
      • Android Publication: Complete Process
        • 1. Create a Keystore File (optional)
        • 2. Get the Debug APK to install
        • 3. Install the Debug APK in your device
        • 4. Get the AAB (Android App Bundle) file to publish
        • 5. Google Play publication
        • 6. Updating an app in Google Play
      • Android APK Installation Guide
      • Rejection from the app stores
    • 🎛️Making changes to your app after publication
    • 🛍️Versioning
    • 🌟App rating alert
  • Good to Know
    • 🤔Troubleshoot
      • Errors when logging in
      • Errors when creating an app
      • Errors in API requests
        • Request timeouts on Bravo
      • Errors after importing
      • Errors in publication form
    • 🧑‍💻Manage your account
    • 💳Billing
      • Bravo Subscription Plans Overview
      • App Add-ons
      • Upgrading a plan
      • Downgrading a plan
      • App allowance
      • Invoices & payment method
      • FAQ
    • ❓FAQs
      • About Bravo Studio
      • Importing a design file
      • Bravo Vision
      • Bravo Tags
      • API & Data Library
      • Login & Account
      • Other Features
  • NEED SOME HELP?
    • 📖Bravo Support Guide
    • 🤝Join the Bravo community
    • 🤖Bravo Assistant
    • 👥Production support
    • 🐞Report an issue
Powered by GitBook
On this page
  • What are we going to build?
  • Requirements
  • Step 1: Importing the design
  • Step 2: Bravorizing
  • Step 3: Importing the backend
  • Step 4: The API collection
  • Step 5: Binding
  • 5.1. Binding the list page
  • 5.2. Binding the detail page
  • Step 6: Preview your app
  • Live updates
  • Make it yours

Was this helpful?

  1. Get Started

Create your first app

PreviousGet started with Bravo Studio 👏NextBravo introduction

Last updated 1 year ago

Was this helpful?

In this tutorial, you will learn how to create your first app using Bravo Studio using our Resorts App as an example.

What are we going to build?

We are building a simple app with a few screens:

  1. A list of resorts

  2. A detail page to show more info and images of each resort

Requirements

  • Figma for the design

  • Airtable for the backend

If you don’t have one yet, create an account in each tool:

Step 1: Importing the design

As we're using a sample app, we are going to duplicate the design template and connect it to Bravo:

2. In your duplicated file, click Share, then Copy link. Make sure the permission for "Anyone with the link" is can view.

4. Paste the link from step 2 into the input field. Click Connect Bravorized Figma file.

5. Once the app is successfully created you will see the app screens imported from your design.

Step 2: Bravorizing

Now that your Figma design is connected to Bravo, let’s learn a little about bravorizing.

We call bravorizing the process of setting up your design file for being converted into a native app by Bravo Studio. In general, bravorizing consists of:

  • Structuring layers as required by each Bravo component.

  • Adding Bravo tags to add functionality and structure.

  • Top bar: [container:top-bar]

  • Resort card: [container]

After making any changes in the Figma file, make sure to click the Update button to sync your Figma file with Bravo.

Step 3: Importing the backend

A backend is a server that stores data and provides APIs that you can connect to get the information for your app. Think of APIs as an intermediary that allows two applications to talk to each other. In this case, Bravo and the backend, an Airtable database.

One of the greatest core values of Bravo is flexibility. In Bravo, you can create connections to any backend that provides an API. For our app, we have built a database template in Airtable, one of the simplest (yet powerful) no-code databases.

2. Click Airtable Wizard.

3. Go to Airtable. On the top right, click Share → Share publicly and copy the shared base link:

4. Go back to Bravo and paste the shared base link into the “Enter URL” field. Then, click Continue.

  1. Click Create token from the Personal access token tab.

  2. Set a Name, for example: Bravo API key.

  3. Click + Add a scope and select data.records:read and data.records:write.

  4. Click + Add a base and select All workspaces (you may select a specific base if you want).

  5. Click Create token. Make sure you verified your email first.

  6. A new modal shows up: Your token has been created. Copy the token.

  7. Go back to Bravo and past the token in the Enter API Key field and click Complete.

Step 4: The API collection

Now that you have the design ready and the database imported, we will connect both and add them functionality. First, we need to create API requests in Bravo with the Airtable API endpoints:

As we have selected the Airtable Wizard option, Bravo created two requests automatically per table: “List” and “Detail”.

Furthermore, all received data is pre-selected for convenience. Within the Selected Data tab, you can modify the variable names for each of the chosen data sets.

Step 5: Binding

The previous step, selecting the data from the API request, will allow us to assign/bind each data point to its correspondent UI element. Let’s do it!

5.1. Binding the list page

  1. In Bravo, go to Apps and open Your first Bravo app.

  2. On the left hand side of the screen, you will see your Screens. Select the "Resorts list" page.

When you select the Screens, you enter data binding mode. In this mode, you can assign data from the API to each UI element in your design file.

  1. Select the UI element labeled "Resort card". Alternatively, you can also select the UI element you wish to bind directly from the app image located in the center of the screen.

  2. On the right hand side, under Element binding and List Item, select the API request GET Resorts-list and Records. This binding will create as many “cards” as rows in the database.

We have done our first binding! Let’s continue with the rest of the elements.

  1. On the left side of the screen, select the Resort card and select the *Image property. You can also select the UI element you wish to bind directly from the app image located in the center of the screen

  2. On the right side of the screen, under Element binding, keep the request as: GET “Resorts-list” and choose the data point images 0 url for the Image URL.

  3. Repeat the same steps for *Name, *Country, *Price and *Rating, which have the same name for the data points.

  4. We have bound our Resort list screen to the backend! 🎉

5.2. Binding the detail page

  1. On the left side of the screen, under App screens, select the "Airtable - Restaurant detail" screen and from the data binding section, select *Image

  2. On the right side, under Element binding section, select the GET - "Retrieve restaurant detail" request and finally choose Field Photo[0] Url which corresponds to the image URL.

3. Repeat the process for the rest of the UI elements with an asterisk *.

Pro tip: Since we have added an asterisk in Figma to every element that needs to be bound, you can instantly search for all of them by typing an * symbol in the Search field.

Step 6: Preview your app

It’s time to see our app live! Download Bravo Vision from the app store:

Now open the app and log in using your Bravo credentials. You will see Your first Bravo App. Tap to open it.

Once you have bound all the elements, the list of resorts should be visible, along with the image, resortt name, short description and cost and if you open a resort, you will see each resort details coming from your backend. 🎉

Live updates

Another cool feature of Bravo is live updates. Once your app is live on the app stores, most of the changes won’t require the users to update to a new version of the app. That includes changing the design, adding new app pages, changes in bindings and more. Your users can instantly enjoy the latest version of your app without any hassle.

Make it yours

Happy Bravorizing! 🎉

A

Let’s get started!

In Figma, to your account.

3. In Bravo Studio, go to .

Try out our official and speed up your app building process!

There are a variety of Bravo components that you can incorporate into your app: , , , , , , and more. To set up a component, we insert Bravo tags within a specific layer structure. The most elementary tag that Bravo requires is [container].

wrap the UI elements and separate them from each other. You can think of them as blocks. In our first app screen, we have two containers:

Learn more about . Bravo tags not only work for components or containers, they are also used to add actions to buttons, set the app icon, form input fields, etc. They convert the tagged layers into native mobile elements. Find detailed information in our .

Explore the layers in the design file and see how Bravo tags are used in the app. We highly recommend using our to learn how to bravorize.

Duplicate this above to your workspace:

Go to Account Collections and click Create a new collection.

5. Go to Airtable again, click on your account in the upper right corner of the screen. Here you'll see a dropdown menu appear. Click the Developer hub option. Or if you are currently signed into Airtable, you can .

The “List” request displays all data from the specified endpoint. For more detailed information, refer to the section on

The “Detail” request displays to display data corresponding to the selected item on the previous app screen. Additional details can be found in the section on

Binding refers to the process of connecting data from API requests or the backend to the app design. This enables dynamic and interactive experiences by integrating real data into the app. There are two modes of binding: static and dynamic. - Static binding: Allows using from the backend or other API requests. - Dynamic binding: while dynamic binding enables real-time updates and interactions with the app. For additional details, please consult: .

Learn more about .

You have completed your first app tutorial with Bravo! Now you can keep learning the power of Bravo by doing changes to the design, adding more content to the database or any idea you come up with. Remember to update the design in Bravo every time you do changes in the Figma file.

In case you've skipped step , you will see that it shows the same content for all of the detail pages (the template content). That is because Bravo shows the design content by default. Bind that screen to fill it with content from the API. Go back to Bravo Vision and tap on a resort from the Resort list page. You will see that now it shows the correct content. If not, pull to refresh and voilà! 🎉

You will find lots of documentation, videos and more in the .

🚀
👏
🎉
modal page
Sign up for free in Figma
Sign up for free in Airtable
duplicate this design file
Create a new app
Bravorizer plugin for Figma
Menu
Swipe page
Carousel slider
Modal page
Map
Form
Containers
Structuring the design and Bravo layer hierarchy
Bravo Tags Masterlist
Bravorizer plugin for Figma
Airtable base
API Collections
click here to access the developer hub
Set up an API GET request for a list page
Set up an API GET request for a detail page
variables
Connect data to your design
Bind data to design for a detail page
Download Bravo Vision for iOS
Download Bravo Vision for Android
Bravo Help Center
5.2. Binding the detail page
Received data
Selected data
Binding mode