Rosenverse

This video is only accessible to Gold members. Log in or register for a free Gold Trial Account to watch.

Log in Register

Most conference talks are accessible to Gold members, while community videos are generally available to all logged-in members.

How to Build Prototypes that Behave like an End-Product
Gold
Tuesday, December 6, 2022 • Design in Product 2022
Share the love for this talk
How to Build Prototypes that Behave like an End-Product
Speakers: Jack Behar
Link:

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 allows designers to use real coded components from the development team’s design system, ensuring prototypes match production code exactly.

  • Traditional prototyping tools create only mid-fidelity prototypes lacking true interactivity and pixel parity, causing the design-development gap.

  • Merge imports components from Storybook, npm packages, or third-party libraries like Material UI into UXPin’s design canvas as editable visual components.

  • Designers modify component properties (like color, size, icons) instead of altering code, enabling easy and governed customization.

  • Complex components such as cards and headers are composed of smaller coded components that can be nested, reordered, or replaced visually.

  • Interactions like opening a modal dialog are implemented by linking component events and properties within UXPin without coding.

  • Using coded components promotes maintaining a single source of truth, limiting product drift and ensuring consistent user experience.

  • Merge supports responsive behaviors and media queries within prototypes, preserving real app responsiveness.

  • Merge empowers collaboration by giving designers, developers, and stakeholders a common language and live documentation linked to components.

  • UXPin’s version control allows switching between different versions of design systems, supporting scalable design management.

Notable Quotes

"We can build prototypes that behave like an end product right out of the box without any code or complicated process."

"UXPin’s mission has been to bridge the gap between design and development disciplines."

"Merge translates UI components into a visual, configurable, interactive library in the UXPin editor, working from a single source of truth."

"This is not a simple flip of artboards; this is actually contained code with real interactivity baked in."

"We are now working with high fidelity by default because all coded functions and behavior of components are already there."

"You can drag coded components onto the canvas and modify their properties like color, size, and icons without breaking their code."

"When designers and developers use the same coded components, we achieve pixel-perfect parity and consistent user experiences."

"Interactions like clicking a button to open a modal are built by linking component events and properties, no code required."

"Merge closes the loop of documentation, empowering everyone to communicate via the same jargon and reference the same components."

"Responsive behaviors like media queries continue to work inside UXPin prototypes when using coded components."

Ask the Rosenbot
Megan Blocker
Getting to the “So What?”: How Management Consulting Practices Can Transform Your Approach to Research
2024 • Advancing Research 2024
Gold
Soma Ghosh
What emerging methods are advancing UX research [Advancing Research Community Workshop Series] (Videoconference)
2023 • Advancing Research Community
Rima Campbell
Increase Productivity and Drive Business Impact
2024 • DesignOps 2024
Gold
Saskia Liebenberg
Start Small for Big Impact (Videoconference)
2019 • DesignOps Community
Dave Malouf
The Past, Present, and Future of DesignOps: a 2-part DesignOps Community Call (Part 2) (Videoconference)
2022 • DesignOps Community
Sarah Kinkade
Design Management Models in the Face of Transformation
2022 • Design at Scale 2022
Gold
Alberto Ferreira
Making it Count: Developing a custom digital metric framework that works
2021 • QuantQual Interest Group (Rosenfeld Community)
Christian Crumlish
Afternoon Insights Panel
2022 • Design in Product 2022
Gold
Jose Coronado
From Zero to Hero
2022 • DesignOps Summit 2022
Gold
Ned Dwyer
The Intersection of Design and ResearchOps
2024 • DesignOps 2024
Gold
Sheryl Cababa
Living in the Clouds: Adopting a Systems Thinking Mindset
2023 • Enterprise UX 2023
Gold
Deirdre Hirschtritt
Research is Only as Good as the Relationships You Build
2022 • Civic Design 2022
Gold
Chris Hammond
Embedding sustainability into enterprise design and development: A journey towards "sustainability consciousness"
2025 • Climate UX Interest Group (Rosenfeld Community)
Indra Klavins
A Design Ops Girl in a Dev Ops World
2019 • DesignOps Summit 2019
Gold
Iram Shah
Closing Keynote: The View from the Top
2019 • Enterprise Experience 2019
Gold
Benjamin Real
Showing the Value of DesignOps by Not Having a DesignOps Team
2020 • DesignOps Summit 2020
Gold

More Videos

"Organizations don’t always need external training; they can facilitate internal learning and mentorship."

Shaping design, designers and teams

November 8, 2018

Sabrina Mach

"Design often ends up being a means to fix what development has already delivered."

Sabrina Mach Nina Wainwright

How to Design Your Design Operating Model

September 29, 2021

Samuel Proulx

"Complexity is not a barrier to accessibility – even the most complicated games have been made accessible."

Samuel Proulx

Invisible barriers: Why accessible service design can’t be an afterthought

December 3, 2024

Saara Kamppari-Miller

"Design, product, engineering, legal, and leadership all need to be involved; it should never be just one group’s responsibility."

Saara Kamppari-Miller

DesignOps for Inclusive Design and Accessibility (Videoconference)

May 26, 2022

Briana Thomas

"I simply asked the team about their strengths and needs instead of figuring it all out on my own."

Briana Thomas

The Quiet Force: Uncovering Hidden Leadership in High-Impact Design Teams

September 24, 2024

Adam Cutler

"Can you show me your process, not just your portfolio? That shows me your real design thinking."

Adam Cutler Karen Pascoe Ian Swinson Susan Worthman

Discussion

June 8, 2016

"It’s kind of difficult to break the rules when they’re not very clear and they’re not really there."

Operationalizing DesignOps

November 7, 2018

Leah Buley

"This is not brain cancer. Nobody dies if we get it wrong — the worst is taking a different approach."

Leah Buley Joe Natoli

Ask Me Anything with Leah Buley and Joe Natoli, co-authors of The User Experience Team of One (2nd edition)

October 8, 2024

Nathan Shedroff

"Traditional MBAs are confident about many things that aren’t true, and your research will often challenge their worldview."

Nathan Shedroff

Double Your Mileage: Use Your Research Strategically

March 31, 2020