What is UXPin Merge?

Merge is a revolutionary technology that lets users import and keep in sync coded React.js components from GIT repositories to the UXPin Editor. Imported components are 100% identical to the components used by developers during the development process. It means that components are going to look, feel and function (interactions, data) just like the real product experienced by the end-users.

Thanks to Merge designers can:

• use components that already exist in the code repository without any additional work or need for coding expertise.
• stop redrawing elements that have already been coded.
• test advanced use cases with interactions and data available in production code.

engineers can:

• accelerate their workflows by assuring that designers use components that have already been coded.
• use auto-generated specification for every design that refers to the real, composed, JSX.
• participate in the advanced prototyping process by writing custom components, iterating on code and connecting components to data sources.

design ops/design systems teams can:

• build unified design systems serving both designers and engineers from a single source of truth set up in code.
• control changes to components in the system by controlling properties of React.js components (prop-types, flow or typescript types and interfaces).
• control the version of the design system and coordinate releases via GitHub for both designers and engineers.

design and engineering leaders can:

• connect and synchronize design and engineering processes.
• realize the agile process without a waterfall handoff.
• take advantage of the shorter path to testing ideas and delivering new features/products to the market.

How Does It Work?

Merge is possible thanks to the paradigm that UXPin has been built on. From the very beginning, UXPin has been a code-based design tool.

The majority of design tools on the market (Photoshop, Sketch, InVision Studio, Figma, etc.) are build on the image-based design tool paradigm. In this paradigm, whenever the user draws something on the canvas or an artboard, the tool renders vector or raster graphics. Those, subsequently, can be used to render full page images in PNG, JPEG, SVG. None of those file formats enable importing interactive components and exporting fully interactive prototypes. They also don't relate in any way to the way developers work and frequently look completely different than what can be achieved with web technologies in a browser — which causes a major disconnection between designers and engineers.

In the code-based design tooling paradigm (UXPin), whenever a user draws something on the canvas the tool creates the html/css/js code and renders it in a visual way with the help of the browser rendering engine.

Thanks to this, you can render any code that the browser can render inside our design editor. This capability leaves behind image-based tools and gives us a technological advantage over them.

In order to complete its goals, Merge Technology works in multiple steps:

1. Merge analyzes and serializes (creates a data structure that represents the repository) the repository where coded components are stored.
2. Merge uses provided webpack config to build all the components.
3. Merge ships all the data to UXPin and renders coded components in a design systems library.

Examples of Components

CSS Grid Implementation with Mineral UI Grid, Box and Card Component

Video Background with Pinterest Gestalt Video Component

Sortable Table that renders based on the provided data set.

Current Status

Want access to UXPin Merge? Request it here!

Design systems are being tested with multiple teams and open-source design systems. So far the following systems have been successfully tested with Merge:

• CA Technologies Mineral UI
• Pivotal Labs Pivotal UI
• Atlassian Atlaskit
• Pinterest Gestalt
• Zendesk Garden
• Shopify Polaris
• IBM Carbon
• Instacart Snacks
• Material UI
• Microsoft Fluent UI
• RMWC
• Salesforce Lightning 
• Semantic UI
• Shopify Polaris