This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Allan Suaco
Posted Aug 11 - Read on Facebook

Hi Fellow Framers,

1) Quick question, I want to know if its easy to build a fully responsive website prototype using Framer?

2) How you guys optimize your codes or how your codes look like if you use Framer in prototyping a responsive website?

3) Do you have work sample guys that you use Framer in a website?

17 Comments

Rafael Marin

While possible, it could be a nightmare. Framer layers are absolutely positioned, so you won't be able to take advantage of standard reflow, and that alone would discourage me to try it. You can inject css or even html, but in that case wouldn't be easier to just code it as a web page?

Allan Suaco

You mean it can't be possible to use Framer in a website to create a prototype? Kindly explain more deeply. I'm studying Framer to create one website prototype. :)

Rafael Marin

It is definitely possible to prototype a website. However, Framer doesn't really support responsive designs unless you write code that tells your prototype how to move elements around when the browser is resized.

Allan Suaco

Do you have samples of prototype website using Framer that I can see how you coded it? I'm very new in Framer. :(

Rafael Marin

Do you need help prototyping any particular aspect of a webpage?

Allan Suaco

How to start and how it is done and how the codes has been coded. That's my problem. I only created 1st page can't do the 2nd and 3rd page of website.

Rafael Marin

You can either have one framer prototype per page, and then link between prototypes

Rafael Marin

or you could make your links hide your first page and show a second one

Rafael Marin

let me put together a quick example

Rafael Marin

;)

Allan Suaco

That's cool... Please let me see the example, sorry i'm very new in Framer. Also how the layer use in a better way.

Rafael Marin

Here's the sample project:

You'll see that I organized all the layers for each page within code folds. You can click the main headline, then click the logo at the top to go back. Hope it helps

http://share.framerjs.com/cuc51c8faqbc/

Allan Suaco

Rafael Marin : Bro thank you very much for this... Question is it a better way to slice it that way rather than creating it per piece?

Rafael Marin

It depends. I would slice as little as possible. My rule of thumb is slicing only things I'll animate or move. Other than that it's all flattened.

Rafael Marin

If you have your psd or sketch files already organized in groups, it gets even easier to import them to framer. Take a look: http://framerjs.com/learn/import/

Allan Suaco

When I use PSD and import it to Framer its all scattered... I dunno why. Maybe there's a problem in grouping my layer in PSD.

Chad Smith

Hey Allan, you are WAY better off just designing in-browser and using Chrome's Inspector to change CSS values to see your results...at least when it comes to responsive design. I see Framer as a fast way to get ideas out to clients and teammates, but the more you try to do with it past the initial idea, the worse (harder and time consuming) things become.

Read the entire post on Facebook