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

[@RocknRollCEO]

This has just saved people new to this, several months of learning by trial and error. Invaluable content.

[@Ali.webflow]

It’s so true. Just how to start a logo design by sketching ideas on a piece of paper, the same way you do for web design

[@kryssy2490]

Agreed!!!

[@igeoerre]

>Opened Webflow >Received KZbin notification: read the title >Closed Webflow I never took the term "digital influencer" as seriously as today.

[@boggianluzecriacao]

Olá, Igor Brussolo Bom dia tem vídeo novo no nosso canal. Não perca!

[@kraesiv]

Lol!!

[@g30rg3-c5]

I usually start with Alcohol... that helps! 🤣

[@anshulguptain]

Well...agree to disagree...but weed would be the better choice if you wanna hit some creative work...

[@thepurpleufo]

HA HA HA

[@charleskp947]

How's it feel to have the best online comment of all time?

[@SlyeJoySerrano]

Hahaha. Can't say I can't relate.

[@serra9888]

😂😂😂

[@wulantsabita9843]

no clickbaits, straightforward content, underrated

[@ProductJonas]

I wouldn't even say you should start with Figma. When I START to design something, I want to explore as many different concepts as possible. Doing that in Figma would be a lot of effort. I always prefer to sketch something on paper first, and then go to digital design tools. Then, after I would have the first version in Figma, I would go on and make more minor tweaks to my designs (in Figma). If my idea doesn't work out, I go back to pen and paper. The earlier you are in the process, the more you have to explore and move quickly. Sketching something is just 10x faster than laying out a concept in Figma.

[@normthomasmarketing]

ProductJonas I think the message was more about don’t go into Webflow without a plan made in a sketch or Figma or xd. The sketching part is part of the entire process. But you wouldn’t go from sketching ideas directly to Webflow. So you are both correct I think. But I’m different points.

[@ProductJonas]

@@normthomasmarketing I agree. But, the title & video can be misleading to people who are new to the entire process. That's why I made the comment. To avoid confusion, I would change the video title to something like "Why You Should Never Design Anything in Webflow".

[@imagiwild7522]

@@ProductJonas lol. That would make a great clickbait title but a disservice to Ran who promotes webflow, but overall, Anyone who cares will get the message including yours ❤️

[@Ali.webflow]

Wow that’s amazing Jonas. It makes sense to design it on paper and it’s super fast easy. Cu you just have to play around with the different elements to see how things will look

[@iDATUS]

I like to use webflow to work out how to do effects. It is easy to think save time design in webflow but that works if you have something already to work with. I agree you really need to go design before build. I have a remarkable 2 on order to draw, erase and edit initial thoughts and wordings as this is faster than figma. Then figma create concept which is faster than webflow. Then webflow as its faster than code. Then code (tiny bits) if required. Done. Cheque please.

[@pxCode]

Yes, totally agree. Designers should design without any limitations. That's why we develop a design-to-code solution to make the process more smooth.

[@UnfinishedStudio]

I totally agree. Sometimes I'll even start with a paper and pencil. Simple and basic websites landing pages can probably be done skipping the whole design process and going straight to Webflow, but the best websites go through a process that takes time.

[@sang-sang-park]

You saved my time! I get a clear picture why I should start with design tool before developing a site.

[@PaytonClarkSmith]

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.

[@RebDeb64]

I'm a developer wanting to improve my design process, have been researching UX/UI design tools and this is one of the questions I wanted answered. Thank you so much, I really appreciate this content.

[@silviupopovicci]

Noo, webflow is not a solution for what you need, please avoid it.

[@badcatdesign]

I'd start with 📝 even before Figma.

[@adilM_]

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 !

[@kraesiv]

What's the step after webflow

[@PwrSrg]

I have been preaching this for decades, obviously WELL before Webflow! NEVER "design" in a Site Builder - use the right tools for the right job. “If the only tool you have is a hammer, everything looks as if it were a nail.” - Abraham Maslow

[@atelierperisset]

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.

[@zabalmedia]

Ran! Thank you. I get this question all of the time. "Why can't you just design in Webflow? Webflow is a design tool". You just expressed. beautifully why it's a terrible idea. It's a lot more expensive to make edits in development than it is in code. Not to mention the chaos that could come out of making many classes and subclasses to change the layout. Thanks for pushing the culture forward.

[@Ali.webflow]

Haha exactly Willian. It’s such a important point many new designers miss

[@lynnemarie7885]

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.

[@daudi.blooms]

Your tutorials are extremely educative and on point, i love always them, BIG UP Man!

[@oliviaswiss]

Interesting point of view! Your approach is very much that of someone coming from a graphic design background - seeing art direction and development as two separate disciplines. But in other design areas such as 3D and motion design for example, they are mixed; procedural design is made with code and compositing is built with structured thinking. Those are my disciplines and that's probably why I've been designing directly in Webflow (I use it to build my own site, not for clients) ;-)

[@treedruids5776]

Going through a group project right now in uni and I made the mistake of starting through code instead of thoroughly thinking out a design with the help of Figma, experiencing this so hard right now

[@onwukafavour2278]

This makes so much sense!!! I wish In knew this before my journey with Webflow, I am definitely going to check Figma out!

[@danielq888]

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.

[@Matex__]

10/20k per project using Webflow?

[@Ccodebits]

Thank you I feel like I can finally complete my projects now. Because I'm a coder and not a designer. So I get burned out trying to code something that looks nice.

[@billdodson207]

Been wondering about this for a while-- thank you for the video

[@jaimix31792]

Aaaand videos like this is why he is my web design sensei👨🏾‍💻

[@conafam]

Fair point and one to take on board. Out of curiosity, why are you using columns? I’ve got the impression that they’re not the best to woe with given flex and grid.

[@ythjkl2881]

development vs design! you have nailed it bro in this comparison.

[@denisgut]

Does webflow has feature to import xd or figma layout to webflow?

[@guaplei1]

No

[@Matake2007]

@@guaplei1 It does now...

[@guaplei1]

@@Matake2007 how

[@Matake2007]

@@guaplei1 search “webflow figma”

[@botlhaleklassen4091]

Lol the fact that a web flow ad was playing in the beginning of this video 💀😂

[@giusepperusso8624]

How can I export my figma design in webflow?

[@paulmcdevitt2038]

What about the cost in time of doing the same work twice - essentially?

[@nickt007007]

The arguments for using Figma made more sense in 2020. 2x the work is a lot of work. Duplicating pages and direct links for clients is easy in Webflow, for comparing and contrasting ideas with clients. If there are so many design ideas that Figma becomes worth it, then I suggest revisiting the creative brief and resist the temptation to go straight to play time.

[@R055LE.1]

Agreed, this is really just min maxing in a world where velocity is king.

[@LaurensMartens]

Thanks Ran. I remember asking you this exact question on IG. Appreciate the answer!

[@KremsonKhan]

this prob saved tons of Working Hours! THX ALOT! 😄

[@bloodylessy8608]

I just fucking love webflow

[@mesutkaynak4983]

Perfect Video Ran! Thank u for giving such important advices!

[@puneetshakya3001]

I totally agree with that experimentation part 🙌.

[@majakawalio2631]

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!

[@waleedawad4520]

I thought this was an ad, but this was actually helpful.

[@eel3720]

I LIKE YOUR ZOOM BACKGROUND!

[@UsMisguided]

Strongly agree I like to use illustrator then export as assets you can have all of them in 1 doc

[@Ryan98391]

The Webflow tutorials recommend doing this very thing and planning your website with Figma or your program of choice before even touching Webflow. I would even go so far as saying you shouldn't start with a program like Figma if you can help it and try paper prototyping instead if you can.

[@michaelandreuzza]

ditto.

[@Hamyhamster24]

nah...i go straight to figma in all my designs lol

[@kositakis0617]

when you have finished the design on figma and you want to move it to webflow,can you automatically upload it or? or you have to do it manually and basically remake it ?

[@kanoalindiwe5824]

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...

[@milarovas4363]

You're 100% correct.

[@joanacodes7042]

Thank you a lot for that! This saved me huge time

[@christinegivens9048]

Excellent vid. Thank you

[@rosieramie2945]

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!

[@FluxAcademy]

Glad to hear! 🙏 💜

[@adictiveadictive]

Is this easier than WordPress? I'm referring to the .org one

[@tomaskristiansen]

Hey, would it be possible to get access to the figma sheet which you showed in this video?

[@sherickoos]

Could not agree more! Great video! :)

[@carlocarnevali7790]

Thaks god I saw this before starting to build my portfolio on webflow directly.

[@adamyomtov7190]

Can you export your design from Figma into Webflow? If importing into Webflow isn't an option, how do you identify all of the numerous characteristics (font, font size, font color, spacing vertically\horizontally etc...) in Figma so you can replicate in Webflow?

[@mirandagarcia6636]

yeah u can export your Figma design into web flow

[@bhagyalakshmi-gv2hg]

Thank you for this

[@sbthebrand66]

So here is my question. I watched your video on "Relume" and bit the bullet on paying for the $30+ dollar subscription for it. I exported to both Figma and Webflow. Although I did like the Webflow transition better, which one (if you had to pick) would you actually and honestly suggest using when doing mockups from Relume?

[@76kid]

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.

[@Hamyhamster24]

you're most likely designing for small mom & pops business that doesn't require alot of complicated designs.

[@76kid]

@@Hamyhamster24 You couldn't be further from the truth.

[@agenciaesencial2443]

Thanks! I was wondering about why not starting directly with webflow!

[@ervinmcmillan19]

I don't think I would go to Webflow until the client signed off on the final design.

[@SonOfKadiri]

Great video ❤

[@eliotfinch1539]

Top videos, very helpful! Thank you

[@AMO17]

Big fella you're a day late and a dollar short! Only because I didn't know a thing like Figma existed. When I heard the name I was thinking "the toy company?" I'll have to check this out. While I'm not dealing with clients, I am making my own website and have run into the exact issues you've talked about here.

[@TranquilWanderer]

I was wondering can we create websites with canva too?

[@kristificara2630]

Super helpful! Thank you!

[@iamdann783]

clearly been said. Thanks Ran.

[@Indigenous_Patriot_1175]

Excellent video. What is good design software to use prior to development of website via webflow

[@moza260]

oh, so webflow had the logic of html in div, and figma is just a vector like in adobe xd, but online based right?

[@diwakardayal954]

You can develop your site on webflow (development with visual blocks) however in figma You can only design So the process is Design -> Development

[@moza260]

@@diwakardayal954 i just realized webflow is CMS like wordpress and wix..

[@AnthonyMorant]

Hi Ran, What is your favorite design software? Thank You very much.

[@getmc]

Great advice!

[@davidstolt]

Thank you!!

[@samtetteh6002]

Can you freelance with just webflow under your belt though and what’s the process of developing for a client?

[@LeeMarks]

This may be heresy to ask, but doesn't Wix accomplish both tasks at once?

[@SF-vt3zr]

Can you export the design from figma into webflow?

[@dharavasishth]

hey Ron, now figma won't work since adobe thing happened, what do you recommend in place of it or to go right into webflow?

[@atefhossam9505]

What if I design in Figma doesn't work in Webflow? Don't I need to know the limitations of webflow?

[@johnleighdesigns]

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!

[@bdpod]

Can confirm - especially if you are trying to learn Webflow and design at the same time (my mistake a couple of years ago 😅)

[@dianae18]

thanks for the response, i'm in the exxact same situation and feel overwhelmed :(

[@trehanpereraofficial5665]

I know this is an old video but how would you transition from figma to webflow once you're satisfied with the design aspect? Is there a way to import the figma design into webflow?

[@just.a.random.comment]

No.... First you design it in figma or any other software. Then you make it in webflow from scratch( you have to learn using it) .. and you can see why it is important to start in figma then go to webflow.

[@nifty8404]

@@just.a.random.comment what is the difference between prototyping in figma Vs webflow. What does webflow DO exactly?

[@a0um]

Makes sense to start with a less constrained design tool like Figma, but can't we get something similar in Webflow? I'm no expert, so it seems that in Figma we're just laying out elements with absolute positioning and the auto-snapping and alignment functions in Figma help us for the constraints that we do want. Wouldn't it be possible to start in Webflow adding elements with absolute positioning within a container the same size we'd use in Figma? Perhaps we can create a class that sets the absolute positioning on the elements if that's not available by default. And for grouping and alignment we select and… I don't know, wrap in a predefined div? Just thinking that maybe Webflow not imposing all such constraints, we're just fixated that with that tool we have to use them… a mindset issue, not a tool issue. Affinity Designer has a raster "persona" and a "vector" persona, Webflow has a "developer mode" and a "preview" mode… I suspect one could have a "Creative" mode too.

[@mamishin3199]

Hi! Please HELP me! I am working on Design system in XD! I have no Idea, how i can manage and share the style and components with the teams and programmers!!!! :/

[@richtechzone3614]

This is GOOD CONTENT!!!! Great advice.

[@CodingAfterThirty]

In your opinion, is web-flow more for designers or developers? I haven't used it yet. But really curious. And which marked does this serve? Should all the new junior devs be worried? Great video.

[@davidolufemi9247]

An eye-opener for me

[@simonem5812]

Great video, thank you so much! For beginners it would be great to know what software instead one can use to play around with designs... :)

[@ab-yp2gn]

Thanks you saved me a whole lot of time!! very informative :-)

[@markodjuric9534]

Thank you...animation and interaction, do you start first in Figma or Protopie and then in Webflow...or you do than straight in weblow?

[@KGV_Studios]

100% hit the nail it.

[@cybertrade7908]

Perfect! - True Say.

[@vineetaa9927]

God bless you for making this video!

[@FluxAcademy]

We're glad it was helpful! 😀

[@kshitijbhatnagar8113]

Thanks sir 👍

[@denniszenanywhere]

A design tool I used years ago called axure allowed me to be more creative with a design concept. The more I wireframed with axure the more new ideas it generated for me in terms of ux design. Guys, any design books you use for inspiration?

[@mrgold9600]

Awesome video once again. Do you or does anyone know how to set up an abandoned cart automated email in webflow?

[@TheStallion1319]

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 ?

[@avelinileva]

Great video! Thx

[@reiearthvlogs4906]

Nice topic

[@ostendo.design]

Hey Ran, been a big fan for a long time, taken your Webflow Masterclass, and love these videos! May I ask what your webcam setup it to record these? The quality is really killer!

[@glaDos-]

As a programmer. Webflow is love. Rest is for kids.

[@asiag.8324]

.. any steps on how to export figma design into webflow? :< is this even possible??

[@Dangit-Dave]

If you are solo and just learning…ignore this video because Figma is a team app

[@normthomasmarketing]

I would never do that! - cause I took the 10K course.

[@sam_s217]

You are amazing dude, Just now I was started to review that tool, Thank you so much

[@FluxAcademy]

Glad I could help! 🙏

[@malu.maluqui]

Top top top thank you!!!

[@sovereignsoulutions6612]

Can someone please explain to me why we need adobe xd or figma instead of just creating this layout on adobe illustrator or in affinity designer? Whats the purpose of XD? To just create your webpage layout and idea, right? Then you essentially still have to manually upload your images etc to the webflow. Am I missing something here? What makes XD so special? Lol

[@coreymoen]

I am not sure I would say "never" start this way as I have definitely done so successfully in a pinch...but overall, stellar content and advise Ran!

[@stevensavoie856]

Perhaps a more accurate but less catchy phrasing would be: Using webflow as a design tool is NEVER good for your workflow! But his way of saying it gets the clicks. ;)