Learn BRAVO-STUDIO with Real Code Examples

1. Design the Todo app UI in Figma with input field, add button, and list display.
2. Import the Figma design into Bravo Studio.
3. Connect app components to a REST API or local data source for storing todos.
4. Configure interactions:
    - Add button -> append task to data source.
    - List component -> display tasks dynamically.
5. Preview live on device.
6. Publish for iOS and Android.

Demonstrates a simple Bravo Studio app with a Todo list created from a Figma design, allowing users to add and view tasks with API integration.

1. Design counter UI in Figma with Label and Buttons '+', '-', 'Reset'.
2. Import design into Bravo Studio.
3. Bind Label to a numeric field (API or local variable).
4. Configure '+': increment value.
5. Configure '-': decrement value.
6. Configure 'Reset': set value = 0.
7. Preview on device.

A simple counter app built from Figma UI, incrementing, decrementing, and resetting values using API or local state.

1. Design Login UI in Figma with username and password inputs and a 'Login' button.
2. Import into Bravo Studio.
3. Connect input fields to API authentication endpoint.
4. Configure 'Login' button: send credentials -> navigate to Home if success.
5. Show alert if login fails.
6. Preview on device.

Implements login form using Figma design and API authentication.

1. Design UI with Text Input, Add button, and Notes List in Figma.
2. Import design into Bravo Studio.
3. Connect List to API or local database column 'Notes'.
4. Configure 'Add' button to append new note.
5. Enable delete/edit actions via interactions.
6. Preview live.

Displays and manages notes using Figma design and API or local database.

1. Design stopwatch UI: Label for time, Buttons 'Start', 'Stop', 'Reset'.
2. Import design into Bravo Studio.
3. Bind Label to numeric variable 'Seconds'.
4. 'Start': trigger timer action to increment 'Seconds' every second.
5. 'Stop': stop timer.
6. 'Reset': set 'Seconds' = 0.
7. Preview live.

Simulates a stopwatch using Figma UI and timers in Bravo Studio.

1. Design UI in Figma with Switch component and Label.
2. Import into Bravo Studio.
3. Create boolean variable 'isDark'.
4. Bind Switch to 'isDark'.
5. Configure interactions: Change background and text colors based on 'isDark'.
6. Preview live.

Switches between light and dark themes using Figma UI and boolean variable bindings.

1. Design calculator UI in Figma: Buttons for '+', '-', '*', '/', Text Inputs for numbers, Label for result.
2. Import design into Bravo Studio.
3. Bind inputs to variables 'Num1' and 'Num2'.
4. Configure button actions to calculate result and store in variable 'Result'.
5. Bind Label to display 'Result'.
6. Preview on device.

Four-function calculator using Figma UI and Bravo Studio actions.

1. Design UI: Text Input for city, Label for temperature, Label for condition.
2. Import into Bravo Studio.
3. Connect API to fetch weather by city.
4. Store results in variables 'Temp' and 'Condition'.
5. Bind Labels to display data.
6. Preview live.

Displays weather info using Figma design and API integration.

1. Design List component in Figma with Image element.
2. Import design into Bravo Studio.
3. Bind List to API or data source with image URLs.
4. Configure 'Add Image' button -> append URL to data source.
5. Preview on device.

Displays images from API or sheet using Figma UI and Bravo Studio list components.

1. Design UI with Button 'Scan QR' and Label for results.
2. Import into Bravo Studio.
3. Add QR Scanner action connected to button.
4. Store scanned data in variable 'QRResult'.
5. Bind Label to 'QRResult' to display data.
6. Preview live on device.

Scans QR codes using device camera and displays results in Bravo Studio app.