Is there any Grid Layout / System Mockup for Webflow to design a website in Illustrator or Photoshop so when implementing own design online its easy to go, if yes where to download it, anyone please advice.
Adobe has its own tool called Reflow. But that does not work with Webflow. If you are looking for a grid within Webflow that has been requested as a feature already.
2 Likes
I use this all the time when designing in Photoshop: http://gridulator.com/
1 Like
The beauty of Webflow is that you don’t need photoshop or illustrator to mock up a website. Just napkin wireframe your site, mock it up in webflow, and bam. your code is already half done. =)
Also, the grid is already there for you by clicking on this button:
1 Like
Oooooh @Umar are you wanting actual AI and PSD files that have the 12 gird columns for different resolutions?
I can create something like that.
3 Likes
Hi @thesergie Actually i have my own design and i want to use it here, since i am new to this system (which actually looks awesome) still i am exploring features … i did my design in illustrator and now i want my design here but not getting it how … can you help in this?
Thanks @PixelGeek i checked that and its amazing 
Thanks for the link @ryanjames this is also useful.
You can check out the video tutorials here to help you build your design in Webflow: http://tutorials.webflow.com
Create separate topics for other questions you run into.
Hi Sergie,
Did you guys plan on whipping up a default grid for Illustrator? I personally like to use Illustrator for wireframes/mockups…
I suppose creating one would be rather simple if you could just shoot over the proper default overall width/margins… Or maybe that info is already available somewhere & I can’t seem to find it.
Thanks for any help in advance…
Sure thing @Mogeek I’ll put it on my to-do list. I’ll post here when I’m done with it.
3 Likes
Wondering if this ever happened. I’d absolutely love to have a PSD file I can just pop open and start designing. I get what @PixelGeek said about mocking it up on a napkin, but being able to design in PS from the start and have image assets exported and ready to go when I hit webflow would be ideal.
So, so impressed with what you guys have built here and the thought that’s gone into the user experience. I sat down and watched every. single. tutorial video and absolutely can’t wait to start using webflow! So incredibly well done, guys!
Thanks!
Chris
1 Like
I think it all depends to what you’re used to…
I love webflow but i find it easier to start with illustrator and than, after i have the design, rebuild it in webflow.
It’s easier for me to concentrate on being creative instead of being distracted on Learning how to use webflow’s interface. don’t get me wrong it’s amazing, but it’s new to me.
I think in time i could do it straight away on webflow, after i control the interface.
anyways, there’s the 960 grid, 12 column grid is similar to webflow so you can start from that and than move on
Hi Mordi_Levi,
I totally agree with you. When I design with Illustrator don´t have to think of sections, divs, margins, paddings… Instead I think of spaces leaving my brain free to be creative. I use the 960 grid too…
1 Like
Hello All, any update on this sample .ai file?
If not, I can try to create one, I just need to know how Webflow’s rules are setup with its largest screen size for desktop.
I’ve asked but no answer yet. I’m familiar with bootstrap template, which is also 12 columns - here’s an .ai file for that > Cloud and Code — Bootstrap 3 Grid Template in Illustrator
But in regards to Webflow, the desktop view, is that 1200 px and cannot go larger as of now? From what I can tell in the sample ovrlay grid, its a 980 grid, gutter is 22px and spacing between the 12 columns is 22 px also, am i right?
@thesergie - can you shed some light on this? thanks, maybe you can also answer this question > How does webflow write code for different browsers? - General - Forum | Webflow
and if still needed, I don’t mind mocking up some .ai files to share to all 
1 Like