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. The best choice depends on the type of app you’re building, your design skills, and your 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. It's also good if you need a very quick (discardable) proof of concept. Here’s a breakdown of the pros and cons:
Pros
Efficient Data Modelling: 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.
Subscription required: Requires a paid Buzzy AI subscription, and uses AI tokens.
Figma-First Workflow
Starting in Figma is free and offers far more control, especially if you have advanced design expertise and a working knowledge of Buzzy. With the right skillset, this approach will save time in the long run.
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.
Full UI Control: Starting in Figma avoids the need to redesign AI-generated screens.
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.
Free to use: Using the Buzzy plugin to manually create and edit Buzzy apps directly from Figma is free and requires no paid AI subscription.
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
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.
Last updated