Buzzy AI or Figma first?

When creating an app with Buzzy, there are two primary workflows to choose from: starting with the AI Wizard using prompts or designing directly in Figma with all screens and interactions. Both approaches have unique advantages, and the best choice often depends on the type of app you’re building, your design skills, and familiarity with the Buzzy ecosystem.

AI Wizard-First Workflow

Starting with the AI Wizard in Buzzy is ideal for complex, data-driven apps, giving you a foundational structure before diving into Figma for detailed design. Here’s a breakdown of the pros and cons:

Pros:

• Efficient Data Modeling: The AI Wizard generates complex data models quickly, saving hours of manual setup.

• Rapid Screen Generation: The AI can produce multiple screens at scale, ideal for validating workflows and data relationships.

• Time-Saving Imports: For apps with many simple screens, importing from AI to Figma can save time, even if you discard or redesign a large number of screens.

• Good Starting Point: Ideal for users with limited design, Figma or development skills.

Cons:

• Limited Customization in AI: Customizing screens generated by AI is limited, so Figma is essential for further refinement and taking the app to production

• Basic UI Design: The AI-generated UI is functional but minimal, covering only part of Buzzy’s full layout and design capabilities.

• Toolkit Constraints: Importing AI-generated screens to Figma ties you to the Buzzy toolkit, which may not suit if you have to use a different design system.

Figma-First Workflow

Starting in Figma offers far more control, especially if you have advanced design expertise and a working knowledge of Buzzy.

Pros:

• Flexible Design Systems: You can use any design system that follows best practices.

• Enhanced UI Accuracy: If you do use the Buzzy toolkit, it ensures alignment with Buzzy’s practices and patterns.

• Automated Markup with Buzzy’s Automarkup: This new feature provides a massive head start in turning a Figma design into a Buzzy app - and it can generate a preliminary data model too!

• Works with Figma's First Draft: Figma's new AI design-generation is awesome! It tends to follow good layout practices that work well with Buzzy, even if it might require some tweaking.

• Best of Both Worlds: Combine First Draft with Automarkup to really speed things up!

• Full UI Control: Starting in Figma avoids the need to redesign AI-generated screens.

• Advanced UI Techniques: Figma’s responsive navigation and other intricate UI hacks offer additional customization that AI alone can’t replicate, such as this responsive nav hack!

• Suits a Design-First Approach: If you're a designer who naturally tackles things from a UX/UI perspective first , or need to consider client communication and presentations, this fits well with a lot of project workflows. A contrast might be a developer-first approach where you create and refine the entire data model, integrations and functional requirements up front before considering UI.

Cons:

• Upfront Design Work: Design work in Figma requires a time investment before bringing the design into Buzzy.

• Advanced Skills Needed: Strong Figma and UI/UX skills, as well as Buzzy know-how, are essential.

• Potential Buzzy Limitations: Some design elements may need adjustment for optimal Buzzy compatibility. Familiarity with Buzzy's approach, limitations and workarounds (such as code widgets) can save a lot of time and frustration.

Building Buzzy Skills

Whether you’re using Buzzy to generate a Figma file or bringing your own, we highly recommend building core Buzzy/Figma skills through the Getting Started Guide. Completing the associated Accreditation program provides a foundational understanding and hands-on experience to "drive" the Buzzy plugin effectively, extending your design into full, functional apps.

If you’re interested in becoming a Buzzy partner, check out the Buzzy Partner Marketplace—with accreditation, we can start referring customers to you! You might also want to explore our Affiliate Program for additional opportunities.

By developing expertise with both the AI Wizard and Figma workflows, you’ll have the flexibility to choose the best approach for each project, maximizing efficiency and creative control at every stage of app creation with Buzzy.