USING UI PATTERNS IN UXPIN

Use Templates for wireframes and prototypes correctly

Freddy Czaja

The UXPin Design System Library consists of the four sections Colors, Text styles, Assets and UI Patterns. In this article we would like to show you practical tips on how the UI Patterns (templates) work.

Odoo CMS - a big picture

WHY ARE TEMPLATES IN UXPIN NEEDED?

Templates make it easy to change repeating elements without having to rework each element. Example: In UXPin you create a header that is located on 50 subpages. So that you can later change the header without having to visit every single page, create a template for the header and implement it in all the pages provided. If you would like to replace the logo in the header, take the header template from the library - or go to a page with an integrated header - and exchange the logo. Once you have done that, the headers will be changed on all other pages as well.

You will learn how to create templates, what to pay attention to and which rules there are in the following tutorial.

CREATE YOUR OWN TEMPLATES

First, create one or more elements in UXPin. If they are multiple elements, group them in advance by makaging and grouping everything. This is done by either clicking the right mouse button on the elements to be grouped and then grouping, or clicking on the "group" icon in the upper right corner of UXPin.

Now we need to turn the selection into a "symbol" so that we can integrate it into the UI Patterns. Change to an icon works the same way as grouping. So you select the selection, either right-click on the selection and click on "Symbol" or on top right in UXPin click on the icon "Symbol".

Odoo CMS - a big picture

Now follows the final step, inserting into the "UI Patterns" of the "Design System Library". To do this, click on the icon you just created (your selection), then click on the "Design System Library" icon in the left-hand navigation and on the "UI Patterns" area.
Now you have to be careful that you insert the element into the correct library and also select it in the right category.

Odoo CMS - a big picture

The different libraries can be found on the top left, they are opened by clicking on the lettering. Here you select the standard library or create a new one. The same applies to the category: We recommend sorting the templates into different categories in order not to lose track of many templates. To select a category, go to the box next to the internal search and click on the appropriate category or create a new one by clicking on "New category".

Once you've done all this, you can click below the library on the square labeled "Icon" to make the template. Once the template has been created, give it a meaningful name, so that the template can be found anytime and quickly. The naming is very simple, by double-clicking on the name "Symbol" and entering a new name.

Now we have created a template and will describe in the next section how to use it.

Odoo CMS - a big picture

USE TEMPLATE

To put the template on a page, simply click on a template in the library and it will appear on the page. You can also copy a template to the clipboard and paste it elsewhere, it works just as well. UXPin always recognizes templates by their pink coloring - when modifying a template, it should always be remembered that other originals can be affected.

PICTURES, ELEMENTS AND ICONS INSERT & CHANGE

The template is now on the page and we can change it to see what it will do. For this we copy the template and paste it right next to it again. Now, for example, take an icon from the icon library and copy it to the clipboard. Then click on one of the two templates with a double-click, then insert the icon. You can also double click on a template and then click on Box, Circle, Line, Icon or Image in the left navigation and it will be inserted inside the template. If you have done everything right, the icon is located on the left below your template, but inside the "pink" border; and also in the second template the icon is available. Now you move the icon to the designated position, change the size or color - if you have done everything right here, both templates still look the same.

Odoo CMS - a big picture

INSERT TEXTS AND CHANGE

To insert a text into the template, you follow the same procedure as when inserting pictures, elements or icons. Special feature: If you change the text in terms of content, texts in the other templates remain unaffected. If you want the inserted text in all templates, then click on the text; On the right side go to the black field "Overrides" and then to "Set as default". However, if you only want to have the text in one template, leave the black box "Overrides" untouched.

Odoo CMS - a big picture

DELETE TEMPLATES AND SYMBOLS

To avoid confusion with more templates and icons, it's a good idea to delete templates that you no longer use. Before you do that, you need to be sure that they are not being used.

This is how it works: You open the library in the left navigation, click on "Edit" in the lower left of the UI Patterns area and then click on the template to be deleted. Now you just have to click on the link "Delete selected" in the lower left corner and the template has disappeared from the library.

Odoo CMS - a big picture

About Freddy Czaja

SEO is the air he breaths. If it has a bit of Oxygen, he doesn't care/ He likes his coffee black and cold.