How to create a website using Framerstacks
Use Framerstacks to bring the best design system to your next Framer project. Here is how you can make it possible with ease.
Of course, you have to complete the sign-up process to start using the components or sections that are available inside the Framerstacks library. You cannot copy the items listed on the library page unless you complete the sign-up steps.
Pre-optimization tips
Before you get started, there are a few steps to complete as you are creating your first website in a 100% optimized way. Never compromise in the quality and functionality of your very first impressive work.
So, here are the steps;
Setting up the breakpoints
It is one of the most important steps in order to make your entire website responsive for all device screen sizes without having any cut off of your image, video, or even text elements.
Simply add how many breakpoints you want to implement to your website by just following the video below.
Here, we created the most ultimate breakpoints only. The Desktop, Tablet, and Phone.
Optimizing the canvas
As we are just copying pre-build sections and components from the Framerstacks library, it is highly recommended to shape up all of your created breakpoints to receive the pasting elements in an optimized way.
Watch the video below to learn how you can add the main break point area.
This is the main stack. You can change the direction, add respective padding, gap, radius and many more. All the sections and components should be placed inside this stack.
Always remember that the first breakpoint will be the primary one, and whenever you make any changes on this, it will reflect on all other breakpoints. Here, the Desktop will be the primary breakpoint.
Copying sections and components
Once you have successfully optimized your breakpoints, it's time to import something to your ready to go canvas. To do that, head over to the library and choose the right section you want to copy into your clipboard and then paste into the Framer canvas.
Right away, the section or component you pasted will appear on you canvas. Feel free to customize it based on your website theme and content ideas.
PS: Make sure that you placed the content on the right stack (Main stack)
Encountered any issues while you copy and paste any section or component? Report here.
Paste into the canvas
Pretty easy. Just select the main stack and hit
+
V
on Mac
OR
Ctrl + V
on Windows
Remember, all our built-in sections are limited to MAX width "1200px". If you wish to, change to "1440px" or any other relevant screen sizes.
PS: Try to use the "Fill" option in the "Size" property panel on the right side of your screen.
Optimizing the pasted section or component
Of course, all the sections may not be responsive for your breakpoints. You have to do some tweaks such as length properties, width, the letter sizing, etc…
To do that, we recommend you to start relying on a proper style system. This will give you consistency and continuity across your website content.