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
Francesca Barrientos, PhD
You Need Your Own Definition of Design Maturity
2022 • Design at Scale 2022
Gold
Dan Mall
“Ask Me Anything” with Dan Mall, Author of Upcoming Rosenfeld Title, Design that Scales
2023 • DesignOps Summit 2023
Gold
Verónica Urzúa
The B-side of the Research Impact
2021 • Advancing Research 2021
Gold
Kristin Wisnewski
Measuring What Matters
2019 • DesignOps Summit 2019
Gold
Asia Hoe
Partnering with Product: A Journey from Junior to Senior Design
2023 • Design in Product 2023
Gold
Caitlyn Hampton
Compass 101: Growing Your Career In A Startup World
2021 • Design at Scale 2021
Gold
Jacqui Frey
Scale is Social Work (Videoconference)
2020 • DesignOps Community
Laura Smith
Embedding Service Design and Agile Practice within UK Planning Teams to Create Services that Last
2024 • Advancing Service Design 2024
Gold
Theresa Neil
Designing for Wellness: Specializing in Healthcare (Videoconference)
2024 • Rosenfeld Community
John Cutler
Prioritization for designers and product managers (1st of 3 seminars) (Videoconference)
2024 • Rosenfeld Community
Dave Malouf
Closing Keynote: Amplify. Not Optimize.
2019 • DesignOps Summit 2019
Gold
Peter Morville
The Architecture of Understanding
2015 • Enterprise UX 2015
Gold
Bria Alexander
OKRs—Helpful or Harmful? (Videoconference)
2022 • DesignOps Community
Christian Bason
Innovating With People: Unleashing the Potential of Civic Design
2021 • Civic Design 2021
Gold
Kavana Ramesh
Meaningful inclusion: Practicing accessibility research with confidence
2024 • DesignOps 2024
Gold
Jon Fukuda
Storytelling for DesignOps (Videoconference)
2023 • DesignOps Community

More Videos

Jennifer Kanyamibwa

"Process can make things scalable and bring folks together in ways that are not even imaginable."

Jennifer Kanyamibwa

Creating the Blueprint: Growing and Building Design Teams

November 8, 2018

Brigette Metzler

"The skills involved in building and maintaining a repo aren’t necessarily those that researchers carry."

Brigette Metzler Dana Chrisfield

Research Repositories: A global project by the ResearchOps Community (Videoconference)

August 27, 2020

Carl Turner

"Project delays are frequently due to organizational and cultural issues rather than actions of the project team."

Carl Turner

You Can Do This: Understand and Solve Organizational Problems to Jumpstart a Dead Project

March 28, 2023

John Mortimer

"If you want to bring dots closer together, you have to constantly notice how things change in the moment."

John Mortimer Milan Guenther Lucy Ellis Patrick Quattlebaum

Panel Discussion

December 3, 2024

Dante Guintu

"Fifty percent of our designers were already active in coaching or mentoring, yet there was a call for a different mentorship flavor."

Dante Guintu

How to Crush the Talent Crunch

September 8, 2022

Richard Buchanan

"Marketing and strategy are part of design."

Richard Buchanan

Creativity and Principles in the Flourishing Enterprise

June 15, 2018

Dan Willis

"Outsider versus insider is a cute bunny, but it’s kind of an artificial separation."

Dan Willis

Theme 3: Intro

January 8, 2024

Dan Ward

"The Wright siblings had a sister, Catherine, who was a full participant and should also be remembered."

Dan Ward

Failure Friday #1 with Dan Ward

February 7, 2025

Chris Geison

"Generative workshops such as design sprints can devolve into political theater if we’re not careful."

Chris Geison

Theme Two Intro

March 28, 2023