Building a Tourist Guide App with Figma, Bravo Studio, Google Sheets, and Sheety.

In this tutorial, you will learn how to build a tourist guide app from a design in Figma and connect your design prototype with real data from Google Sheet and Sheety API with Bravo Studio.

Outline

• what is a Rest API?
• how do Rest APIs work?
• connecting Sheety.co API from a Google Sheet with Bravo Studio.
• building a tourist guide app with Figma and Bravo Studio.

What is a REST API?

An API means an application programming interface. It is a set of functions and procedures allowing the creation of applications that access the features or data of an operating system, application, or other services.

Simply put, API is like a software intermediary that allows two applications to talk to each other.

A Rest API is an application program interface that uses HTTP requests to GET, PUT, POST and DELETE data. REST stands for representation state transfer.

How does a Rest API work?

RESTful APIs allow you to build any kind of application having all possible CRUD operations.

CRUD is an acronym for Create, Read, Update, delete operations.

Rest API uses HTTP methods such as GET, PUT, POST, DELETE. It uses GET to retrieve or call data from a source, PUT to change or replace the format of data, POST to create data and DELETE to remove data from its source.

Bravo Studio API features are so powerful that it allows you to use any Rest API ranging from Contentful, WordPress, Webflow CMS, and so on. Currently, you can only do GET requests but very soon POST and PUT will be enabled.

Building a Tourist Guide App with Figma and Bravo Studio

In this section, you will learn how to build a tourist guide app with data from a Rest API built with Google Sheet & Sheety.co and how to connect your Figma design to the data in Bravo Studio.

Step 1: Sign up to Sheety.co with your Google account and permit Sheety to read data from your Google Drive.

Step 2: Create a new project to build your first API from a Google Sheet.

Create a new project to build your first API from a Google Sheet.

Step 3: Enter the project name you wish to use for the API and paste the spreadsheet URL in the necessary field.

Enter the project name you wish to use for the API and paste the spreadsheet URL in the necessary field.

Step 4: The Rest API has been created, API endpoints are automatically generated from the sheets (the tabs) inside your spreadsheet. Copy the API Endpoint URL to make the API call.

Copy the API Endpoint link

Step 5: Set up your design in Figma. You can copy the design below;

Step 6: Add a container to each element in the app frames.

Add a container to each element in the app frames.

You can learn more about using containers in Figma for Bravo Studio:

The

Step 3: Copy the Figma share URL, paste the link into Bravo Studio and click on the Import button to load the design into the platform.

Copy the Figma share URL, paste the link into Bravo Studio and click on the Import button to load the design into the platform

Step 4: Create new data collection in Bravo Studio, name the collection with a description and hit save.

Create new data collection in Bravo Studio, name the collection with a description and hit save.

Step 5: Copy the API endpoint URL from Sheety.co, paste it into the GET request URL field. Click send to fetch the data from the API endpoint and select the necessary data from the API response including the id.

Copy the API endpoint URL from Sheety.co, paste it into the GET request URL field. Click send to fetch the data from the API endpoint and select the necessary data from the API response including the id.

Step 6: Create a new request for the details screen data, add /{id} at the end of the API endpoint to create a generic parameter that will allow the detail screen to correspond to each data in the home (list) screen. Click on the parameter tab to input the id received from the API response and click the send button to fetch the data. Select the necessary data from the API response including the id as indicated below.

Create a new request for the details screen data, add /{id} at the end of the API endpoint to create a generic parameter

Step 7: Go the project tab, select the app and bind each screen with the data from the API response.

Go the project tab, select the app and bind each screen with the data from the API response.

Step 8: Select the home screen tab, bind the collections to the Tourist Guide collection you have created earlier. Set the request to the GET request. Click Add Content to select the layers from your Figma file and bind it to the data contents from the API response.

Bind the collections to the Tourist Guide collection on the home screen tab.

Step 9: Select the details screen tab, bind the collections to the Tourist Guide collection you have created earlier. Set the request to the GET request and add the data contents from the selected API response corresponding to the layout of the app.

Bind the collections to the Tourist Guide collection on the details screen tab.

Step 10: Scan the QR Code View the App to preview the app with Bravo Vision.

Scan the QR Code View the App to preview the app with Bravo Vision.

Demo

Conclusion

In this tutorial, you have learned about the principles and ways to use Rest APIs with Bravo Studio and how to connect the data from a Rest API with your Figma design prototype in Bravo Studio.

With Bravo Studio, prototypes just got real. You can now turn Figma prototypes into native iOS & Android apps instantly without writing code.

If you found this article helpful and educative, you can support me by using this link to Buy Me A Pizza

Useful Links

• Using Containers in Figma for Bravo Studio
• Connecting Airtable data to Figma design
• Designer’s Guide to Building Mobile Apps with Figma and Bravo Studio