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

What is Framer? Join the Community
Return to index
Donald Pinkus
Posted Aug 23 - Read on Facebook

Hey Framers! Before I post a billion questions...

Are there any good articles, tutorials, or example projects of a full desktop web prototype?

I really appreciate the help! I've used Framer for specific interactions, but never to mock an entire site.

-----------

Specifically I'm looking for:

1. Given a sketch file with ~6 artboards (1 for each page), turn these into separate pages of the app

2. have a fixed navbar at the top

3. when a nav item is clicked, transition the page's content (not the nav) to a different page

4. Also apply an "active" state to the active tab

-----------

Then there's a few other questions I have:

1. I have many "buttons" and "links" in my mock-up. How can I write an "animation" on hover once, and apply it to all of the elements?

2. How can I have a native browser like scroll container for my page (not the mobile style click + drag that comes with the Scroll component)

-------------

Edit: Wow. I'm blown away by the quality / specifity of people's answers in this group. Usually you just get ragged on for being a noob in some tool. Thank you so much :)

6 Comments

Jordan Robert Dobson

All good questions. There is a view controller you can use here: http://github.com/seattle-framer/

The fixed nav bar would just be a separate layer above everything else. This would resolve the nav bar.

Jordan Robert Dobson

I would start with the nav bar and build that first. Plenty to learn there alone.

Aalok Trivedi

for #2 and #3 I would suggest creating a separate artboard for your nav and take it out of the other artboards. Then you can place the nav artboard element on top of everything and have it fixed. +1 for the view controller plugin^^

Jordan Robert Dobson

To setup a scroll component with mouse you enable "mouse scrolling" look it up in the docs

Jordan Robert Dobson

Also if you have multiple links... (Like how many?) you can setup the areas you want with a layer (store these in an array) and then loop over them while adding a state to them and events for mouse over and mouse off... Those events would change the states.

Read the entire post on Facebook