11:09
Turn your Figma prototype into a native app with no code using Bravo
femke.design
Overview
This video introduces Bravo, a no-code tool that transforms Figma prototypes into native mobile applications. It explains how Bravo connects Figma designs with real-time data from sources like Google Sheets or Airtable, enabling designers to create functional apps without writing code. The process involves using Bravo tags within Figma to define interactive elements and data containers, then linking these to an API generated from a spreadsheet. The result is a testable, native app that can even be prepared for app store submission, empowering designers to bring their creations to life beyond static prototypes.
How was this?
Save this permanently with flashcards, quizzes, and AI chat
Chapters
- Bravo is a no-code platform that converts Figma prototypes into native mobile apps.
- It allows connection to real data sources like Google Sheets or Airtable.
- Users can create fully functioning apps, test them on their phones, and even prepare them for app store submission.
- Bravo bridges the gap between design and development for non-coders.
Understanding Bravo's core function is crucial for designers looking to create interactive, data-driven applications without needing to learn traditional coding languages.
The speaker demonstrates turning a Figma design for a kombucha browsing app into a functional native app.
- Bravo utilizes a three-layer structure: app screens, containers (repeating list items), and individual design elements within containers.
- Frames in Figma are used to define containers, and margins within these frames ensure proper spacing when elements repeat.
- Bravo tags, like 'list' and 'container', are essential for identifying elements and enabling dynamic content population.
- Descriptive naming of layers in Figma helps in easily mapping design elements to data fields later.
Properly structuring your Figma file with frames and descriptive layers is fundamental for Bravo to correctly interpret your design and prepare it for data integration.
Designing a single list item for a kombucha app and wrapping it in a frame, then labeling this frame with the Bravo tag '*list(container)' to enable it to be populated with data.
- Data can be sourced from platforms like Google Sheets or Airtable.
- Image data requires using image URLs.
- Tools like XI T can convert a Google Sheet into an API endpoint, making the data accessible to Bravo.
- This API endpoint is then used within Bravo to fetch and display the data.
Connecting your design to a live data source is what transforms a static prototype into a dynamic, functional application.
Using a Google Sheet with kombucha names, descriptions, and image URLs, and then converting it into an API endpoint using XI T.
- Import your Figma file into Bravo using its share link.
- Add your data source by creating a new collection and pasting the API endpoint URL.
- Bind the container element in your Figma design to the data collection.
- Connect individual design elements (text, images) within the container to specific data fields from your API.
This step is where the magic happens, linking your visual design elements to the actual data that will populate your app.
Selecting the list container in Bravo, binding it to the kombucha API, and then connecting text layers for 'brand name' and image layers to the corresponding data columns.
- Preview your app in real-time on your phone using the Bravo Studio app.
- Bravo supports various tags beyond 'container' for different functionalities, such as 'menu slide' for navigation.
- Tags can enable actions like embedding videos, using Lottie animations, or triggering native device features like the share sheet or email dialog.
- Bravo preserves Figma's prototyping interactions and transitions.
Exploring Bravo's preview and tag system reveals the full potential of creating interactive and feature-rich native apps without code.
Using the 'menu slide' tag to create an interactive sliding menu and a share button tag that triggers the native device's share sheet.
- Bravo allows users to request an API build for their app, which can be submitted to the App Store.
- The platform is design-first and no-code, empowering designers.
- Future updates will include audio support and full communication APIs (POST requests).
- Bravo is currently free for up to three projects.
Knowing that Bravo can facilitate app store submission and understanding its future development roadmap highlights its value as a long-term design and development tool.
The ability to request an API build from Bravo to potentially publish the app on the App Store.
Key takeaways
- Bravo enables designers to build functional native mobile apps directly from Figma prototypes without writing code.
- The tool leverages a container system and Bravo tags to dynamically populate designs with data from sources like Google Sheets.
- Properly structuring Figma frames and layers is essential for Bravo to correctly interpret and build the app.
- Converting data sources into APIs is a key step in connecting designs to real-time information.
- Bravo preserves Figma's interactive elements and transitions, ensuring a seamless user experience.
- Beyond basic lists, Bravo supports various tags for advanced features like navigation, animations, and native device interactions.
- The platform offers a pathway to app store submission, empowering designers with end-to-end creation capabilities.
Key terms
BravoNo-codeFigma PrototypeNative Mobile AppBravo TagsContainerAPIGoogle SheetsAirtableXI TBravo Studio App
Test your understanding
- What is the primary function of Bravo in the context of design and development?
- How does Bravo use 'containers' and 'Bravo tags' to create dynamic app elements?
- What steps are necessary to connect a Figma design to data from a Google Sheet using Bravo?
- Why is it important to structure your Figma file correctly when using Bravo?
- What are some of the advanced functionalities that Bravo tags can enable beyond simple data display?