Why You Should Never Start Your Web Design Process in Webflow (Start in Figma)

Hosting With Webflow – Why You Should Never Start Your Web Design Process in Webflow (Start in Figma)


Why You Should Never Start Your Web Design Process in Webflow (Start in Figma)

Hosting With Webflow

One of the most common questions I get on Youtube and Instagram is – “Why do you use Figma? Why don’t you just start in Webflow right away?”.

The reasons are innumerable. For starters, Webflow is a development platform (even if their canvas is called the “Designer”). It’s meant to “build out” your website. It’s meant for you to bring an already-existing design to life. Webflow allows you to bring logic to your web design.

Starting with Webflow can considerably slow down your entire process as design experimentation can be a real pain in the Webflow Designer. Not only do you have to worry about what the design experiment is, but you also have to think about how you’re going to execute it. Whereas on something like Figma, Adobe XD or Sketch, you can seamlessly move, change and alter things fluidly and with ease.

Start with Figma/XD/Sketch and thank me later.

Timestamps:
00:00 Intro
00:44 3 main reasons
1:50 An example
5:15 Getting feedback


Learn how to build custom websites with Webflow FAST:


Find me on other social media platforms:
Instagram:
Twitter:
LinkedIn:

Gear & Book Recommendations:

#webdesign #Webflow #Figma

Thanks for watching the video!

you search:

Hosting With Webflow

Why You Should Never Start Your Web Design Process in Webflow (Start in Figma)

45 thoughts on “Hosting With Webflow – Why You Should Never Start Your Web Design Process in Webflow (Start in Figma)

  1. I finally realized as a designer why I have never been able to sit down and finish a redesign on my portfolio website… It takes me way to long to test an idea, where in Illustrator, it takes me 5 seconds to make the same change visually. I need to do quick iterations in a program I have mastered that is only visual. Then, once happy with it visually, build it to be functional on Webflow (while keeping in mind I might need to make compromises to the design in the process of rebuilding it in Webflow). This was so helpful, thank you!

  2. Big miss: the reason you design at all before developing is because regardless of how experienced you are and how good you get, it's always easier to see how you need to compose and structure elements and containers when you can see it before it's built.

    Coming from coding, I fortunately didn't have a platform that lured me into thinking that I didn't need a separate design program. However once I sat down to learn figma, I really understood the benefits of using such a program. So this videos content was pretty obvious to me since webflow is as close to code as you get without code. Though code is still easier to develop in, in the face of the sum of all of webflows marketing.

  3. Thank you for this video. Just when I was starting to doubt that I started with Adobe XD and that I should have learned Webflow instead… (newbie). I wonder if in any of your videos is covered a topic, how to use our personal experiences and skills we already have in designing and building a website, instead of constantly searching for a new knowledge and how it "should" be done. I have this concern in my own project. What I mean by that is that I am a comic designer and illustrator and isn't a narration on website something that can be thought of like a comic, painting, book, story..? I saw websites that were designed like a poster or a game… I hope I am not making a big misunderstanding here. I look forward for your reply (or someone else experienced in this area of design!) but thank you anyway!

  4. Webflow does a great job of making you think their development tool is a design tool. It’s so fun to create if Webflow it can get tempting to jump into it too quickly. Follow your process and save time and hassle! Thanks Ran.

  5. I agree that a prototyping tool like figma helps you being fast and precise about your visual ideas.

    On the other hand. I often start simultaneously building the data structure of the site in webflow. Content First with data driven design. This helps me in two ways. First I find new Ideas to show my data/content and at the same time it gives me (and my client) a headstart for the content. But sometimes it's hard, not to start designing – but it's worth holding those feelings back and design in figma.

    And if the majority of data is stored in collections. You can mess with it without the risk of loosing it.

  6. what do you think of anima with figma they have a tool that publish websites directly can you explain that. and is it better work from figma and draw again on webflow ?

  7. THIS!! It's nice to hear folks (you and some others) finally talking more about how important this is! I hope beginners see this video (and I do count myself as a beginner, though I already always design in Figma and develop in Webflow) because this will save them so much heartbreak hahah.

  8. I disagree. We personally have a live low-fi wireframing session first with the brand and iterate/amend on those for sign off. Then jumping into Webflow and creating there, I find this much more efficient than creating the high-fidelity UI twice (in design tool then again in Webflow). Also, much easier in Webflow when adapting for different breakpoints. Designing directly in Webflow also allows you to think like a developer to understand what can and cannot be achieved in build. Client feedback on these generally is minimal as you have already signed off the wireframes, therefore it's just css changes which we've already created in the style guide. It's much more efficient than you think – but each to their own.

  9. Aka "designing in the browser." Most newbies do this instead of wireframing/designing it first in balsamiq or Adobe XD/Figma, etc. Never ever design in the browser, you will want to pull your hair out!

  10. Timely video great points – one of webflows marketing angles is that you can design and develop at the same time – i believe this is true, to some extent, but more mainly for experienced designers that have many projects under their belt in designing sites say in figma/photoshop/xd then developing in webflow and have that option to jump right into webflow and skip the formal design process for some projects for a speedy setup. But I agree with this video topic the best flexibility, speed of design and experimenting with ideas is best in a design tool first!

  11. When did you stop supporting XD?
    I found that using XD/Figma/Sketch takes a long time, they are very restricting and are not capable of doing everything you can do with code. They have their place for big projects, but not really worth it for smaller jobs. I'm fairly new to Figma, but would avoid Adobe XD like the plague and give sketch a miss too.
    Start on paper, if your design needs a mockup use whatever you are comfortable with for an image. If it needs a moving prototype then Figma, Sketch, XD. Then Webflow.
    I wouldn't design straight away in Webflow as you end up doing what is easiest instead of what looks good. And it is hard to iterate. I still prefer adobe Illustrator for designing as it doesn't have all the baggage of the new tools and I don't like prototyping as you may as well go ahead and build the actual program for all the time it will take in Figma, XD, Sketch.

    But saying all that I find none of these tools is great as they are all based on screen size, where code is meant to be responsive. Instead of a UI design we should be focussing on systems that work together to display content, not telling a client it will look like this when the screen is this size. I find none of the tools really do responsivity good enough to be comparable to the code.

  12. I’ve been thinking about this in the back of my head, always asking if I should start in Figma, but I was like nahhhh I’ll just do it in webflow…this video helped me know for sure that I’m wasting time. Hahaha you’re the man. Thanks dude.

  13. For someone who closes 10k/20k per project i can understand it's not a big deal double the amount of work using first figma and then Webflow.
    But for people who can barely close a 1k deal, this means loss.
    We are not just web designer, we are also business owner (for who works alone).

    I like figma and i use it whenever i need, but for me starting for webflow it's the more efficient way.
    In figma you change the layout just dragging and dropping? Sure, not that in webflow takes eons.. 1 minute more?
    If we gauge the time of designing in figma and then re-do everything in webflow, i don't find it convenient.
    If you really struggle choosing between many options, that's okay, you can design that section in figma and try things out.

    Also, someone might bring up the objection: "in webflow you mess things up with classes".
    Well, if you have no strategy for managing classes that's sure, but a good planning ahead prevent this issue.

    Lastly, every project is different: sometimes it's what we want is straightforward, sometimes it requires play around a bit.
    So, "should never"? Nah, definetely not true.

  14. Hey! I was wondering if you could do a video on how you overcome Webflows limitation? e.g. no cashpayment/limited e-commerce customization(do you use the built in store or just use CMS for store), no FTP(do you just always host with webflow?), user management, no easy conditional logic forms, etc. Whatever you can think of…

  15. I get feedback on my published sites using a chrome extension called Markup. Lets the clients comment on the specific spot, browse the site, they don't need to make an account. All of my feedback stays in my Markup dashboard to resolve later. It's not perfect, by any means, but I've enjoyed it so far. You should give it a try.

  16. strongly agree with you ran ! my process is => Paper with UX Copyrighting , then Figma or Sketch , and finally go to Webflow taking care of semantic class naming & organising your component the right way !

Leave a Reply

Your email address will not be published. Required fields are marked *