How to Use UXPin Merge Patterns? A Quick Tutorial
A product and its design system are ever-evolving projects. As the product scales, designers must create new UI patterns and components to meet business goals and user needs while solving usability challenges.
UXPin’s Patterns allow design teams to combine existing Merge components with standard UI elements to create new UI patterns and save them to a UXPin library.
Create a fully-integrated design system and deliver a single source of truth to your product development teams with UXPin Merge. Head over to our Merge page for more details and how to request access to this revolutionary code-based design technology.
What is UXPin Merge, and how can it help you?
Merge allows you to import a component library‘s elements hosted in a Git repository, Storybook or npm package to UXPin’s design editor, so the entire team uses the same design system. Then, designers can use those elements and build prototypes that are fully consistent with end product.
Traditionally, most design systems feature two UI libraries:
- Design teams use a static UI kit
- Engineers use a coded component library
Although many organizations claim this dual system is a single source of truth, achieving it takes a lot of time and resources.
UXPin Merge is genuinely a single source of truth because there is only one component library. Designers and engineers use the same UI elements and patterns from the same repository.
You can sync React components using Merge for Git or UXPin’s Storybook Integration for other popular front-end technologies like Vue, Ember, Web Components, Angular, and more.
Designers can also import the npm packages of open-source component libraries like MUI, Bootstrap, Ant Design, Lightning, etc., through Merge’s npmIntegration to build fully-functioning prototypes or a minimum viable product (MVP).
What is the UXPin Patterns?
Patterns is a Merge-exclusive feature enabling design teams to combine Merge components and standard UXPin UI elements to build more complex UI patterns.
In the context of Brad Frost’s Atomic Design, Patterns allows designers to take atoms and molecules (foundational UI elements and components) to build larger, more complex designs like organisms and templates (cards, forms, navigation, headers, footers, etc.)
Some of the most common use cases for UXPin Patterns include:
- Creating advanced components not available in your current library
- Save properties for your most commonly used component variants
- Grouping and saving Merge elements into bigger UI patterns
- Sharing new UI patterns with design teams to enhance consistency
- Promoting new patterns for engineers to add to the component library
Designers can combine UI elements from multiple component libraries or UXPin Classic components to create new patterns. This flexibility is beneficial if your design system doesn’t have the parts required for a new UI pattern.
For example, let’s say you want to build a header navigation with dropdown menus, but your current design system doesn’t have them. You can use UXPin’s npm Integration to import a dropdown menu from MUI (or another open-source library) and use it to build the new navigational pattern. Engineers can read MUI’s docs and view the JSX code to understand how to code your new pattern and add it to the design system.
3 Benefits of UXPin Patterns
Patterns offer three primary benefits to product development and design system teams. The common thread among these three benefits is that Patterns provides a comparable alternative when your Merge repository doesn’t have what you need.
1. Nesting UI Elements to Build Complex Components
Even with a comprehensive design system, designers often have to create new components and patterns as the product evolves. Often, these patterns don’t exist in the design system, so designers must build them from scratch every time.
Designing from scratch can add valuable time to your project, especially if you’re building something like a graph or data table. Instead, you can create these complex patterns once and save them to your UXPin Pattern library. You can also share these with other designers so teams aren’t doing duplicate work or creating inconsistencies.
While many design tools offer this functionality, none allow you to manipulate and combine code components. With Patterns, designers take on a hybrid designer/engineer role capable of building fully functioning, complex UIs without writing a single line of code.
2. Reusing Properties for the Same Component
Even though Merge allows designers to build prototypes significantly faster than image-based design tools, there’s always room to create greater efficiency.
For example, you might want to save patterns for various Merge form input or button states, like default, error, warning, and success. With Patterns, you can set these up once and save them to your pattern library, ready to drag and drop for the next user interface.
These pre-built patterns are especially useful for design sprints or making quick changes during stakeholder meetings and user testing. Instead of fiddling with properties in UXPin’s Properties Panel, you simply drag the desired pattern onto the canvas, ready to go!
3. Promoting & Testing new Design System UI Elements
New UI elements don’t magically appear in your design system. The DS team must build and test these patterns before release. With UXPin Patterns, the DS team can combine existing components with UXPin Classic or open-source libraries to test and iterate at higher fidelity and functionality.
Component-driven prototyping with UXPin Merge and Patterns allows designers to test and iterate with less input from engineers, who are free to focus on developing the final component and working through any design system technical backlogs.
With Patterns, design teams don’t have to wait for engineers to develop the new component. They can use the prototype pattern created by the DS team to continue the design and testing process without compromising fidelity and functionality.
UXPin Patterns is a fantastic tool for creating one-off or rarely-used UI components. These patterns aren’t used enough for promotion to the design system, but design teams still need access to them.
Storing these in your UXPin Patterns Library provides the benefits of fully functional Merge components without adding them to the design system’s repository. Engineers can store the component in a separate repository and use it when needed.
How to use UXPin Merge Patterns?
This quick demo shows how easy it is to create a new Merge Pattern in UXPin. We’re using the same components we imported for our MUI npm Tutorial, which you can check out here.
The pattern below features three MUI components imported using Merge’s npm Integration and two UXPin Classic text elements–not going to win any design awards, we know!
But even a simple pattern like this takes some setting up, so it would be nice to eliminate that repetitive task by creating a reusable pattern.
Step 1
Add and arrange the components you want for your pattern. Remember, you can combine multiple component libraries and UXPin Classic elements.
Step 2
Set the properties for the Merge components.
- We’ve created an email input field with a placeholder and some help text for accessibility. We’ve also made this field required so users know they must complete it.
- Next, we’ve added an MUI checkbox that users must check to accept marketing from us.
- Lastly, we’ve chosen an MUI button and set it to primary so it’s obvious where users must click once they complete the email field and checkbox.
Here is an example of the email component’s Properties Panel.
Step 3
Switch to the Patterns tab on the left sidebar above your component library.
Step 4
Select the group of UI elements or a single component you want to save as a pattern. Click the large white + Add button in the left sidebar, and your new pattern will appear.
Step 5
Click on the pattern’s name to change it to something more descriptive or to align with your design system’s naming convention. Once you have multiple patterns, you can use UXPin’s search feature to filter what you need.
Deleting a Pattern
You can also delete any old patterns by clicking the pencil icon (“Enter edit mode”) below.
Select the patterns you want to remove and click Delete.
Creating Different States
Now that we have a default pattern, we might want to create additional states to optimize our workflow further.
For example, we can set up an error state pattern triggered when the user doesn’t enter an email address.
We could also create a disabled state for the button that’s only active once the user enters a valid email address and checks the marketing terms.
Now we have three newsletter patterns ready to start prototyping. Designers can drag and drop to make quick changes without worrying about setting properties or switching individual components from the pattern.
Ready to streamline your workflows with UXPin Merge and Patterns? Request access to Merge and let’s get going.
