Quick start
Getting started with Framerstacks is intentionally simple so you can focus on building instead of setup.
Samuel
Editor
Using the first component
To use a component, drag it onto your canvas and begin customizing immediately. Text, images, layout options, and interactions are exposed through Framer’s native controls, allowing you to adapt each section without touching code. This makes Framerstacks equally approachable for beginners and professionals.
Once customized, components behave like native Framer elements. You can duplicate them, reuse them across pages, connect them to CMS collections, and publish your site as usual. Framerstacks fits naturally into your existing workflow without adding friction.
As you adjust the component, you’ll notice that layout integrity is preserved. Spacing, alignment, and responsiveness remain consistent even as content changes.
Build the first page
This Quick start guide is designed for users who want to start building immediately without reading full documentation. In just a few steps, you’ll import Framerstacks, place your first sections, customize them, and publish a responsive page.
Framerstacks is built to work natively inside Framer, which means there are no setup requirements, no configuration files, and no learning curve beyond what you already know. You can copy components or sections from the library page, or drag and drop from the kit file.
Follow the steps below in order. Each step builds on the previous one and takes only a few minutes to complete.
Step 1: Add a section to your page
Open the Assets (Kit file) and browse the available categories such as hero sections, features, or CTAs. Choose a section that matches the purpose of your page and copy it onto the canvas.
The section will appear fully styled and responsive. You do not need to resize or adjust layout constraints manually. FramerStacks components automatically adapt to your page width. All you need to choose the right variant for the right breakpoint.
At this stage, focus on structure. Stack a few sections vertically to form the basic layout of your page.
Step 2: Replace the content
Click on the section you added and replace the placeholder text with your own content. Update headlines, descriptions, buttons, and images using Framer’s property controls.
Framerstacks components expose only essential controls to prevent layout breakage. You can safely edit content without worrying about spacing or alignment issues.
As content changes, the layout automatically adjusts to maintain balance and readability.
Step 4: Check responsive views
Switch between desktop, tablet, and mobile breakpoints to review how your page looks across devices. Framerstacks components are responsive by default, so most layouts will already look correct.
If needed, make small adjustments such as refining text size or spacing for smaller screens. Avoid restructuring sections unless absolutely necessary.
This quick review ensures a polished experience for all users regardless of the screen sizes.
Step 5: Publish your beautiful pages
When you’re satisfied with the layout and content, publish your page using Framer’s standard publishing process. No additional steps are required.
Your page will go live with all interactions, responsiveness, and performance optimizations intact. What you see in the editor is what users will experience.
Many congratulations you’ve built your first page using Framerstacks.
Note: Also, don't forget to feed enough data to the page settings to optimize and appear the page on search engine results.
What I can do next?
After completing the Quick start guide, explore more components to expand your site. Try different section variations, experiment with layouts, or connect CMS collections for dynamic content.
For deeper customization, performance tips, and advanced workflows, continue to the full documentation or contact us here. The system is designed to scale with your skills and project needs.
Framerstacks is now part of your workflow, build faster, iterate confidently, and ship with ease.