Webflow vs. Framer: bridging the coding gap

For a long time, unless you were a so-called ‘Unicorn,’ designers were limited in their ability to truly design end-to-end. There would always be a point where as designers we would have to hand over our creations to an engineer and guide them through the final build from afar, much to the annoyance of our engineering colleagues.

However, over the past few years, several platforms have emerged with the goal of bridging the coding knowledge gap that afflicts most designers. These platforms, often referred to as no-code/ low-code solutions, enable non-engineers to create websites with minimal to no prior coding experience.

Starting out as basic templates with limited CMS options, these platforms have evolved into sweeping, customisable canvases. While they might not yet offer the advanced functionality, which is exclusively implementable by an engineer, they play a significant role in democratising website creation.

From a designer's perspective, these platforms' flexibility and control enable us to continuously adjust and refine design decisions at various stages of the development process. This allows designers to adopt a more agile and iterative approach.

At YLD, we've observed a growing interest in these no-code/ low-code solutions from both clients and our team. Knowing which one to go for is vital because it can be costly for your organisation to pick one that doesn’t suit the needs of your business. Therefore, the YLD design team embarked on an exploration to determine the optimal no-code/ low-code platform for potential adoption and future recommendations.

‍The Current Landscape

We began our investigation by defining the key areas for evaluation: Overall Functionality, Ease of Use, Animation Capacity, CMS Scope, Support Resources, and, most importantly, the platform's ability to accurately recreate our designs from Figma with minimal effort.

With these considerations in mind, we took a cursory glance at the existing landscape which led us to discount popular platforms like Wix and Squarespace. Notably, Wix has some limitations in its design flexibility while Squarespace has limited support for custom code and third-party integrations.

Our focus eventually led us to the most popular industry-standard platforms, commonly favoured by designers: Webflow and Framer, as they both excel in their respective niches:

• Webflow: Offers comprehensive control and customisation of both design and content.
• Framer: Emphasises eye-catching interactivity and intuitiveness over functionality.

Despite these differences, both platforms offer simple drag-and-drop interfaces for designing UI elements, reusable components, robust content management systems (CMS), and the implementation of custom code. However, as we began to recreate some basic Figma designs, different pros and cons started to emerge.

Webflow Findings

Pros

• Structured around a highly customisable and intuitive CMS, enabling the easy creation of content-rich pages. Its sophistication enables powerful features like multi-referencing to enhance search and filtering functionality.
• Offers a Figma plugin that allows you to transfer designs created in Figma into the platform. However, one of the technical limitations is that components need to be correctly constructed with Auto Layout for a successful transfer, which might not always be accurate.
• Webflow’s styling is based on classes, essentially CSS styles. This allows us to store styling information that might be applied to components, such as padding, spacing, or colour. It enables us to maintain consistency throughout the project while facilitating quick cascading visual updates.
• Custom Code blocks can easily be added to your website using the drag-and-drop ‘Embed’ element.
• Supports the integration of more unique animations through After Effects and Lottie.
• Utilises two modes: 'Designer Mode,' where the design of the website can be altered, and 'Editor Mode,' which allows users to manage and modify content without the risk of breaking the design. This second mode is particularly useful for non-technical users.
• Supported by substantial learning resources and tutorials available at Webflow University.

Cons

• Webflow's interface is highly intricate because numerous items are represented only by icons rather than text. Its interface is also a departure from tools that designers may be familiar with, such as Figma or Sketch. Furthermore, the platform behaves differently with no direct manipulation of elements on the canvas. Even the beneficial Classes present a learning curve because they may require some learning time as they follow a more traditional code-like structure.
• While code can be easily added, only HTML, CSS in <style> tags, and JS in <script> tags are supported as embedded code.
• Unlike other collaborative design tools, only one user can design and build on the platform at any given time. This limitation can seriously impact the speed of delivery and efficiency.

Framer Findings

Pros

• Framer offers a powerful Figma plugin that allows you to transfer designs created in Figma into the platform, ensuring an almost 1:1 match.
• The platform’s clear interface would instantly be more familiar to designers as it has a similar structure to platforms like Figma and Sketch. Framer also allows for direct manipulation of elements on the canvas, speeding up delivery and giving designers room to experiment.
• It allows you to extend beyond its native functionality by using React and JavaScript.
• Framer places great focus on animation and interaction, offering powerful out-of-the-box animations and integration with dotLottie and Lottie.
• Supported by substantial learning resources and tutorials available at Framer Academy.

Cons

• While Framer offers a robust CMS, its limitations prohibit more powerful functionality such as multi-referencing fields – a useful feature when categorising and filtering content. 
• Features such as forms may potentially require custom code if you choose not to use integrations with other platforms.

Our Observations

Any decision or recommendation between Framer and Webflow depends entirely on the purpose and nature of the website being created. While both offer custom code that allows you to go beyond their native confines, there are clear use cases that would benefit more from each of the respective platforms.

Webflow is a great option for more complex and sprawling websites because of its established presence and extensive functionality. It poses a great option if the nature of your business is in e-commerce or any other business that requires content-rich websites. However, this same complexity may impact the speed of the process, as designers are likely to require additional time for precision in replicating designs and familiarising themselves with Webflow’s intricate interface.

On the other hand, Framer allows for swift workflows in delivering smaller websites because of its intuitive interface and nimble Figma plugin. However, some of its limited native functionality may potentially impede your ability to replicate complex flows and functionality.

The ultimate decision may depend on additional factors such as their respective costs and the literacy of any clients or stakeholders who will ultimately be responsible for the final website and CMS.

Our key takeaway is that it really comes down to prioritising either complex functionality (Webflow) or rapid delivery (Framer). In short, Framer is more intuitive but less powerful, while Webflow is more powerful but less intuitive.

Final thoughts

Our initial investigation into no-code and low-code platforms gave our design team a renewed appreciation for the complexity and craftsmanship involved in engineering. These platforms offer increased speed and enable designers to bring their ideas to life without coding knowledge, yet they are ultimately constrained by inherent limitations. No-code and low-code platforms are valuable for designers, especially those without dedicated engineering support, as they enable the creation of simple websites i.e. marketing and portfolio websites. However, the expertise of a skilled engineer is indispensable for developing more complex and custom solutions

If you need any engineering or design support, contact us to discuss how we can help you.