Feature
Designer

Share components and variables across sites with Libraries

Libraries provide a multi-site design system within Webflow. Share and update components and variables to drive consistency and elevate your brand or brands.

Feature
Designer

Share components and variables across sites with Libraries

Libraries provide a multi-site design system within Webflow. Share and update components and variables to drive consistency and elevate your brand or brands.

Feature
Designer

Share components and variables across sites with Libraries

Libraries provide a multi-site design system within Webflow. Share and update components and variables to drive consistency and elevate your brand or brands.

Building multiple on-brand sites has never been faster or easier thanks to the reusability, consistency, and change management offered by Libraries. Components and variables are powerful primitives for reusability on a single site—but until now, ensuring design consistency across multiple sites was a challenge, often leading to out-of-sync designs and tedious copy-paste workflows. With Libraries, you can easily maintain a unified design system, keeping all your sites effortlessly aligned and up-to-date.

Libraries are a centralized design system across all of your sites, empowering you to share and update components and variables.

The new “Manage libraries” modal enables workspace sharing and management of updates to a design system. 

The new “Manage libraries” modal — accessible from the Components or Variables panels — offers a single place to share, install, and manage updates to your Libraries. Once installed, all of the components and variables in a Library are available alongside that site’s local components and variables. 

How does it work?

  • Share a library of components and variables from a new or existing site — no need to start from scratch.
  • Install a shared library on any site in your Workspace to immediately leverage your existing designs.
  • Build using a library by leveraging its shared components — including props — and variables for fast customization.
  • Update a library and cascade updates to your design system with change management workflows that let each site decide when to accept updates from the shared library.

What are some examples?

Multiple sites or microsites that share the same brand: Libraries enable sharing of components and variables between the main .com site and auxiliary sites. Teams can share what’s most useful to maintain brand consistency while also creating additional specific styles and components unique to the microsite. This ensures multiple sites stay "on brand" with a consistent look and feel, even if one site requires a different navigation or a unique experience. For an example, consider how webflow.com and webflow.com/university have similarities and differences. 

Centralized control of design system primitives: Libraries simplify the process when making system-wide design changes, such as updating a header or footer or choosing a new font or brand color across multiple sites. Now, the designs can be updated once on the Library source site, cascading to all sites when the update is accepted.

Composability with local and shared design primitives: The newly released component slots feature works hand in hand with Libraries, providing teams with more design composability. By leveraging Libraries, teams can mix local components with those from shared libraries. For example, use the layout design system from a shared library and add local components into the slots. Examples could be a CTA on a landing page, or a button within the navigation, or the cards within a recommended content section. 

Libraries for Workspaces are available now for customers on Growth, Agency, and Enterprise plans. Visit Webflow University for more information on how Libraries can help you unify multiple sites to life.

Launched on
July 23, 2024
Category
Designer