Exploring Google Stitch and Figma First Draft: A Quick Comparison

In the world of no-code tools, startups, and AI magic, Google Stitch has recently released its beta version. Today, we'll take a quick dive into what Google Stitch offers and how it compares to Figma's design capabilities. We’ll explore generating designs, integrating these into Figma, and even into Buzzy for a seamless transition from concept to code.

Exploring Google Stitch

Figma's new release, Stitch, aims to elevate design offerings with its beta functionality. Starting with a simple prompt, we generated a CRM application featuring a dashboard of sales, customer tasks, and deals set to close. The design was quite impressive, especially given it was generated so swiftly. However, the current beta doesn't support exporting in high fidelity to Figma, which is a limitation. Nevertheless, I managed to copy the generated design into Figma, which was a breeze, albeit with some layout issues.

While perfect for a lo-fi prototype, the exported version needs improved structure if it’s to be useful for developers. For instance, repeating elements lack a parent frame, critical for dynamic operations in code. Despite being a promising visual start, turning this design into a functional code demands additional work.

Figma Versus Google Stitch

Switching gears to Figma's first draft, I tested the same prompt. The result appeared more refined, perhaps indicative of where Google aims to take Stitch. Notably, Figma's structure is developer-friendly, encapsulating elements appropriately within frames and offering intuitive layer names. This thoughtful setup significantly aids transitions from design to development.

Leveraging Buzzy for Integration

Using the Buzzy plugin with Figma's design was insightful. Our Auto Markup—aided by AI—generated a mini product requirements document, or brief, and crafted a data model for the CRM application. While Buzzy did well in starting this process, it struggled with markup accuracy due to the unstructured Figma file.

Renaming frames and reorganizing elements in Figma could ease future transitions, enhancing file maintainability and ensuring that the changes update seamlessly across web or mobile applications.

Conclusion

Google Stitch’s beta release excites us about the future of design technology. Still, the current iteration requires developments, particularly in layer naming and structural organization, to streamline code conversion. As technology evolves, we look forward to further updates enhancing design workflows and fostering innovation in app development.

Thank you for exploring this journey with us—from idea to a functional app, all with speed and creativity.

About the Author

Adam Ginsburg is Founder & CEO of Buzzy. Buzzy is an AI powered no code platform that allows you to turn an idea into an app, instantly. Try it here. In addition to working at Buzzy, Adam is a husband, father and surfer. Adam was a co-founder of Aptrix, which IBM acquired and became IBM Web Content Manager.

About Buzzy

Buzzy is an AI powered nocode platform that allows your to start with a prompt and generate a full stack application in minutes. You can extend the solutions using custom client or server-side code, that can be written by hand or an AI co-pilot. In addition to generating the application Buzzy allows you to generate a Figma file, that you can customize the high-fidelity design and re-publish the changes instantly, without having to write any code. Rego for Free Buzzy webinars here