I made my portfolio website in Framer AND Webflow - which is better?

okay we're doing it the design portfolio aka the personal website and I'm going to attempt to build two versions of my portfolio site in both framer and webflow to see which one makes the cut and which one I will ultimately choose to use there are three things that are important to me going into this number one I need to spend as little time as possible to build it number two Poppin so whether that's something flashy or exciting and number three flexibility it needs to be able to do more than display work but drive action be it inquiries or the ability to sell some products so for this challenge I'm going to create two different versions of the landing page we are going to have a Green version which we're going to build in framer and an orange version that we are going to build in webflow and I've spent a bit of time working on the figma file getting it all ready for auto layout so then we can then use each of the respective plugins to copy and paste into both of the website Builders so let's jump into framer and start bu building the first version so we've got the plugin up for framer and in theory we should be able to just run the plugin on the figma auto layout and copy and paste it into framer and give ourselves a solid starting point to work with so we've just run the plugin and it's actually done quite a good job of getting the design into framer so much so that I'm kind of getting confused between figma and framer which app I'm in but first thing that I've noticed is uh the brake break points are a really key piece here I actually like the way it shows you the break points side by side however there is a little bit of a a thing going on here with the responsiveness um I feel like I need to make everything 100% width and this is where kind of understanding web principles comes in a little bit but the break points are jumping between each other quite um drastically and I think that's because the auto layout plugin hasn't quite nailed um the transition into frame but it's nothing that we can't solve with some 100% widths etc etc so we've added a nav we've basically built the main layout of the top section of the page and I've even gone as far as working on the CMS pulling in some of the items into the homepage and trying out a little hover effect to preview the work on rollover and it's all working pretty good um being able to do this quite fast which is great the other thing that's kind of cool is if you press this little play button right here apparently this is the preview of the actual site and really what the actual site would look like I imagine if we press publish if we go into full screen mode here you can see that this is now feeling and looking responsive so I think this has done a pretty good job so also a really cool tip is to use the reloom library now this works with both web flow and framer but essentially the Reon Library gives you a bunch of readymade components that you can use in figma all auto layout ready and you could literally style those with a style guideline stick that on it and then you would pretty much have a page which looks and feels like the website that you would want so when you copy and paste that into each of the uh Web building apps then you should actually be at least halfway there so that's really cool I love the reloom library so who is framer for I would say framer is a pretty good starting point for anyone who's a beginner or relatively new to building websites like it has a lot of the things straight out the box and its similarity to figma will make it really really familiar so I think this is a great starting point um the animations and stuff are relatively easy to achieve albeit the whole thing feels a little bit in my view strip back and less professional like I don't feel like I'm actually building a website and to the point where I actually think it's only a matter of time before figma just swallow this in and you can actually just press play on a figma file and then you'll end up with a website over I think it's a great option for a beginner but it does feel like it lacks some of the functionality that I would want certainly in the kind of product sections and anything to do with e-commerce although there are obviously ways that we could do that through kind of hyperlinks to stripe products Etc so other features when it comes to the CMS yes there is a CMS there is ability to have multiple pages and this works relatively well and as expected I don't think there's too much cleverness going on here I don't feel like it quite has the level of flexibility that I need but it will certainly do the job what I do really like about fra is the ability to see multiple break points next to each other it's good to see how this thing will respond and that kind of overview part of figma which you get within framer is something that I do really think is cool so I'm going to try and take the header section from figma and see what it feels like to go straight into web flow from figma so we are literally jumped in figma here and we are copying the component using the figma to webflow plug-in and we are literally just going to paste it straight in here and see how it uh performs so it looks like it's done a pretty good job um just a little bit of Tiding up on the padding and the margin and yeah this is this is this is pretty good I'm just going to clean up the Styles here and then check the mobile responsiveness out and give that a little bit of a cleanup so now we can go ahead and publish this and then we can check it out on the phone and yeah as you can see um so yeah just needs a little bit of work and it's all good to use webflow you really need to understand some of the basic foundational principles of web design such as flexbox and grid but that being said if you've been working more recently in figma the concepts of stacks Auto layout and flex xbx do translate quite well into webflow and yes there is a steeper learning curve and you probably won't go from first exposure to webflow to a finished portfolio site in a few hours like with frame mile what it does do is give you some other fantastic flexible options that being said web flow is I would say for an intermediate and up so one of the things that I love to do when I'm designing is use some of the tools that are available out there to get a fast track and one particular resource I like in general is a guy called Timothy Ricks he has this framework called lumos which is both a figma file and a style guide in web flow and you can literally download that thing and apply your fonts to the style guide and it will update everything literally both in the figma file but also you can then take that into webflow and in theory like with fra you should be able to do that in figma and then use the figma to webflow plugin to copy and paste all of those components there are thousands of templates in the web flow Community lots of people have given the workout for free so there is literally a free starting block for you to go and build a website from so what I like about webflow as someone who's had quite a bit of exposure to it is the flexibility of being able to build you can literally build really high-end websites that have a lot of functionality like we're talking prle apps are possible with webflow we've used web flow for some of our projects for our business reboxed and we've literally built a full-on app using wisdom webflow I love it for its ability to really push the levels of what is possible with web development without writing lines of code or some lines of code if you're looking to do something sexy and slick in webflow it's completely possible and the interactions while a little bit fiddly do give you some incredible options for making that is pop the thing I like the most about webflow is its expandability for me building a website is not just about a couple of landing pages and maybe a Blog it's about what's coming in the future so if I want to start building things like courses or paid memberships or paid communities all of those things can be done with webflow and I think as a designer in the modern era having that flexibility to productize yourself on a platform like webflow makes it the number one choice for me and why I'll be using it for my website

Channel: Matt Thorne

Views: 16,624

Keywords: framer vs webflow, webflow, framer, graphic design portfolio, portfolio, site of the day, css awards, review, website builders, best way to build a website 2024, best way to build a portfolio 2024, webflow development, website design, Design portfolio, personal brand website, personal portfolio, Webflow tutorial, framer tutorial, portfolio tutorial, How to build a portfolio

Id: qWJwAuYlZkk

Length: 8min 25sec (505 seconds)

Published: Thu May 16 2024