Design a website with brand pattern libraries.

If you work in an agency environment or you’re a freelancer, switching between projects and brands can be a common occurrence that eats up precious time in your workday. In some cases you may even be designing similar layouts, or customizing a standard layout or design for several customers. When operating in this kind of workflow, leveraging the power of Creative Cloud Libraries in Adobe XD can help make this process more efficient.

In this guide, learn how to go from a wireframe or layout template to a complete, high-fidelity design in record time using brand assets from a Creative Cloud library. Simply drag and drop components and imagery, then apply color fills and character styles in a single click. This guide will be leveraging the Altura UI Kit converted into a Library for easy access. You can access the public library here.

Start from wireframes

ln this example, wireframes, or templates, of a page layout have been created using the Quick Mockup plugin. Creative Cloud Libraries will be used to take the project from the blocked out wireframe to a high-fidelity design matching the client’s branding. If you’re looking for a starting point for your wireframes, try the Quick Mockup plugin for quickly generating page templates and layouts.

This page layout was started from a template, but then certain elements were converted to components to make the process of replacing elements with branded components a little bit easier. You can learn more about this process in our sign-up flow wireframing guide.

Connecting to a shared library

Creative Cloud Libraries is a powerful tool for managing creative assets across Creative Cloud applications like Adobe XD, Photoshop, Illustrator, and more. Libraries can be created and shared across a team, or accessed from the various applications to streamline design systems and asset management.

To connect to a library that has been shared with you from within Adobe XD, toggle to the Library panel in the bottom left hand corner of the interface. Navigate to show all libraries by clicking the arrow next to Document Assets. From here clicking on the + will bring up a view of all available libraries and those shared with you. Simply toggle on the library you wish to be available from within Adobe XD.

Selecting the desired library from the list in the panel will now show all available colors, character styles, components, and graphics contained within. These assets can now easily be applied to the wireframe design in several ways.

Depending on your library structure, certain assets like images may be stored in another library, such as a Stock Assets library. Simply repeat the steps above to enable additional libraries and switch between them as needed.

Applying brand colors

Applying brand colors to your design is as simple as selecting the element or elements you wish to apply the color to, and then clicking on the desired color in the library’s color section. Any elements selected will receive a fill of the selected color.

Not only can the colors in the library be used to fill shapes and vector paths, but they can also be used to apply border colors to those same shapes and paths. To do this, with the element(s) selected, rather than clicking on the color, right-click and select Apply border color to set that particular color as the border color.

When applying colors from the library panel, if a change is made to a particular value, those changes will be reflected wherever the color was applied, making it much more efficient to replace primary or secondary colors in a design. To do this, simply right-click and select Edit (if you have required edit permissions) or Open source document, and make the edits – it is that simple. Your design will now reflect the updated color wherever it is being used.

Applying character styles

Once you have applied the color styles to your wireframe, the next step is to begin applying the character styles, or branded typography as defined within the library. To do this your wireframe will need to have text boxes and not just representative blocks for your text. Whether the text is final copy or not does not matter at this stage, as long as the content is in text box format.

Applying character styles is as straightforward as applying color styles. With a text element selected, the desired character style can be clicked on in the Library panel to apply it. Multiple text elements can be selected at once to make this process even more efficient.

In the same way as with colors, character styles can be edited in the library and those changes will pass along to the instances on the canvas. This update process makes it efficient for adjusting type styles as you refine your design.

Inserting logos and graphics

Images can be saved to libraries in one of two ways, either as graphics (through Photoshop, Illustrator, or from sources like Adobe Stock), which we’ll discuss in this section, or as components which will be covered in the next section.

Images added as graphics, like those from Adobe Stock behave much like an image stored on your computer in MacOS Finder or Windows Explorer. These assets may be kept in a separate library depending on your team configuration, but the behavior remains the same – they can either be dragged out and placed anywhere on the canvas, or dragged into a shape to automatically mask and fill the shape.

If you’re adding a logo graphic to the page, the same principles apply. A logo can be saved to the library either as a vector graphic or as a component, though leveraging component functionality and states can provide greater options and variations for working with logos.

Using pre-built components

If you’re working with a design system, building a web app-based product, or you simply have pre-built elements and logos for your website design saved as components, they can easily be substituted into the design. Learn more about working with components in these guides.

Depending on your application these components may be simple layout blocks, or more intricate components with states and interactions built in. Either way, applying them to your design is the same process.

If your wireframe makes use of simple block components, you can leverage the drag to replace functionality between components. Simply drag the new component out of the library panel and hover over the component you wish to replace. The target component will highlight blue, and when you release the mouse cursor the new component will be dropped into place.

Depending on the size of your components you may need to adjust them to fit the layout, but Responsive Resize will help you make easy work of that.

Alternatively, if you are replacing an element that wasn’t already a component, drag the new component over top and position it into place. You can then use the layer panel to select the element underneath and delete it.

Repeat this process until all your page elements are in place and you’ll be left with a completed design using Creative Cloud Libraries. Using the cross-application power of Libraries can help you go from wireframe, or blank canvas, to a fully formed high-fidelity website in no time whether you’re using a robust design system, or a brand pattern library.