Design libraries.

Create, manage and share design libraries with your team to streamline your workflow and drive collaboration. Build a library by adding typography, color themes and design assets, and resuse it on any site in the same account.

Start lesson →

Create, manage and share design libraries with your team to streamline your workflow and drive collaboration. Build a library by adding typography, color themes and design assets, and resuse it on any site in the same account.

Let’s explore how to create, manage and share Design Libraries on Editor X.


Libraries are a collection of typography, color themes and designed assets that can be saved and reused across multiple sites. They’re a great tool for boosting velocity and maintaining brand consistency.


Teams can access, share and reuse libraries across sites under the same account to streamline collaboration.


Before we dive in, let’s take a look at the site’s Theme Manager. This is where you can view and edit the typography and color themes of your site, and then add them to your library. Under Typography, you can fully customize the headings and paragraphs on your site.


Under Colors you’ll find the color theme panel. Your palette is built from a default combination of 25 shades that you can customize and apply to your site. Any changes you make to the theme will apply to matching elements on your site.


These typography and color themes can be added to libraries alongside designed site assets. You’ll find design libraries under Tools. Let’s get started.


From here, you can create a new design library, or access your saved ones.


Let’s create a new one. You can choose to import themes and assets from the current site, or uncheck the boxes and start from scratch.


We’ll name our new library here and start customizing.

Let’s head over to the Theme Manager to start editing the typography.


Use the pencil icon to customize your text. You can choose a font, or upload your own, set the text size, and edit the style. Once you click Apply Theme, these style changes will apply to matching text elements across your site.


Select Design Libraries at the top of your theme manager to save your typography theme to an existing Library, or create a new one. We’ll save it to Sauber.


Now let’s set our site colors from the color theme panel. Use this pencil icon to choose a custom color, and adjust the brightness and saturation for each shade.


Once you’ve added the rest of your color themes, select Design Libraries to save the colors to your library.


Alright, now let’s add design assets to our library. You can save entire sections to your library for reuse. Use the breadcrumbs to grab the section you want to add, select the 3 dots and choose Save as Design Asset.


Rename your asset to stay organized. From the dropdown, save it locally under My Assets, or select the design library you want to add it to.


View your saved assets from the Add Panel, under Design Assets.


Select a design library, and use the 3 dots to rename an asset, save it to a new library, or delete it. You can save your local assets to an existing library too.


Let’s head back to Design Libraries to see our new library.  From here you can open the library, duplicate, or delete it.

You can now see the site themes and assets we’ve recently added.


Select the 3 dots to delete an entire theme from your library. Deleting a theme will remove it from your library, but will continue to show everywhere it’s in use on your site.


Now that the library is set, you can share it with your team using this toggle. Your teammates can access and reuse the shared library on any site in this account. 


Note: this toggle will only appear once you’ve set up a Team Account.


To do so, join the Partner Program. To manage your team once you’re set up, select Site from the toolbar to access your Dashboardd, go to your Partner Dashboard, and select Settings.


Here, you can invite people to join your team, and assign roles and set permissions. Teammates with permission to Manage Design Libraries can add, edit and delete any shared library.

Your team can now access and apply shared Design Libraries to any site under the same account.


Let’s see how it’s done. We’ll create a new site starting with a blank canvas. From the Add panel, under Design Assets, you can access the assets we previously saved to our Sauber Design Library.


From the Theme Manager, select Design Libraries at the top to apply themes from our Sauber library.


Editor X is an advanced creation platform. To master it, continue watching this series of video tutorials.

NEXT VIDEOS

Video about how to set up a team account on Editor X.

Learn how to set up a team account.

Play icon
Video about how to assign and manage Roles & Permissions on Editor X.

Discover how to assign and manage roles & permissions.

Play icon
Video about how to communicate in real time on the Editor X canvas.

Learn how to communicate live on the Editor X canvas.

Play icon
Video about how to collaborate in real time on the Editor X canvas.

Watch how you can co-create in real time on every project.

Play icon

Did you find this resource helpful?

Thank you for your feedback!

Related learning resources.

Thumbnail image with a dusty pink background. 5 box outlines are visible with the team accounts icon in the center, of 2 avatars side by side.

LESSONS & EXERCISES

Team Accounts

Find out how to set up a team account to give teammates access to every site in your account.

Thumbnail for design libraries. Pink background with 2 shaded rectangles in the middle. On the top is a small symbol of an open book.

LESSONS & EXERCISES

Design Libraries

Learn how to create, manage and share design libraries with your team.

Video about how to assign and manage Roles & Permissions on Editor X.

VIDEO LIBRARY

Roles & Permissions

Discover how to assign and manage roles & permissions.

LESSONS & EXERCISES

Title

Learn how to take precise control over the positioning of elements using grid.

Start Lesson

Ready to start creating?

Search icon
Home icon
LESSONS & EXERCISES
Arrow down icon
Editor X Essentials
Arrow down icon
Design & Layouting
Arrow down icon
Interactions & Effects
Arrow down icon
Elements & Components
Arrow down icon
Web Concepts
Arrow down icon
Content Management
Arrow down icon
Collaboration
Arrow down icon
VIDEO LIBRARY
Arrow down icon
External link icon
External link icon
ACADEMY MENU ▶
Search icon

Top searches

People are searching for

Video tutorial introducing the Editor X workspace with an overview of the responsive layouting and design tools.

VIDEO LIBRARY

Introducing Editor X

Discover the Editor X workspace. Get an introduction to your advanced layouting tools and an overview of responsive web design features like breakpoints, flexbox and CSS grid.

Video introducing the Editor X workspace with an overview of the responsive layouting tools and design capabilities.

VIDEO LIBRARY

Getting Started

Learn the basics of creating a site on Editor X. Get a step by step walkthrough covering the key features and capabilities.

Thumbnail indicating interactions. Orange background with a shaded orange container over it. In the middle of the container is a white logo.

LESSONS & EXERCISES

Hover Interactions

Design dynamic web experiences by adding a variety of interactions to any element on hover. Customize the interaction settings for every breakpoint, from transform adjustment to advanced design capabilities and timing control.