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

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

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.

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

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.

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

no clickbaits, straightforward content, underrated

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.

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.

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 !

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.

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.

I'd start with 📝 even before Figma.

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.

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.

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.

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

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

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

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

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

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.

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

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!

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

I totally agree with that experimentation part 🙌.

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!

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

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

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

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.

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

You're 100% correct.

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

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

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.

Excellent vid. Thank you

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

Thank you for this

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.

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

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

I LIKE YOUR ZOOM BACKGROUND!

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!

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

I just fucking love webflow

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

Super helpful! Thank you!

Could not agree more! Great video! :)

Thank you!!

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?

How can I export my figma design in webflow?

clearly been said. Thanks Ran.

Top videos, very helpful! Thank you

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

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!

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

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 ?

Great video ❤

Perfect! - True Say.

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

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?

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

100% hit the nail it.

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

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.

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.

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

For sure, after you start in webflow and build whole site, client said you he want to change UI for another UI

This is GOOD CONTENT!!!! Great advice.

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.

Thanks sir 👍

Thank you

Thankyou!

Great advice!

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

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

An eye-opener for me

Top top top thank you!!!

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!

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

God bless you for making this video!

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.

Nice topic

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!

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?

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.

I was wondering can we create websites with canva too?

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

Great video! Thx

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?

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

Thank u for explain It❤️

thanks

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.

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

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