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 customising 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 colour 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 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 colours, 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 colours
Applying brand colours to your design is as simple as selecting the element or elements you wish to apply the colour to, and then clicking the desired colour in the library’s colour section. Any elements selected will receive a fill of the selected colour.
Not only can the colours in the library be used to fill shapes and vector paths, but they can also be used to apply border colours to those same shapes and paths. To do this, with the element(s) selected, rather than clicking the colour, right-click and select Apply border colour to set that particular colour as the border colour.
When applying colours from the library panel, if a change is made to a particular value, those changes will be reflected wherever the colour was applied, making it much more efficient to replace primary or secondary colours 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 colour wherever it is being used.
Applying character styles
Once you have applied the colour 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 colour styles. With a text element selected, the desired character style can be clicked 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 colours, 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 behaviour 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 to 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 to 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.