Get a copy of our Style Guide

The Designrmind Style Guide provides all the text styles, color styles and UI elements used in most web designs. Breakpoints have already been set up for desktop, tablet, and mobile responsive design. Simply copy and paste components onto the canvas, apply Styles, and begin customizing your design. You can get a copy of the Designrmind Style Guide here.

‍

Copying and pasting components

Copy any component from our library with a click of a button! After copying a component, paste it onto your canvas in Framer by pressing Command+V on Mac or Control+V on Windows.

If the component looks a bit weird after pasting, make sure the width of the component is set to "Fill". This will allow the component to remain responsive throughout all breakpoints.

Tablet and mobile variants should have already been applied after pasting, but if it wasn't, the component variant can be changed in the design menu to the right in Framer to fit the appropriate breakpoint.

‍

Editing components

Every component is fully editable. From text to images to colors, all elements of the component can be edited to fit your client's branding.

Before you begin editing, you will need to unlink the component instance. You can right click the component to unlink or simply double click the component, after which you will receive a prompt allowing you to unlink the instance.

After unlinking the instance, double clicking the component will bring you into Framer's component window. Here, you can make any necessary changes or edits.

‍

Styling components

The Designrmind Style Guide comes with styles you can use and apply to all elements of the component.

All styles can be found in the Assets tab on the panel to the left in Framer. Changes that are made to Styles will affect all elements with the applied style across the whole project. This will make editing much quicker instead of tediously changes elements one by one.

Both text and color styles can be applied from the design panel to the right in Framer.

The buttons that come with the Designrmind Style Guide include multiple variants for different use cases. The sizes, colors, and icons of the buttons can be changed to fit your project's branding.

In order to use the buttons included with the Designrmind Style Guide, the default buttons that come with the components will need to be replaced. You can do so by right-clicking the default button, and replacing it with the button from the Style Guide.

‍

Thank you!

We hope you find this guide helpful in getting started with Framer and the Designrmind component library. We truly appreciate those who have supported us thus far and continue to use our components in their projects. With your support and feedback, we will work hard and continue to improve the Designrmind component library.