The old ways of designing products and sites and apps are overdue for an overhaul. The new way of generating a working app directly from Figma, no code, is a game changer.
Design Thinking
Design Thinking is an iterative design process that allows you to develop solutions for your users by deeply understanding their needs, using design as the primary tool. It's an approach to problem solving that drives innovation through empathy, creativity and iteration.
The Design Thinking process consists of 5 stages:
Empathize (understand users)
Define (define user problems)
Ideate (generate many solutions)
Prototype & Test (create tangible models of solutions)
Reflect (evaluate ideas)
This provides a framework for creating products or services by putting the end user at the center of everything you do. It involves ongoing experimentation through sketches, prototypes and testing new concepts and ideas with real people.
Figma
Figma is a great tool for designing interfaces and implementing Design Thinking.
Figma has seen massive adoption and growth by allowing teams to visualize and collaborate on designs, becoming the de facto standard for organizations to design their apps. However, it remains a challenge to go the extra step and turn those designs into working applications, also known as design to development handover.
The goal here is not just having a good-looking prototype, but one that is fully functional with all components working together seamlessly in real time. But that’s hard…
The old ways of designing & developing products and sites and apps are overdue for an overhaul
The traditional approach to designing and developing products and sites involves painful handovers between both back-end and front-end developers and designers. This approach is inefficient, unsustainable and obsolete - either blowing out project costs and timelines, or limiting design and development teams to one maybe two iterations. This leaves them unable to benefit from Design Thinking's iterative approach.
There are a whole bunch of third-party Figma plugins that convert Figma designs to front-end code such as React, React Native, HTML, CSS, Vue etc. That’s only a small fraction of the problem and also introduces a couple of key challenges:
The developer or development team have to understand the thousands of lines of generated code so that they can get the user interface wired up to the backend database, including business logic and capabilities like being able to support offline first or other critical functional capabilities.
A lot of these tools are a one-way conversion to code or another platform with zero intent of keeping the design iterating in Figma. This means republishing due to even minor design changes is hard. For example, you may have to entirely replace screens that have already been wired up… that’s going to be a hard job for any code management tool like GitHub.
So while these third-party Figma plugins and conversion tools aim to help, they often hinder. Surely there has to be a better way?
The new way of generating a working app directly from Figma, no code, with the Buzzy Figma plugin is a game changer
The Buzzy plugin for Figma enables you to build production-ready sites or apps with a fraction of the team, at a fraction of the cost, in a fraction of the time. This means more iteration, which means more times around the Design Thinking life-cycle, enabling teams to build better products and more easily achieve product market fit (PMF).
Marking up the design for production can be done by a designer within Figma, no code required! When you then publish from Figma to Buzzy, the definition of the application (and its interface) is sent to Buzzy. So it’s not a code-generator - Buzzy handles the smarts of turning it into best practice code for each platform as needed. For example, for a responsive web app, Buzzy will generate the HTML code, and handle the data binding, flows and business logic.
If needed, custom components can then be added by a developer to meet the business and functional requirements - for instance, integration with custom business logic or 3rd party systems.
This means you’re only using expensive and clever development resources for the “hard stuff” and staying away from the basic stuff like front-end generation that’s hard to iterate on with other solutions.
Conclusion
I’m excited to see the ways in which Figma and Buzzy can be used to build modern products, sites and apps. The ability to generate working code directly from a Figma design is a game changer that will help developers all around the world.