How to convert a Figma design to Webflow

64 thoughts on How to convert a Figma design to Webflow

  1. So excited about Figma! The thing that bummed me out about Sketch is their exclusivity to Mac users only. So unless I switched pc platforms and invested in an Apple product, I was out of luck.

    But now I have a comparable tool that's available for me to use.

  2. I'm so glad I caught this video. This is so much better than Dreamweaver and FrontPage from what I see. Yes, I know.. I'm dated. But now, a dinosaur no longer. Thanks, Charli.

  3. Charli… I’m still in the process of learning HTML and CSS. I’m in school taking classes. All these other things that are available out there to make all this easier can overwhelm me. I feel I need to get the roots of coding down and understand it thoroughly before using other programs like the one mentioned in this video. Is my thinking this a good thing? When in your opinion should I start using programs to help my workflow?

  4. I was very close to buying a Mac just for Sketch but discovered Figma via your channel and loving it. Question on your Webflow design: what about mobile? Do you design for desktop first and then convert?

  5. Show me the pasghetti code xD I bet you it's not production ready.

    How does it look at different resolutions? I wanna see it on a 4k screen. Previewing it's fine except you're not emulating pixel density. Also the more explicit you are the more weight you add to the page consequently the slower it will load and the harder it is to make changes.

    Should be be using CSS grid with flexbox fallback. Furthermore how does it translate to IE10 which uses a draft version of flexbox?

    Also sourcing fonts and assets from different domains is fine… Unless your site uses HTTP /2 then it will actually be slower because it can't multiplex resources.

    Are most of those images svg? If not they should be.

    Also what about your accessibility? What do the aria tags look like?

  6. Hello Charlie, What webflow plan are you currently on? Need help deciding which would suit me best. Thanks in anticipation.

  7. I need some advice, I'm a web designer (beginner) and I don't know how to code yet, the problem is, I'm living in a poor country in north Africa and following the advice of doing work for local clients is almost impossible as most of the companies in my city don't even have a website, networking is not an option too, we don't have workshops and that stuff, here people don't even have credit cards, so owning a website and paying for hosting etc is not common, so what would be your advice to find freelance work if starting with locals is not an option.

  8. Люблю фигму. После фотошопа, конечно, другой мир. Осталось как-то вопрос с анимацией решить напрямую без гемороя.

    <3

  9. Huhhhh so much tools for us ahah. Just about Sketch, Invision suite, Adobe XD, Figma… Do you use webflow that much? I saw your video test about it, but do you use it everyday?

  10. Thanks for this video. However, as a newbie, I'm confused about Figma's relationship to Web Flow. Are the two direct competitors? As follow up to Jairo's comment, does one really need Web Flow after designing in Figma?

    Also, it appears that Web Flow can see and use Figma's assets. Is the opposite true?

    Thanks again.

    Kurt

  11. This was absolutely some of the most superbly helpful content for both Figma & Webflow I have seen to date👍. Thanks so much!

  12. Little Webflow tip for adding elements. Just select the parent element you want the new element to sit in and just click it in the add panel. It will automatically add it where you have selected. Nice to avoid the drag and drop game especially for complex nested elements.

    Also if you didn't know, at the lower left of Webflow, you can turn on the column grid overlay like what you have enabled in Figma.

  13. This is the literally the most perfect tutorial for me as I use Figma already and I'm going to start with Webflow. Thank you so much 🙏

  14. Hey, thanks for the great video.

    Lack of grouping on elements in your Figma design is a bit disturbing for me tough ;P

  15. 2 questions for you, since it basically seems you are recreating the entire thing from scratch. So seems a lot of work and im wondering if there are any shortcuts for this?

    1. Is there no merit in using the css export feature of figma (one where it shows the code) to paste here and potentially save some time?

    2. Instead of dojng twice the work, why not design in webflow to begin with?

  16. ты можешь по медленнее говорить, не успеваю за тобой!!!

  17. Awesome video! Thank you. Can anyone shed some light about a Figma/Webflow workflow for designing more complex web 2.0 products, such as dashboards with user profiles etc.

  18. Hi Charli – Thank you for your amazing videos. I had a question about transferring wireframes to webflow. I have yet to make the switch from Sketch to Figma – but I was curious about your note mentioning a 12 column layout with 940px width. I am mostly a mobile designer and have very little experience designing for web so this is all a learning experience for me. If I were to start my wireframes in sketch, which artboard should I be using? The artboard options are a Desktop HD (1440 x 1024), or a Desktop (1024 x 1024). Are these not the proper artboards to be using for designing for web? I started my wireframes for my new portfolio design using the Desktop HD 1440 x 1024 artboard with a 20 column layout (Again, I am still learning and am not sure I am setting things up properly). So I am just trying to follow your instructions on how to best setup a transfer into webflow. You state what layout you are using, and also mention what webflow is setup with (12 column layout with 940px width). I am a little confused here and would love some help if you had the time. My designs at this stage are set outside of the 12 column grid. I am just worried that my designs will not be transferred properly as I love the design of my wireframes and hope to replicate exactly into Webflow. I would be very grateful for any advice or help with my portfolio site. Thank you very much.

  19. I'm having a hard time trying to export to html, didn't really understand how you do it.

    How do u do it?

  20. Hi Charli! 😀 Thanks so much for your tips, you're amazing teacher. I'd love if you make a video about tips or advices when you check the responsive design on Webflow. What are the best practices? That columns idea was really nice

  21. So basically we recreate the webpage again in webflow……… Then why should we directly create the webpage in webflow and save more time??????

Leave a Reply

Your email address will not be published. Required fields are marked *