This error can cause you to waste a lot of time and prevent you from achieving the results you hope for! Before you start developing your site, use a design tool like Figma or Adobe XD to create a web design prototype for your site. We explain the benefits of always beginning the creation process with a web design tool like Figma!
The Advantage of Figma in the Design Phase (Experimentation Phase)
The first step is a time for experimentation, where you'll need to test different placements and configurations for your various elements. It's incredibly easy to do this with Figma, for instance, because it allows you to simply drag and drop elements without any coding, SEO considerations, responsiveness, or those kinds of development issues.
Webflow is a Development Tool
Webflow is a phenomenal tool for building websites. However, building websites requires a bit more structure, as you need to create the HTML and CSS structure (the code behind the no-code). Consequently, this takes significantly more time if you aim to develop with various configurations.
If you want to test two different designs for a section, for example for an A/B test, it will only take you a few seconds in Figma. In Webflow, it can take you several minutes!
Thus, Webflow is not ideal for testing web design concepts. It is perfect for developing the final version of your website. Moreover, in the experimental phase, everyone gives their input... and the feedback process is simpler on....
Feedback on the Design? Feedback Process
To create a successful web design, all stakeholders must communicate and share their ideas. One of the most advantageous ways to achieve this is through the use of Figma, as it serves as a central location where all these different pieces of feedback can be gathered, rather than having everyone send their own comments and suggestions to multiple places on the web.
Feedback on Figma
To leave a comment or note on a Figma file, all you need to do is click the button and type your message anywhere on the page! It’s as simple as that, and it doesn’t require any form of integration.
Feedback on Webflow
Leaving feedback on a Webflow project is a whole different story... The software doesn't allow it natively (because it wasn't designed for that? 😅 ). The process is thus more complex; for example, you will have to:
- Use external solutions: like markup.io, which allow you to leave comments on a web interface
- Record videos on Loom
- Take screenshots and report by section
In short, these solutions are less functional and less straightforward than simply leaving a comment on the Figma wireframe.
In Conclusion: Figma → Webflow
Using a web tool to design a mockup of your website before developing it has many advantages:
- More speed
- More flexibility
- Allows for different tests (A/B tests)
- Easy feedback process
Webflow excels at creating a responsive site, but not for prototyping. Our agency will advise you to start your design (design system) process on a prototyping tool like Figma, before developing a complete version on a CMS such as WordPress, Wix, or Webflow.
Want to learn more? Check out the tips from our Webflow agency on how to create an e-commerce site wireframe on Figma.
