Create a UI kit
Create a user interface (UI) kit with common components that lets you copy/paste elements —like footers, calls to action, and buttons — across projects.
If you find yourself creating the same layouts, elements, and pages over and over again, save yourself time and create a UI kit. A UI kit is a library of content with common page elements, like footers and calls to action (CTA), you can reuse in new projects. This includes style guide templates and blog templates.
In this lesson:
- Create a UI kit
- Copy/paste a footer
- Copy/paste a CTA
- Copy/paste a button
- Clone our sample UI kit
Learn more about copying and pasting between projects.
Create a UI kit
To make your own UI kit:
- Create a project (or a new page in your project)
- Style common elements or components you’d like to reuse
- Copy/paste the elements you’d like to reuse into another project.
Pasting a UI kit into another project sets up classes ready to use in your new project.
Copy/paste a footer
To add a footer to your UI kit:
- Copy a previously created footer
- Open a new project (or page) to serve as your UI kit
- Paste the footer in the new project
Once the footer is in the destination project, you can style it however you want to match the destination project.
Copy/paste a CTA
To add a CTA to your UI kit:
- Locate a CTA you’ve previously created (e.g., a form that serves as a CTA)
- Copy the form
- Open the destination project
- Paste the form
Note: while all the form settings in the Designer copy over to your new project, you’ll need to update your project settings.
- Open your project Settings in your Dashboard
- Click the Forms tab
- Fill out the Form notification section to set up your form submission details
Copy/paste a button
To add a button to your UI kit:
- Copy a previously created button
- Open your destination project
- Paste the button
And there you have it! Remember, you can copy/paste any frequently used elements into your UI kit to save yourself time in the future. Here’s to even quicker design!
Clone our sample UI kit
Speaking of quick design — we've made a small sample UI kit for this lesson that you can clone and reuse as you wish. Clone the UI kit project to your account, then copy/paste elements into every new project to kickstart your next website with a clean style guide.