Why You Should Never Start Your Web Design Process in Webflow (Start in Figma)
ฝัง
- เผยแพร่เมื่อ 3 ส.ค. 2024
- 📘 Free e-book "The Blueprint For Insanely Successful Webflow Designers" 👉bit.ly/3TwtBDb
One of the most common questions I get on TH-cam 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!
![[ไฮไลต์] "บิว" ภูริพล บุญสอน วิ่ง 100m ชาย รอบคัดเลือก | โอลิมปิก 2024](http://i.ytimg.com/vi/3kUSMfgtQ5s/mqdefault.jpg)
This has just saved people new to this, several months of learning by trial and error. Invaluable content.
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
Agreed!!!
>Opened Webflow
>Received TH-cam notification: read the title
>Closed Webflow
I never took the term "digital influencer" as seriously as today.
Olá, Igor Brussolo Bom dia tem vídeo novo no nosso canal. Não perca!
Lol!!
I usually start with Alcohol... that helps! 🤣
Well...agree to disagree...but weed would be the better choice if you wanna hit some creative work...
HA HA HA
How's it feel to have the best online comment of all time?
Hahaha. Can't say I can't relate.
😂😂😂
You saved my time! I get a clear picture why I should start with design tool before developing a site.
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.
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.
@@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".
@@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 ❤️
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
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.
no clickbaits, straightforward content, underrated
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.
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.
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.
I'd start with 📝 even before Figma.
Your tutorials are extremely educative and on point, i love always them, BIG UP Man!
Been wondering about this for a while-- thank you for the video
Thanks Ran. I remember asking you this exact question on IG. Appreciate the answer!
Thank you for this
Perfect Video Ran! Thank u for giving such important advices!
Thank you a lot for that! This saved me huge time
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) ;-)
Thank you!!
This makes so much sense!!! I wish In knew this before my journey with Webflow, I am definitely going to check Figma out!
Excellent vid. Thank you
Super helpful! Thank you!
development vs design! you have nailed it bro in this comparison.
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 !
What's the step after webflow
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.
Noo, webflow is not a solution for what you need, please avoid it.
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.
Could not agree more! Great video! :)
Top videos, very helpful! Thank you
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.
Thanks you saved me a whole lot of time!! very informative :-)
I totally agree with that experimentation part 🙌.
Great video! Thx
Great video ❤
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
this prob saved tons of Working Hours! THX ALOT! 😄
Great advice!
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.
Haha exactly Willian. It’s such a important point many new designers miss
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
clearly been said. Thanks Ran.
I LIKE YOUR ZOOM BACKGROUND!
This is GOOD CONTENT!!!! Great advice.
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!
Thank u for explain It❤️
Aaaand videos like this is why he is my web design sensei👨🏾💻
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.
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... :)
Top top top thank you!!!
Thankyou!
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!
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.
Thank you
I thought this was an ad, but this was actually helpful.
Thanks sir 👍
100% hit the nail it.
Perfect! - True Say.
An eye-opener for me
Thaks god I saw this before starting to build my portfolio on webflow directly.
Thanks! I was wondering about why not starting directly with webflow!
this dudes great!!
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.
10/20k per project using Webflow?
You're 100% correct.
Lol the fact that a web flow ad was playing in the beginning of this video 💀😂
Nice topic
Really appreciate these tutorials - thank you!! Great design philosophy
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.
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...
Excellent video. What is good design software to use prior to development of website via webflow
Strongly agree I like to use illustrator then export as assets you can have all of them in 1 doc
Hey, would it be possible to get access to the figma sheet which you showed in this video?
Hi Ran,
What is your favorite design software?
Thank You very much.
Thanks allot.
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 😊
Thank you...animation and interaction, do you start first in Figma or Protopie and then in Webflow...or you do than straight in weblow?
Awesome video once again. Do you or does anyone know how to set up an abandoned cart automated email in webflow?
Wonderful
thanks
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!
God bless you for making this video!
We're glad it was helpful! 😀
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.
I don't think I would go to Webflow until the client signed off on the final design.
I just fucking love webflow
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 ?
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 ?
You are amazing dude, Just now I was started to review that tool, Thank you so much
Glad I could help! 🙏
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?
How can I export my figma design in webflow?
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!
Glad to hear! 🙏 💜
Is this easier than WordPress? I'm referring to the .org one
What about the cost in time of doing the same work twice - essentially?
Can confirm - especially if you are trying to learn Webflow and design at the same time (my mistake a couple of years ago 😅)
thanks for the response, i'm in the exxact same situation and feel overwhelmed :(
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?
I was wondering can we create websites with canva too?
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?
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.
Agreed, this is really just min maxing in a world where velocity is king.
Can you freelance with just webflow under your belt though and what’s the process of developing for a client?
I wish I found this sooner spent 6 hours today redesigning 2 sections 😂😂😂
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.
ditto.
nah...i go straight to figma in all my designs lol
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!
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. ;)
Can you export the design from figma into webflow?
If you are solo and just learning…ignore this video because Figma is a team app
Does webflow has feature to import xd or figma layout to webflow?
No
@@guaplei1 It does now...
@@Matake2007 how
@@guaplei1 search “webflow figma”
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!!!! :/
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.
you're most likely designing for small mom & pops business that doesn't require alot of complicated designs.
@@Hamyhamster24 You couldn't be further from the truth.