Patterns

Patterns is a Merge-exclusive feature which allows you to combine Merge UI elements into new components and add them to your library. Growing your design library isn’t an easy task and it takes time and effort across both design and engineering teams, Patterns will help you to omit the development phase to add new components or their variants to your design library. Now you can add your new components to a new section of your Merge library.

Patterns allows you to: 

• Reuse component variants – save time on setting the same properties for the same components 
• Design with advanced components even if they are not in your design library.
• Simplify adding new components to your design system – combine Merge and standard elements, save the new component in the Patterns library and pass it to developers.

Availability 

Patterns comes as a new tab in your Design Library. The new section is available on all Merge plans and works with all types of integration (Git, Storybook, and NPM). Patterns are also available for our built-in UI libraries, including MUI, Ant-Design, Bootstrap, and Tailwind UI. 

When Patterns helps

You will find Patterns useful when you:

1. Want to design with advanced coded components but your UI library is limited to basic elements which lack needed properties in code. 
2. Struggle with importing robust components to UXPin Merge. 
3. Often have to set the same properties for the same components. 
4. Lack a step in a process to create and develop new coded components. 
5. Want to group and save Storybook elements into bigger components.

How to use Patterns

1. Add elements or components onto the canvas.
2. Set the properties you want.
3. Switch to Patterns tab (next to Components).
4. Select the group or component on the canvas
5. Add it in the Patterns tab

The components in the Patterns library will be available for your team. If you want to update them, drop the components onto the canvas, apply changes, and add them to the library once again.