Read/watch time = under 4 mins
So, how do you use this thing anyway?
Maybe you'll need this page at least one time to start off, but I think you'll be quickly hittin' the ground running and putting together some cool stuff.
BTW - Reading documentation sucks, so this was written to be as plain english-y as possible.
First Step
Quickly set up your environment
As we create a new page/project, we'll be faced with a blank, white page that says "Desktop". This will be our primary screen to work on. If something changes here, it'll change on all screen sizes.
Let's put together two more screens for our tablet and mobile phone screen widths. Tablet width by default is at 810px and phone width is 390px wide. Just click that + icon where it says "breakpoint" and select the options.
Second Step
Copy and paste components
Now that we have our 3 screen widths set, let's copy and paste some components! That's what we're all here for after all.
The recommended way to use our library is to have a second window with our site open so you can quickly browse, identify, copy and paste in a breeze. Once you have what you want, go to "Layers" on the left side panel in Framer and select the "Desktop" screen, then paste.
Once pasted, make sure to set the width of the component to "Fill" and it'll adjust to all screen sizes. But, also look on the right side panel to make sure your component is using the correct variation. They would also be labeled, "Desktop", "Tablet" and "Phone" and will be optimized for each breakpoint.
Great, we have actual content on there! Next we'll also want to set the breakpoint heights to "Fit Contents" so that no matter how much height each section takes up, it'll fit on the page.
Third Step
Editing a component
In some instances, like with this navigation bar, we'll want to keep our component as a component because its utilizing variations of it's design to create interactions. If it's no longer a component, it won't behave the same way.
Editing a component will need to be done on a separate screen that pops up when you double click one of it's elements. In this environment, we can edit the component and it's variations. These edits will persists throughout the site as you reuse the component.
On the right side bar, if a component is being used and has variations, you'll be able to choose which one you want to use from a list.
Fourth Step
Unlinking and detaching instance
Unlinking an instance will allow you to make edits to the component in your own personal designer environment. However it will also remove any ability for the component in your project to receive updates. You'll basically be doing this every time.
Detaching a component will allow you to edit anything directly on the page. Right click to select this option. These edits will not affect any other part of the site and are completely unique. Most often this is what you will do after pasting a component into you project.
That's it, right?
Yeah, basically.
Told ya this is super easy.
Now, all you really need to do is figure out what content goes where then put together layouts and prototypes at record speed.
Now go and play around you crazy kids 🥳