How Sketch to Webflow works?

Hi All,

Im new to Webflow and kinda confuse how to Sketch to Webflow process work?:confused:

  1. What should be the Sketch app Layout Settings for Webflow sites?
  2. how font size converts from Sketch to Webflow? example if in my Sketch design header title is 60px so in webflow also it should be same 60px for same layout size?

Hi @abhijeets06 you may find this video helpful:

Thanks for fast replay @Waldo.

Ran Segall is good!
sorry to be dumb here but he really doesn’t talk about what layout setting he used in sketch in that video?
so its still confuse :confused: me little that what’s are the webflow layout/grid settings that we can setup in Sketch layout settings.

Hey @abhijeets06 . I have done a no. of sketch to Webflow projects myself, so here is my humble insight.

The great thing about Webflow is that its a simple WYSIWYG tool that creates advanced layouts, responsively. It can basically replicate any design you have in mind but key is keep responsive behaviour in mind. For example;

  • A heading; 60px in Sketch is still a 60px heading in Webflow. You can configure this for tablet and mobile to drop to something like 45px(tablet) > 30px(mobile) through media queries already in built into Webflow
  • Elements in a 1200px grid in Sketch would be elements placed in a centered-DIV with a max-width of 1200px to allow it to collapse to smaller widths.

The above may sound like a lot but Webflow provides very easy to understand tutorials for beginners. The link below might come in handy. The honest truth is that Webflow does what Sketch does and more.

1 Like

This topic was automatically closed after 60 days. New replies are no longer allowed.