Webflow vs Figma (and when to use them)

Explaining where both Figma and Webflow fit in to the website design process and how they each serve a different need. Try Webflow here: charli.link/webflow
(that's my affiliate link!)
🚀 CharliMarieTV is powered by Figma! charli.link/figma
Figma is a design tool that helps teams create, test, and ship better designs from start to finish. And it's free! :)
TIMESTAMPS:
00:00 I hear these questions... A lot
00:35 Web design vs web development
01:13 Can you combine them?
01:56 Why bother with both?
02:43 The archive🗄️
03:32 It's not double the work
Please remember to click subscribe if you'd like to see more of my videos.
--------------------------------
// WANT TO SUPPORT MY CHANNEL?
Become a ✨channel member✨ and get a cool icon next to your name in livestream chats, plus priority replies to your comments. Just click 'Join' (it's next to the subscribe button)
Or, if you like, you can put something in my tip jar right here: pages.charlimarie.com/product...
Sharing my videos or recommending my channel to a design friend is also very much appreciated! :)
--------------------------------
// ABOUT ME
I'm Charli and I'm designer from New Zealand currently living in Valencia, Spain. I’m the Creative Director at a remote tech company called ConvertKit and I posting videos about the design projects I work on and the tools I use, as well as vlogs of my life as a designer. I regularly livestream what I'm working on in Coworking Club streams. Welcome to the channel! Please subscribe and say hi in the comments, and maybe we'll see you in the live chat on the next stream.
💬 Twitter: / charliprangley
📷 Instagram: / charliprangley
--------------------------------
// MORE
Join my free weekly marketing design newsletter: charli.link/newsletter
Buy my hand written font, Grayscale: charlimarie.com/font
Book a mentoring session with me: charli.link/mentoring
My site & blog: charlimarie.com
Design Life podcast: designlife.fm
Inside Marketing Design podcast: insidemarketingdesign.co/
--------------------------------
// TECH & TOOLS
📹 Get links to all the tech hardware I use to make my videos (and the art on my gallery wall!) right here: charlimarie.com/shopmyoffice
💻 Software I use:
Webflow (no-code website builder)*: charli.link/webflow
Premiere Pro (video editing)*: charli.link/premierepro
Adobe Audition (audio recording)*: charli.link/audition
After Effects (intro animation)*: charli.link/aftereffects
Figma (web design): charli.link/figma
Photoshop (thumbnails)*: charli.link/photoshop
ConvertKit (marketing platform): charli.link/try-convertkit
Riverside (podcast interview recording)*: charli.link/riverside
Music in this video from Epidemic Sound*: charli.link/epidemicsound
Video captions by Rev (very cost effective service! I recommend)*: charli.link/videocaptions
Intro & end card animation by Austin Saylor: www.austinsaylor.com/
Editing by Nancy Palm nancypalm.com & Belén Albiol / molen.audiovisual (or sometimes by me!)
Links marked with a * are affiliate links. I can't believe you read the whole description box! You get a ⭐️

[@chloeatchue-mamlet6764]

Totally agree! I've tried starting in Webflow if I have a good idea in my head of where I want to take the design, but I usually get frustrated because it's harder to iterate and compare directions. I just end up going to Figma to push my design further, and I've noticed I produce better work when I spend more time in Figma up front before moving to development.

[@charlimarieTV]

big fan of looking at two options side by side here!

[@gksargen]

I approach the Figma and Webflow relationship in the exact way I approach enterprise software development relationships between designers and engineers. The only difference is instead of handing off Figma files to an engineer, I build it myself in Webflow! Where I feel there is overlap and "double work" is creating a Figma library with components and styles....and then creating those same elements and atoms as symbols in Webflow. The first thing I do once inside Webflow is create two pages: "Styleguide" and "Kitchen Sink"....Styleguide becomes the place where atoms live, and Kitchen Sink becomes the place where symbols live. I definitely do not love "building it twice" but inevitably end up changing something in the Figma component based on interactions of the actual element in Webflow. So there's enough value for me to continue working this way. Would love a plugin that just takes Figma library components and converts them into Webflow symbols!

[@tonydataiga]

This was my exact question after paying for a webdev course, finishing the figma portion and now beginning the webflow part! Thanks for clearing it up!

[@yassinman]

i agree because when you give any step of your workflow it's full time you will get the job well done ,thanks for the video 👊

[@bernardopaulojr5570]

Gosh the value proposition is awesome. Thank you!

[@Photomonon]

Appreciate the clarification

[@nicoleelsbeth]

You’re just marvelous, Charli! Just the way you simplify your message, it’s such a joy to learn from you. Thanks for taking such pride in your content and being thoughtful about the way you present the information. My favorite! 🤗

[@charlimarieTV]

thank you Abby!!

[@gtbaba123]

Im from India and Im working on my startup. This video is indeed helpful for me to bring more efficient use of both figma and webflow. Ty

[@gnstester]

I understand that the video you're referring to is a year old, but I wanted to express my gratitude, Charlie, for helping me navigate the internal struggle of decision-making during the design process. I was uncertain about whether to focus on UI/UX design, but now I firmly believe that regardless of the CMS or platform I select to build a website-such as WordPress, Squarespace, Webflow, or Wix-Figma/Framer will be my top choice to initiate the design process before proceeding with the web development phase.

[@iloveselenagomez]

Thanks for explaining

[@limi7991]

Big jump in video quality 👍

[@charlimarieTV]

Took a lil extra time to film in different settings for this one! Thanks for noticing 🥰

[@ezenwakaamarachi6564]

Thanks for this video.... I took a course a Figma design course and the instructor added webflow to the course outline. Was just wondering why we'd design in figma and redesign in webflow

[@danielmunoz2316]

Hi CharliMarie. Great advice! Just starting to learn Webflow Any courses or KZbin channels you recommend to start?

[@torioriorio1998]

Sometimes I even design in XD before building in Showit, even though they're both drag and drop. It just helps to solidify and streamline everything. It's like sketching before painting.

[@charlimarieTV]

Exactly!

[@thegilcohen]

Great points! I'm using both tools because, as you said, they are solving different problems and while I'm in the design process I'm iterating in bulks 😄

[@charlimarieTV]

sameee!

[@tracklauonly]

Yeah! I use both! Some times for very simple stuff i use pen and paper and the webflow. Some times first is figma and then webflow and some times is figma and then react.

[@charlimarieTV]

we love to see the flexibility!

[@Bobbziee]

loved the characters 😂 caught me by surprise!

[@charlimarieTV]

haha glad you liked it!

[@edwardtheodore1427]

Right On Point

[@paulbunyar1289]

Well said! I am currently in a position where I am highly involved in the design part of the process. But I do not code - at all. I use XD to build the designs/prototypes and work with the front-end developers to make the design a real web thing.

[@charlimarieTV]

I'm the same! I don't code at all as part of my job these days, just focus on the design side

[@Sponsi_PL]

I totally agree.

[@tomal44]

R there any softwares thet combain both design and web building?

[@invinciblebhai2658]

Nice Information

[@charlimarieTV]

Thanks!

[@zeeq7331]

The design process taking place in Figma or any other creative tools is so, so important because our main job as designers is not to paint a pretty picture. But to solve problems for our stakeholders or clients. Thanks for this topic Charlie.

[@charlimarieTV]

so true!

[@atemkongroundsomeaborinji9959]

Ihave one problem in figma and that is when you create and entire website or mobile app design and chose a scrolling type for example vertical scroll...when u do the presentation the page just scroll and shows an extra space. how do i fix that. i just need it to stop without showing extra space or behaving like the page is elastic

[@jacepro2827]

While every developer can go directly with webflow, some developers and companies prefer using figma because it is easier to experiment and faster to produce a prototype than building a prototype on webflow. i tried to experiment on webflow and its taking me alot of time to restructure everytime I think im not satisfied unlike in figma, I could produce a whole site page in an hour or 2.

[@kerwynwilson]

There will never be that "one" tool that does everything. Even in the world of print design, there are different tools that accomplishes various tasks. In addition, you risk limiting yourself to doing things one way when there may be more efficient ways at working on a design problem. Thanks for taking the time to share your thoughts and provide guidance on this topic.

[@charlimarieTV]

Exactly! And usually when a tool does say it can do everything, it turns out to be rather average at most things 😅 I’ll always prefer to use a tool that was designed for a certain task!

[@abigalemchardy2112]

So can I transfer my figma file right to webflow for the development ?

[@Junivieve]

My Computer Science course is using figma! :D Nice video

[@charlimarieTV]

That's awesome!

[@reeeseee]

I’ve successfully hand coded and developed on the go, thinking I could design as I went along. 😵‍💫🤓 I wasted a lot of time calculating for things like media queries and winging it. I agree, it’s good to separate the design process from the development phase even if you can do both. Figma and XD are amazing. However, I find the wireframe capabilities and prototype functionality of Figma to work best for me. It’s cool to see my brain iterating as I flow through my varied Figma layouts. Webflow is a perfect fit for staging thru to roll out, working well in teams as well. Its rare that I take the code and run it through VSCode, but for fun I will before hosting. They are both great visual tools. Thanks for this video.

[@charlimarieTV]

haha YEP I've done that in the past too in Webflow, and it does always end up taking longer or with a worse result than the times I start in Figma and follow the process!

[@davidp1282]

While I'm from a completely different discipline (Mechanical Aerospace Engineer) it absolutely makes sense. Figma is for your fast iterative prototyping and Webflow is you active production tool to create and implement your chosen prototype ;-) :-D While I have not actively used them yet (just getting into it, I see the big picture) it boggles the mind how anyone would think that it's duplicating work......

[@jackpaice]

I'm a developer/designer and I absolutely always start with Figma. In fact, I first start with a hand drawn sketch on my ipad, or notepad, then move to Figma. I wouldn't start with just code, because I wouldn't know where things went, and if you don't dedicate some time to designing and thinking about placement in the first place, then you end up with the web design equivalent of "programmer art", sorta.

[@charlimarieTV]

exactly!!

[@RandySFisher]

Do you use any particular program to draw the sketches?

[@jackpaice]

@@RandySFisher procreate

[@MrLinknel]

im new to Figma, someone please tell me there's a way of dong this. But sometimes I find it hard to really image what things are going to look like full screen in Figma. This is when I revert to building it in Webflow.

[@Jonesrful]

Fun vibes. Excellent proposal of these two ideas and use cases. Do you think it would be helpful to have one tool that both achieves what Figma and Webflow set out to do?

[@charlimarieTV]

It could be! but generally tools that have tried this in the past end up doing a poor job of both since the ideal workflows needed for each are different, in my experience anyway!

[@prepre73]

@@charlimarieTV yeah there used to be a tool in Photoshop that would let you copy front styles / padding as css but you ended up spending more time right clicking and pasting than you would just writing it

[@danielmorrissey6333]

When you're in Figma and going through the design build process. If you're working to a deadline, how do you manage the need to constantly "tweek"? Do you have a process you use to "call done" on parts of your design, so that you know you are progressing?

[@charlimarieTV]

ooo great question! I might turn the answer for this one in to a whole video. But essentially you reach a point where you say to yourself "this solves the problem. it looks good. and even though there is more I want to do, we need to ship"

[@charlesajiboye4421]

What do you think about editor x.. Do you think its a good tool for web site development?

[@charlimarieTV]

I’ve never used it!

[@Sahilmohd1082]

Can we work just as a web designer ?? (Not developer) Is freelancing for web designer is a tough job ??

[@RoyPetrie]

I use illustrator to design logo's but thinking about design logo's in Figma. DO you use Figma for logo's sometimes? I love that in Figma everything is online and I can switch from pc to laptop to other working spaces very fast. And I use Figma for webdesign and Wordpress for websites, thinking about using Webflow. What do you prefer for future use? 😀

[@charlimarieTV]

I don't really ever design logos these days, but if I did I would use Figma for sure!

[@longlivetheusers]

Hi :) Have you heard of/tried editor x? If im not mistaken it seems like the combination of figma and webflow. However i could be mistaken with that assumption. Regardless i was curious to what your thoughts were on it. And i know you mentioned you prefer to use tools that specialize in a focused area instead of a do it all tool. Thanks

[@charlimarieTV]

I haven't to be honest! Shall i do a first impressions video on it?? would you find that interesting to watch?

[@longlivetheusers]

@@charlimarieTV yea that’d be great, i think thats how i first ran into you, might of been first impressions on figma 🤔 Perhaps editor x may be an additional tool for our bag?! Thats always a plus. Thanks for even giving this some thought.

[@prepre73]

@@longlivetheusers Ran of flux recently did a KZbin video on editor x vs webflow, also interested in Charli's take here but thought you might not have seen this 😃

[@lizbrownux231]

I would like to know if you could design plus no-code code in editor x as well. or if you would still want to go with figma (or other design tool) first before jumping into editor x.

[@uxdeya7660]

Top fan or what ❤️❤️❤️

[@charlimarieTV]

you win! 🏆

[@uxdeya7660]

@@charlimarieTV love uuuuu

[@zairewillis5640]

I guess my question is how do you get the design from Figma to webflow? Or are you creating a prototype and getting as close as you can in webflow?

[@ryannichols9966]

There’s a plugin for copy paste

[@topteamfitness]

I first sketch then move to digital, from my experience is the best way to do it, I've done the coding while designing and it can be a nightmare.

[@charlimarieTV]

agreed!

[@aerodylluk2543]

Has Webflow sorted out the GDPR issues for UK users yet?

[@charlimarieTV]

I don't work for Webflow so I'm not sure! What issues are you referring to?

[@aerodylluk2543]

@@charlimarieTV Sorry I meant it just generally for anybody watching the video, not you specifically. But it is a bit of a salty issue so came off a bit more brusk than intended, I'm a big fan, no offence intended. If you search GDPR on Webflow forums you will find plenty of threads about it. I was trying to start my own freelance web design business using Webflow about 2 years ago, but as I am UK based I ran into a legal issue. Because of GDPR you weren't allowed to store EU users data on non EU servers (or at least in countries the EU deemed did not have adequate data protection/privacy law, the US was a big one that failed to meet the standards). And to get the benefits of Webflow you need to host with them, and they only had US servers, so technically that meant Webflow was no good for EU/UK users. The problem I and many others had, was that we approached Webflow and they simply would not offer a response. They danced around the issue for a very long time and simply would not give users any advice regarding how GDPR would affect them. They aren't responsible for legal education, BUT as they are a paid service I and many others felt they should at least be able to advise on how the new GDPR rules would affect their users, especially if this would technically leave those users open to law suits in the event of a data breach as the users had no control over where and how Webflow stored their data. You can read up on that from more experienced people than myself on the forums. But they pretty much just blanked users from the EU and UK for a very long time, ignored forum threads, their support info and staff were useless too and simply would not or could not offer any help. I think after a quick google they have done something about it now. But at the time it was pretty abysmal service and I bet a lot o users didn't even know they were technically leaving themselves wide open to a law suit if anything bad had happened to heir clients sites. I even asked a few youtubers, yourself included if they knew anything about this back then and nobody seemed to know anything and most of them when i got downt o actually talking to them felt like they didn't care if they were technically breaking any laws as the odds of getting caught were slim. If nobody catches you then nothings wrong sort of logic. I didn't want to sell my clients a service I did not fully understand, so I left Webflow and went into a different line of work. I was rather bitter about their handling of the situation however.

[@danielbencomo6562]

I could never design directly on Webflow - as a designer I feel very limited when I work on these type of WYSIWYGs. It takes the sketching process away from the design and creating iterations would take so much longer while only a couple of minutes on XD.

[@johnbowman3630]

Ok I hear you Charli but let me ask you this: Have you ever built out a complex design in figma only to be unable to reliably reproduce it in Webflow? What I'm having trouble understanding is how you could use a 2nd application, with its own set of tools, to effectively clone something you made in an entirely different program - is it not like trying to paint the same picture twice? Help me understand this.

[@charlimarieTV]

I'd encourage you to watch this video again and pay special attention to the part where I talk about the design process and why a tool like Webflow is not enabling the DESIGN process but rather the DEVELOPMENT process. They're two different things. To use your analogy of painting a picture, jumping straight into development is like already knowing exactly where you need to put the paintstrokes and exactly what colors to use to bring your artistic vision to life vs starting your painting with a sketch to figure out the shapes that will best convey your artistic intent and experimenting with colors to see what feels right. And to answer your first question, no I haven't, but that's because I've been designing websites for more than a decade and I have a solid understanding of what is and isn't easy to do in code. I apply this knowledge when I make design decisions. It's perfectly normal for someone with less experience, or less knowledge of code to find themselves in that situation though.

[@johnbowman3630]

@@charlimarieTV Oh I watched the video carefully, I'm just new to figma and webflow (the last site I built was in 2017 as a hobbyist), but now I've got my own e-commerce needs and I'm getting back into the 'game' so to speak. I get the difference between prototyping and development, but at first to me the WYSIWYG element in WF seemed just as good as in Figma. Now that I've done some more research on Webflow, I realize that it is a VERY deep application in and of itself, and the drag'n'drop despite being as good as it is, offers nowhere near the fidelity that Figma does. So the webflow process is not _quite_ as simple as the marketing suggests, methinks (at least not to a humble musician like me, probably not true for a venerable master like yourself ;) ) . I'm just glad they've got tons of instructional materials on their site... looks like I'll be busy there for awhile 😵 *"It's perfectly normal for someone with less experience, or less knowledge of code to find themselves in that situation though."* Right, I'm just gonna welcome it. I've got courses lined up for both applications, kind of excited to learn these powerful tools as a novice-intermediate level hobbyist. Thanks for your detailed response!

[@mattyprings]

100% agree. I can make iterations and changes much faster in Figma then webflow. I've grown to hate the phrase "design it in the browser."

[@charlimarieTV]

I'm on board for "iterate with small changes in the browser" but not designing from scratch! ha

[@plantifulalexandra]

I don't work with Webflow but with WordPress/Elementor. So far I only sketched out my ideas on paper and then went straight into Elementor. Actually it has worked out really well for me so far but I want a different workflow and be able to show clients what the design is gonna look like before, so I'm currently learning Figma. My issue: In the course I'm taking the guy does everything soo perfectly which takes AGES, just to do it all over again. I actually just wanna have a rough design. I mean, it should pretty much look like the end result (even though it will probably never 100%) but I don't really care if the spacing, padding, font size etc is 100% correct. I just wanna have a design that I can show to clients and then move to Elementor, makes everything easier in the end. But I don't wanna spend hours and hours of making everything "perfect" in Figma, that's what I'm gonna do once I'm actually building the website with Elementor. I guess that's alright? :D And for clients: I'm gonna tell them this is not the perfect end version yet.

[@ryannichols9966]

Abandon Wordpress and Elementor. Plugins on top of plugins to make Wordpress work also make the site slow and easily breakable. Webflow has all of this natively

[@honeygirlsapiary]

Tried webflow first…then went to Figma and designed website…then trashed original webflow and redid the new Figma pages. It takes me many times over to “get it right” lol

[@masha3365]

I create an outline in Figma, and then jump to Webflow. I find that the design that I laid out in Figma is always changing in Webflow anyways and ending up looking better. Dunno why! haha

[@charlimarieTV]

because of iteration! :)

[@heartofgrass]

Thanks, this was helpful. And I was the 666th like, so that was cool, too 🤣🤘

[@prepre73]

See I think people would talk about coding first over design then coding clearly haven't worked in a professional environment, it's okay for personal projects but it doesn't allow for collaboration ( how can someone build what's in your head 🤔 ) Even for solo projects though I always find I save so much time coding a thing where I have done the fact finding first I always used to hate doing user profiles, accessibility reviews, wireframes ext in university but the more and more I work on projects the more I realise I couldn't live without them 😂

[@charlimarieTV]

YES great point.

[@sridharsingaravelu4467]

❤🥳

[@charlimarieTV]

thanks for watching!

[@sasquatchii6621]

I feel like it would be painful (for me) to get started in Webflow without having created my design in Figma first. In Figma you can focus just on design and you have a lot of freedom to play and experiment, whereas in Webflow everything's so much more structured and rigid and you can't have multiple iterations of your designs the way you can in Figma. I mean, if I had to just use Webflow without using Figma I definitely could, but I feel like the site design would be weaker without the initial process I have designing in Figma.

[@charlimarieTV]

agreed! I could do it... but it wouldn't lead to the best result.

[@JC-iv8yg]

Do you prefer Figma to XD? And if so, why?

[@charlimarieTV]

Yes! XD seems like it was made primarily for prototyping, whereas I’m usually designing single web pages so prefer a tool more optimised for the design process which I believe Figma is

[@abirahmed1292]

When someone says why you use Figma it's like saying go straight way to Hi Fi without user interview, without brainstorming (such as crazyeight). Everything is there for a reason. I bet Figma may go away in future but designing before coding will never go away.

[@charlimarieTV]

YES exactly. The process is the process even if the tools we use as part of it change over the years. (I don't think Figma is going anywhere anytime soon tho!)

[@abirahmed1292]

@@charlimarieTV I do hope so that Figma never goes away. It's so tiring for me to keep switching, first photoshop, then Sketch and now Figma, and then what? I hope Figma keep listening to it's user and never becomes arrogant :D

[@Heathons]

web mommy

[@elihertig7032]

I think the reason people use Figma is resumed in minute 2:55 of this video

[@elihertig7032]

Can relly tell how people visually organize content or web structure without making any king of wireframe ? I think the result will be messy and the web user will interact with a poor inuitive website.

[@charlimarieTV]

totally agree! I guess there are some rare folks who can work through all that in their minds and design as they go, but that is certainly an exception to the rule.

[@NS-Neeraj]

Unless you can find small business clients who will pay you for both processs you may soon find yoruself out of business

[@charlimarieTV]

I mean if they want a functional website that actually meets their goals there isn’t a choice between one process or the other! Both are essential for creating a website