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:
Learn more about copying and pasting between projects.
To make your own UI kit:
Pasting a UI kit into another project sets up classes ready to use in your new project.
To add a footer to your UI kit:
Once the footer is in the destination project, you can style it however you want to match the destination project.
To add a CTA to your UI kit:
Note: while all the form settings in the Designer copy over to your new project, you’ll need to update your project settings.
To add a button to your UI kit:
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!
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.
Something went wrong while submitting the form. Please contact support@webflow.com
Got a lesson suggestion? Let us know
Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback