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

📘 Free e-book "The Blueprint For Insanely Successful Webflow Designers" 👉bit.ly/3TwtBDb
One of the most common questions I get on KZbin and Instagram is - "Why do you use Figma? Why don't you just start in Webflow right away?".
Level up your web design skills in Figma with our course, Figma for Web Designers 👉 bit.ly/49PPcwh
🤑 FREE RESOURCE!
⚡Work faster in WEBFLOW using this style guide. Download here 👉 bit.ly/38g438u
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:
bit.ly/WebflowWebclass2020
-
Find me on other social media platforms:
Instagram: / ransegall
Twitter: / ransegall
LinkedIn: / ran-segal. .
-
Gear & Book Recommendations: bit.ly/2ohFOuj
#webdesign #Webflow #Figma
Thanks for watching the video!

[@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!!

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

[@normthomas5028]

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]

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

[@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

[@sang-sang-park]

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

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

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

[@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) ;-)

[@billdodson5703]

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

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

[@badcatdesign]

I'd start with 📝 even before Figma.

[@LaurensMartens]

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

[@borisperisset4986]

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.

[@onwukafavour2278]

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

[@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

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

[@mesutkaynak4983]

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

[@ythjkl2881]

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

[@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

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

[@bhagyalakshmi-gv2hg]

Thank you for this

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

[@christinegivens9048]

Excellent vid. Thank you

[@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

[@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... :)

[@joanacodes7042]

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

[@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!

[@sherickoos]

Could not agree more! Great video! :)

[@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!

[@kristificara2630]

Super helpful! Thank you!

[@puneetshakya3001]

I totally agree with that experimentation part 🙌.

[@davidstolt]

Thank you!!

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

[@KremsonKhan]

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

[@eliotfinch1539]

Top videos, very helpful! Thank you

[@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!

[@SonOfKadiri]

Great video ❤

[@tomaskristiansen]

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

[@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

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

[@ab-yp2gn]

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

[@AnthonyMorant]

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

[@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?

[@eel3720]

I LIKE YOUR ZOOM BACKGROUND!

[@carlocarnevali7790]

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

[@richtechzone3614]

This is GOOD CONTENT!!!! Great advice.

[@iamdann783]

clearly been said. Thanks Ran.

[@milarovas4363]

You're 100% correct.

[@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?

[@agenciaesencial2443]

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

[@avelinileva]

Great video! Thx

[@malu.maluqui]

Top top top thank you!!!

[@getmc]

Great advice!

[@cybertrade7908]

Perfect! - True Say.

[@Indigenous_Patriot_1175]

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

[@KGV_Studios]

100% hit the nail it.

[@bryanbessem]

Thankyou!

[@mrgold9600]

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

[@InaAgapito]

Thank u for explain It❤️

[@lafrancois6323]

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

[@YorukaValorant]

Thank you

[@davidolufemi9247]

An eye-opener for me

[@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?

[@waleedawad4520]

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

[@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 ?

[@kshitijbhatnagar8113]

Thanks sir 👍

[@giusepperusso8624]

How can I export my figma design in webflow?

[@jeremyp2164]

this dudes great!!

[@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?

[@paulmcdevitt2038]

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

[@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 ?

[@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?

[@reiearthvlogs4906]

Nice topic

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

[@botlhaleklassen4091]

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

[@samtetteh6002]

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

[@gamed01]

thanks

[@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

[@SF-vt3zr]

Can you export the design from figma into webflow?

[@TranquilWanderer]

I was wondering can we create websites with canva 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!!!! :/

[@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”

[@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?

[@milliberman1944]

I literally was thinking this would be the case and you explained why it is absolutely perfectly! I will be sure to keep doing all my designs in XD first before jumping into Webflow 😊

[@vineetaa9927]

God bless you for making this video!

[@FluxAcademy]

We're glad it was helpful! 😀

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

[@Kelvinapplegate]

Thanks allot.

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

[@jordandewitt2124]

Really appreciate these tutorials - thank you!! Great design philosophy

[@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

[@bloodylessy8608]

I just fucking love 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..

[@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 :(

[@THREE13ad]

Wonderful

[@sam_s217]

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

[@FluxAcademy]

Glad I could help! 🙏

[@asiag.8324]

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

[@atefhossam9505]

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