Buzzy Documentation
  • Welcome to Buzzy
  • Getting Started with Buzzy
    • Getting Started Guide
      • 1. Starting with Buzzy AI
      • 2. The Buzzy Workspace
      • 3. Create a new app
      • 4. Preview and edit your app
      • 5. Manage your app
      • 6. Import your app to Figma
      • 7. Using Buzzy with Figma
      • 8. The Buzzy Figma plugin
      • 9. Creating a simple app
      • 10. Screens and navigation
      • 11. Forms, fields and data
      • 12. Data-driven menus & content
      • 13. Data edit and delete
      • 14. Search, sort and filter
      • 15. User login and registration
    • Buzzy AI or Figma first?
  • Working with Buzzy
    • Buzzy AI
      • About Buzzy AI
      • Kickstart with AI
      • Enhance with Figma
      • Extend with Code
      • Example prompts
      • Tips
      • Troubleshooting Buzzy AI
      • AI tokens and pricing
    • Buzzy for Figma
      • About Buzzy for Figma
      • Learning Figma
      • Creating a new app directly in Figma
        • Step by step version
      • Automarkup
      • Responsive layouts
      • Responsive layout checklist
      • Overflow and scrolling
      • Forms and fields
      • Logging users in to your app
      • Theming
      • Troubleshooting Buzzy for Figma
      • Plugin error messages
    • Buzzy Deployment & App Stores
      • Setting up your custom Buzzy app
      • Connecting your own server
      • Apple & Google App Stores
    • Buzzy Marketplace
      • Buzzy Accreditation
    • Buzzy Project Guide
    • Buzzy App Examples
      • Buzzy Templates
      • AI-Powered Chat App
      • AI-Powered Custom T-Shirt App
      • AI-Powered Strategy App
      • AI-Powered Stock Portfolio App
      • Golf Course Finder
      • Personal Finance App with Figma AI
    • FAQs
  • The building blocks
    • Datatables, Fields & Data
      • Introduction to Fields
      • Basic Fields
        • Text
        • Number
        • Date
        • Location
        • Toggle
        • Checkboxes
        • Checklist
        • Selectlist
        • Rating
        • Attachments
        • Images
        • Signature
        • Audio Recording
        • Embedded Link
      • Advanced Fields
        • Formula
        • Sub tables
        • Linked Table field
        • Button
        • Teams
        • Payment
        • Notification
        • Event
        • User Vote
      • Display Fields
        • Header
        • Display Text
        • Image
        • Divider
      • Metadata Fields
        • Author Name
        • Author Phone
        • Submitted
      • Filter Controls
        • Viewers
        • Tags
        • Condition
      • External Fields
        • IBM Connections File
        • Box File
      • Sort Fields
      • Formulas
      • Datatable to Datatable Relationships
      • Security and Access Control
      • Displaying a field based on the values of other fields
      • Hiding a field based on role using a display formula
      • Importing data from a text file
      • Importing data from a URL
      • Import data from Datatable
      • Export data using Chrome
      • Export data in Browser
      • Export data using Safari
      • Datatable Field Type - Cheat Sheet
      • Troubleshooting Fields & Data
    • Code widget (custom code)
      • Code Widget Fields - Advanced Guide
      • New Async API + React HTML Components
      • Examples
        • Image Galley Slideshow
        • Ratings Average and Distribution
        • Event Locations Map
    • Analytics
  • Troubleshooting
    • App Error Codes
      • Action Error
      • App Not Found
      • Component Missing
      • Component Not Set
      • Component Settings Error
      • Datatable Not Found
      • Datatable Not Set
      • Field Not Found
      • Field Not Set
      • No App Selected
      • No Context Name
      • No Screens Found
      • Runtime Exception
      • Screen Not Found
      • Screen Not Set
    • Troubleshooting Buzzy AI
    • Troubleshooting Figma
  • REST API
    • Buzzy REST API
      • Integrating 3rd party applications
      • REST API
        • login
        • createappwithprompt
        • MicroApp Data Operations
          • microappdata
          • microappdata/row
          • insertmicroapprow
          • updatemicroapprow
          • removemicroapprow
          • microappchild
        • User & Organization Operations
          • userid
          • insertteammembers
          • teammembers
          • insertorganization
          • insertteam
        • enforceteammembership
      • Node.js API Client
      • Datatable Rules
      • Datatabledata Tutorial
      • Integrating with Mailchimp
      • Python Access Datatable
  • Advanced Deployment Settings
    • Installation
      • Pre-installation Planning
      • Deployment
        • Introduction to deployment
        • Minikube install guide
        • AWS ECS Fargate install guide
        • HCL Connections install guide
        • Azure AKS install guide
        • Windows container install guide
      • Buzzy settings
      • Whitelabelling Buzzy
      • Certificates
      • Release Management
    • Performance and Reliability
    • Security
      • Platform
      • Users and Roles
      • Datatables
      • Audit Trail
Powered by GitBook
On this page
  • Import your AI-generated Buzzy app into Figma
  • Edit your AI-generated Buzzy app in Figma
  • Swapping your app's theme
  • Modifying a theme
  • Customizing UI components
  • New to Figma?
  1. Working with Buzzy
  2. Buzzy AI

Enhance with Figma

Refine and customize the app’s design, functionality, and workflows.

PreviousKickstart with AINextExtend with Code

Last updated 3 months ago

Purpose: Refine and improve the initial prototype.

How It Works: Customize the app design, functionality, and workflows by porting your app into Figma. Edit your app with Figma's design-centric interface and use the Buzzy Figma plugin to manage your apps functionality, data model and behaviour. .

Key Features: Add more advanced logic, improve UI/UX, manage your design and optimize for user-specific needs.

Outcome: A more polished app ready for initial user testing or soft launch.

It helps to be familiar with Figma, and have an understanding of how the Buzzy plugin works via our getting started guides. If you're unfamiliar with Figma and UI design, you might want to call on an expert via the Buzzy Marketplace.


Import your AI-generated Buzzy app into Figma

You'll need to import your AI-generated app into Figma. You can then edit and republish the app directly from Figma using the Buzzy Figma plugin.

Make sure you have a Figma account with the same email address as you've used for Buzzy.

Get the Buzzy AI Toolkit v2.2 here!

Prefer step-by-step written instructions? See the full process here.


Edit your AI-generated Buzzy app in Figma

You'll need to get familiar with how the Buzzy Figma plugin works - see the (legacy) "learning Buzzy" getting started guides here. A lot has changed but the basic principles and patterns still apply.

Buzzy AI apps are based on the Buzzy Figma toolkit, a design system built in Figma. It leverages Figma's awesome design capabilities such as reusable and customizable components, variables to control themes, flex-based autolayouts and more. It also includes additional interface components, layouts and entire screen design examples you can use to quickly add to and extend your app.

Once you're done editing, simply publish your changes to your live app, directly from Figma.

Swapping your app's theme

Modifying a theme

Customizing UI components


New to Figma?

New to Figma, or don't have design skills? You have 2 options - learn Figma, or bring in an expert! If you have access to a Figma designer, they can skill up with the Buzzy plugin; otherwise you might want to get in touch with a Buzzy expert via our Buzzy Marketplace.

Learning FigmaBuzzy MarketplaceLearning Buzzy - 'Getting Started' guide for the Buzzy Figma plugin
Note - the plugin now defaults to Wizard mode, so this is all a lot easier now!
Note: this video shows the v1 Buzzy AI toolkit - the new v2 has a simpler layout and even more design options!