Why I switched to Framer from Webflow

so framer or webflow I've been getting this question a lot lately while yes webflow holds a mantle to no code web design for the past several years frame on the other hand just last year did a well-intended pivot for the first time designers can create a beautiful website collaboratively on a free from canvas I mean this is the most ideal designer workflow no different from figma sketch and other design tools of course now as a SAS founder I'm currently running my main VC backstartup glorified.com with a site built on webflow last year we moved to webflow from WordPress and at the time it felt like the best decision ever our pages are shipped faster design was more pixel accurate and content scalable by the easy to use CMS but guess what as of last month we're moving again to framer this time now I don't think my opinion will be biased as only just last year our whole team was like webflow all the way but for our specific use case we truly believe framer is the better choice now it might not necessarily be the same for your use case and I'll unpack all of this in this video so that you can make the right decision for your own business and no do not ask chat gbg because they're still catching up on all of this new information just before I get into it if you're new to this channel I'm on my fruit designer turn founder of multiple Tech startups and in this channel I share all my learnings around building beautiful products and trying my best to achieve breakthrough growth let's get into it now honestly to make the choice between webflow and framework really it comes down to if your team is design LED or development-led when it comes to your website ecosystem which is the biggest marketing asset today for any company but before we get into this first let's establish the difference between webflow and framer as website Builders starting with webflow now webflow has been around since 2013 huge names have been an advocate for them ever since they've been labeled the no code web Builder tool for designers and even web developers they've carved out a special place in the market for beautifully built fully custom websites and going from figma to webflow is an almost industry standard workflow giving you unlimited possibilities however the workflow is not far off from many web Builders out there like many web Builders you can drag and drop components and solely hack through each section making sure it's fully responsible the key difference from other web Builders out there is that with webflow you can control Advanced set of properties spanning across elements layouts and animated interactions without a doubt it also has a lot of mature features for developers web hooks API adding your own layer of custom code to pretty much get any desired results you need tons of Integrations have been introduced over the years with a huge Community built around it offering both custom Solutions and templates there's literally nothing stopping you from building complex web apps or e-commerce Solutions with webflow it's also got a great admin friendly CMS and direct on-site content editor so after your web design team builds a responsive website they can easily hand off to content writers or support teams to edit any of the content on the site now designers who are generally non-coders can definitely learn and build websites on webflow but despite being labeled as no code the more you use webflow the more you start to realize really it's a low code solution a lot of the more complex components often require some level of HTML CSS or JavaScript action to give you the desired result if So eventually you will rely ion developers not just designers and this honestly affected us as a SAS company as we have primarily designed LED on a website ecosystem as all of our devs are focused on building a custom app on a separate domain now I'll get more into this later now let's talk about framer now framer started out as a prototyping tool and Chachi PT got that part right but just last year they pivoted the canvas technology to actually publish live responsive websites with their react code framework they claimed to be no code and proud so let's explore that for a moment on the service level it has many similar features to webflow you can start from a drag and drop components Library it's got responsive breakpoints with a preview system and like webflow you can control pretty much any property you can imagine including adding animated interactions it also has a very user-friendly and deeply customizable CMS perfect for your content team however at this point they're still very early in terms of their developer features like custom code and components apis web Hooks and third-party Integrations with just a handful of direct Integrations available right now although the team is moving very fast with expanding these features alright so far for what we've explored both frame and webflow seem quite similar at face value but really what's important about framer and the biggest differentiator and the reason why the design community on Twitter are literally going bananas over it churning out templates like the world owes the money which is the same reason why companies like zapier and Lottie files have switched over to them is primarily because of the workflow experience not only can you design a fully responsive website without any development knowledge the workflows are very similar to your favorite UI ux design tools like figma you design on a freeform canvas with very similar editing and prototyping workflows and really that's what makes a difference having all of your different screen sizes for you to preview at the same time while editing your website is just a game changer for designers coupled that with an instant preview mode you're unstoppable and it's almost like they took all the nuanced language of the web properties world and made it so much easier for designers to understand for most UI ux designers in fact the learning curve on framer is very minimal and hence why you can see the parade of designers publishing websites and templates at Lightspeed in fact not only can you design from scratch directly on the frame of canvas but you can also copy your figma designs with a simple one-click plugin the first time I use it really blew my mind away now yes website also released a figma plug-in but the fact that framer's interactive component creation process is so similar to figma the process is just a lot more seamless versus using webflow Styles and classes systems for their components which is powerful but takes a little bit more onboarding for designers in my opinion so workflow wise frame is definitely so much better and faster for designers but is it really no code I still think framer is low code honestly but maybe it's the closest low code to no code that you can get ultimately right now at least both on webflow and framer you can only get so far with their no code tools which is to primarily build a site with interactions functional interlinking menu CMS Etc which is perfect for most people if you want to build a simple personal site blog or marketing Pages or even a basic e-commerce store if you handle the checkout process externally I've actually got a separate framer tutorial video where I created an e-commerce store that you can check out but if you need more advanced features you will have to lean on either Integrations or developers that's inevitable with both webflow and framer in which case if you really need that added functionality right now at least webflow is the better choice you can add custom Solutions of framer with their react code components and code overrides but it's a little bit limited and the apis are still early in the making but for us at glorify where SAS based design tool on the cloud it's perfect for example with a custom code component we built a search bar for our CMS content on our website and very soon we'll be creating a template search engine directly on our frame of site that pulls data from our backend via their API and we're working with the framer team to bring this to life so yes the develop tools are early but it's only a matter of time before it starts to become extremely mature okay so let me summarize the pros and cons in a simpler way with webflow you can either be design LED or development-led with design lead designers start on figma to mock up the entire website design with all the mobile responsive layouts they then transfer that over to webflow and rebuild it to a fully responsive website with basic functionality such as menus CMS and animated interactions they can then pass that over to a developer to add more complex custom coded Solutions the advantages of this process is that from going from figma to webflow generally results in better pixel accuracy and design and of course there's less back and forth between the designer and developer since the design is handling pretty much all of the responsive web design process now the problems of this process is that designers can be left exhausted because they're doing most of the heavy lifting and it could leave developers on standby now you can skip the figma step and go directly on webflow but I don't recommend this unless you're starting from perhaps a template since designing directly in webflow can generally take longer to get the design right and it's a acceptable to poorer design choices webflow is limited in terms of the visual design Freedom whereas figma allows you to test different design theories before you know rebuilding that on webflow you can also go with the development-led workflow with where ux designers start on figma and this time pass it over to the development team so that they can rebuild the entire design on webflow using the no code tools now the advantage here for developers is that a lot of the heavy lifting is done for them with the no code tools versus them having to code everything from scratch from there they can seamlessly transition into the custom coded step without any handoff in between now the disadvantage of course with this process is that there could be more back and forth between the designer and the developer and you know they have to be 100 alignment between these two teams resulting in potential misalignments now let's go and explore framer with framer there is only a design-led workflow since it's an infinite freeform canvas this is what designers are more accustomed to again here designers start on figma with the uix design process to mock up the website design you can then use the figma to frame a copy paste plugin to transfer the entire design on figma directly into framer seamlessly and from there the designer can continue moving forwards using framers no code tools to publish the website fully responsive with all of your basic features again menus animated interactions your CMS Etc if they need more complex custom coded solutions they can pass it over to the development team however again as mentioned with framer it's still Limited at this point the advantages with this process generally going from figma to frame results in much better pixel accuracy almost 100 pixel accuracy since the logic of properties between figma frame are almost the same unlike webflow you don't have to do the entire mobile responsive layout on figma and then again on framer instead with this workflow on figma you just design one screen size you transfer that over to figma and do all the different responsive layouts on framer using their breakpoint system this makes you save so much time it's insane now again with framer you can skip the figma step and because it's quite similar to figma it gives you that visual design process to explore different design options before publishing your site and in fact many people are adopting this workflow going directly to framer there's a few pros and cons for example on figma in terms of design tools there's so much more freedom so you can not only design your website your app as well you know ads and so much more marketing assets it's much better for the exploration and design systemization but if that stuff is not as important to you then you can design directly on framework so let's go through all the pros and cons between website and framework one more time with framer being design LED it's so much easier to get 100 pixel accuracy going from figma to frame especially you don't have to do the mobile responsive design on figma and then again on framework you just do it once on framer and the freeform infinite canvas with all of your screens in one place gives designers so much better visual Clarity and just a faster design process generally it's much more easy to collaborate because of this now the cons of course is that it does require designers and it's is lacking an advanced developer features at this point now with webflow the pros is that the Noco tools are built for both designers and developers so that's clearly an advantage it's super mature in terms of the developer features and resources and it has a much larger Community with tons of templates now the problems with that flow is that it takes longer generally to get pixel accurate design going from figma to webflow since the Logics are completely different in terms of properties and you do have to do the mobile responsive design both on figma and then again on webflow it's a drag and drop Builder which means that it's generally quite a slower workflow for designers now to finalize overall if you're a design LED company and you have an important collaboration that combines the marketing team with the design team so that you can launch beautiful landing pages for campaigns super fast you will save so much time with framer getting your pages up and running it goes without saying as well that if you're a solar designer that needs a personal site it's also a much better option but if you develop a LED and you have enough free development resources in your team and maybe Advanced functionality is more important to you than knocking out Pages super fast perhaps you need more complex e-commerce or web app type features on your site like a booking system then webflow right now at least is the better choice that's it for this video I hope it helps you make the right choice for your company in fact I'd love to hear your thoughts about webflow versus framer and if this is something you're trying to decide internally let me know your final choice in the comments below but for now keep building

Channel: Omar Farook | Building Tech Startups

Views: 78,914

Keywords: tech, technology, software, tech startup, business tips, tech entrepreneur, ui/ux, ui/ux design, user experience, user research, framer, web builder, web design, webflow, figma, prototyping, ceo, founder, nocode, microsaas, team, seo

Id: m9Ne7-xmcHI

Length: 12min 17sec (737 seconds)

Published: Thu Mar 23 2023