Summary
Get more meaningful feedback, achieve UI consistency, and scale design process — that’s just three out of multiple improvements you will see once you build prototypes with interactive components. Take part in UXPin’s session and see what you can do to make prototyping interactive by default.
Key Insights
-
•
UXPin Merge directly imports coded UI components into the design canvas, enabling pixel-perfect prototypes consistent with development.
-
•
Designers manipulate component properties rather than breaking apart code-driven components, preserving design fidelity.
-
•
Using Merge promotes harmony and a common language between design and development teams, reducing misunderstandings.
-
•
Component-driven prototyping allows building complex interfaces from atomic design principles, composing organisms from atoms.
-
•
Merge supports interactive behaviors baked into components, like button click ripples and dropdown menus, without additional coding.
-
•
Design changes in Merge are governed by design system rules ensuring brand consistency and limiting product drift.
-
•
Developers can extract exact JSX code specs from the components used within UXPin Merge prototypes for implementation.
-
•
Merge supports responsive media queries, preserving component behavior across device breakpoints.
-
•
Interactions between components can be created by linking events to properties, such as opening or closing modals.
-
•
The gap between design intent and development outcome is minimized by working from the same coded components as a single source of truth.
Notable Quotes
"We help teams onboard their coded components onto the UXPin platform so they can be enabled with component-driven prototyping."
"UXPin is a full-stack platform that bridges the gap between design and development disciplines."
"Component-driven prototyping means designing with coded UI components your development team already created."
"There’s a frustrating gap between what a designer envisions and what actually gets implemented, leaving live prototypes inconsistent."
"Merge translates code from Storybook, npm, or third-party libraries into interactive, visual components in the editor."
"You can’t just break apart these components and type; instead, you change their properties to adjust labels, colors, or icons."
"Designers and developers work from the same source of truth, promoting pixel-perfect parity and consistent user experience."
"All behavior your component is capable of, including responsive and interaction states, will work inside UXPin."
"Interactions are exposed as events on components, so you can define that on clicking a button, a dialog opens."
"Using Merge we’re closing the loop of documentation and empowering stakeholders to communicate via common jargon and components."
Or choose a question:
More Videos
"Don’t ever be afraid to have those difficult conversations because they’re the most important ones to have."
Elena Naids Liza McRuerThe Power of Difficult Conversations: A Case Study on How We Introduced Design Ops in the Federal Government Space
October 2, 2023
"If you’re paying for design today but it’s done poorly by non-designers, wouldn’t you want to spend that money more effectively?"
Audrey CraneShadow Design–Where Else is Design Happening in Your Organization?
April 20, 2023
"The design of our systems should make room for messy, complicated human realities, not just positive illusions."
Deanna ZandtThe Unspoken Complexity of “Self-Care” with Deanna Zandt
July 21, 2022
"Systems thinking can help us design more explicitly for resilience, as seen in distributed manufacturing of PPE during the pandemic."
Sheryl CababaExpanding Your Design Lens with Systems Thinking
February 23, 2023
"Keep legal as a proactive partner, not just someone you call when there’s a problem; build those relationships early over coffee or casual chats."
Eduardo Ortiz Robin Beers Rachael Dietkus, LCSW Bruce Gillespie Jess Greco Marieke McCloskey Renee ReidDay 3 Theme Panel
March 13, 2025
"By bringing truth to power is how we bring excellence to our craft and define our value."
Jemma AhmedTheme 2 Intro
March 26, 2024
"We asked people to judge others’ feedback with an anti-bias lens instead of focusing on their own biases."
Theresa Slate Erin RobertsonWhy Changing Hearts & Minds Doesn’t Work When Promoting DE&I Efforts, but Checklists Do
October 4, 2023
"We put high-fidelity designs in Mural so stakeholders unfamiliar with Figma can still comment and interact."
Erika FlowersIntroduction to MURAL for UX
June 11, 2021
"If you want your question asked, please put it in the Slack channel, because I cannot keep up with the rapid things happening live."
Bria Alexander Louis RosenfeldOpening Remarks Day 1
March 25, 2024
