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.
You still can see the code of each Merge element, however, for now, there won’t be any code visible for the whole new component or group.
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 during the trial with the MUI and Storybook Material UI libraries.
For now, you can create Patterns using nested elements with every Merge integration but for Storybook.
When Patterns helps
You will find Patterns useful when you:
- Want to design with advanced coded components but your UI library is limited to basic elements which lack needed properties in code.
- Struggle with importing robust components to UXPin Merge.
- Often have to set the same properties for the same components.
- Lack a step in a process to create and develop new coded components.
- Want to group and save Storybook elements into bigger components.
How to use Patterns
- Add elements or components onto the canvas.
- Set the properties you want.
- Switch to Patterns tab (next to Components).
- Select the group or component on the canvas
- Add it in the Patterns tab
For now, Patterns don’t work with symbols.
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.
You can have multiple Patterns libraries – one for each Merge library as components from different libraries can’t be combined.