Unified Design–Engineering Workflow

unify design and engineering by adopting code-based design tools and a single source of truth to deliver fast, high-quality, consistent user experiences.

Explore how UXPin Merge bridges design and development by importing production code into the design editor, enabling collaboration, reusable components, and a single source of truth across teams.

Discover designer experience with merge, a design editor that syncs components with production code, enabling real-time property edits and interactive previews within a single design-to-engineering workflow.

Explore the developer experience with merged and you expand, a unified design-engineering workflow that tests coded components in a visual dev environment.

Explore tech foundation of the unified design–engineering workflow with UXPin Merge Online, config, and presets. See how a serialized map is built and Westpac bundles code with babel and loaders.

Push coded components from your local repo to the you expand merge design editor via CircleCI, enabling a unified design–engineering workflow with continuous integration.

Create jsx presets to define default component configurations stored in the presets directory, enabling drag-and-drop rendering and safe overrides through the overwrite feature of you explain merge.

Explore two integrations with UXPin Merge: clean integration, a direct, fast, low-maintenance connection to your production code. Choose wrapped integration for a highly flexible approach using wrappers and higher-order components.

Explore the full integration of a design system with grommet using the you expand merge workflow, including theme provisioning, web config, wrapper components, and prop types.

Create a simplified web config and expand the merge config to integrate a grommet button, using babble loader and a theme provider wrapper to enable the design system.

Install and configure React properties with npm, merge online, and adapt components using prop types, export default, and presets to enable seamless integration in the design–engineering workflow.

Explore experimental mode by configuring a preset and a button component for UX merge, wiring props, and testing integration via npm scripts, webpack, and raptor wrapper in a dev environment.

Configure continuous integration with CircleCI using a docker-based node environment, install dependencies, and automate code pushes to master via the you merge online workflow.

Integrate the Grommet design system by debugging, setting up, and running components in the editor, then explore the merge, repository, and interactive accordions and form fields.