User Guide
Welcome to FramerBlocks, the comprehensive UI kit designed specifically for Framer projects. Our component kit is here to elevate your UI design and development process to new heights. It is highly encouraged to read the user guide below in full to allow for the best user experience.
Placement - Elements
The Element components are versatile, individual assets meticulously crafted for easy integration within any project. These components include Buttons, tooltips, accordions, cards, and more. You can use them on any page or for any purpose within your project.
Leveraging the power of the Framer component system, these assets seamlessly fit into your project and can be edited effortlessly. Some elements, like the button, are designed to be easily customizable without altering the primary component variant. This means you can add multiple instances of the button and conveniently switch between design variants by simply selecting the component and adjusting the variant from the right action bar in Framer.
Changing the primary variant of an asset with override all instances within your website!
For other assets like the Card, you insert the primary card assets, then right-click on the component within your page and select "detach instance." This option allows you to modify the component easily within the specific page, without affecting the primary variant.
How to add an element to a page:
Navigate to the assets tab on the left-hand action bar, select the relevant category of asset, drag and drop the asset into your page.
Option 1: Modify the variant settings available in the right-hand action bar. These settings may differ based on the component but usually include options to edit text, colors, and links.
Option 2: After placing the asset on your page, right-click on it and choose "detach instance." This enables comprehensive component editing directly within your page. However, please be aware that for assets with nested components like the accordion or tabs, this approach may disrupt their functionality. In such cases, it is recommended to use option 1.
Placement - Layouts
The layout assets in FramerBlocks are intended to represent entire sections of a webpage in your website design. Unlike the element assets, Layouts are not implemented as Framer Components. This design choice allows for simpler editing and minor adjustments directly within the page itself.
How to add a layout to a page:
Navigate to the relevant layout page utilising the dashboard or the pages links located on the left-hand action bar
Click on the layout that you would like to copy, ensure you have selected the layer that says is labelled "copy this layer".
Right click and select "copy", alternatively press CTRL C.
Navigate to your site, right click and select "paste", alternatively press CTRL V.
Placement - Navigation
The navigation assets in FramerBlocks are exclusively based on components. Unlike the elements, it is recommended to keep these assets as components to ensure consistent changes across all pages of your website. For instance, if you make adjustments to the navigation bar layout, it is ideal for these modifications to be automatically applied to all pages, eliminating the need for manual adjustments on each individual page.
How to add a layout to a page:
Navigate to the relevant navigation page utilising the dashboard or the pages links located on the left-hand action bar. Alternatively, you can select the assets tab in the left-hand action bar.
Option 1: Select the navigation asset you would like to copy, right click and select "copy". Navigate to your site and paste the asset.
Option 2: Select your desired navigation asset in the left-hand action bar and drop into your site.
Double-click on the asset to enter the component editing screen, make desired adjustments as required.