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
Bria Alexander
Opening Remarks
2024 • Advancing Research 2021
Gold
Louis Rosenfeld
Opening Remarks
2023 • Design in Product 2023
Gold
Indra Klavins
A Design Ops Girl in a Dev Ops World
2019 • DesignOps Summit 2019
Gold
Uday Gajendar
Day 1 Welcome
2024 • Designing with AI 2024
Gold
Roberta Dombrowski
5 Reasons to Bring your Recruiting in House
2021 • DesignOps Summit 2021
Gold
Aurobinda Pradhan
Introduction to Collaborative DesignOps using Cubyts
2022 • DesignOps Summit 2022
Gold
John Cutler
Oxbows, Rivers, and Estuaries: How to navigate the currents of change (without burning out)
2024 • Advancing Service Design 2024
Gold
Sylvie Abookire
A Civic Designer's Guide to Mindful Conflict Navigation
2022 • Civic Design 2022
Gold
Deanna Washington
Scaling Success: Paving the Path from DesignOps to VP
2023 • DesignOps Summit 2023
Gold
Christian Bason
Innovating With People: Unleashing the Potential of Civic Design
2021 • Civic Design 2021
Gold
Dane DeSutter
Beyond the Console: The rise of the Gamer Experience and how gaming will impact UX Research across industries (Videoconference)
2024 • QuantQual Interest Group (Rosenfeld Community)
Sam Proulx
To Boldly Go: The New Frontiers of Accessibility
2022 • Design at Scale 2022
Gold
Michelle Morrison
Culture Design (Videoconference)
2020 • DesignOps Community
Mac Smith
Measuring Up: Using Product Research for Organizational Impact
2021 • Advancing Research 2021
Gold
Chris Geison
What is Research Strategy?
2021 • Advancing Research 2021
Gold
Dorelle Rabinowitz
The Magic Word is Trust
2018 • Enterprise Experience 2018
Gold

More Videos

Angelos Arnis

"AI easily manages many tasks but still struggles with soft skills like cultural nuances and ethical considerations."

Angelos Arnis

Navigating the Rapid Shifts in Tech's Turbulent Terrain

October 2, 2023

John Calhoun

"We want this book to include many voices and practical stories from across the design ops community."

John Calhoun Rachel Posman

Bring your DesignOps Story to Life! The Definitive DesignOps Book Jam

October 3, 2023

Alfred Kahn

"Design systems typically lack content on when and how to use components—adding this makes design more self-service."

Alfred Kahn

A Seat at the Table: Making Your Team a Strategic Partner

November 29, 2023

Dan Willis

"The more specific a story gets, the more universal the themes are felt by everybody."

Dan Willis

Enterprise Storytelling Sessions

June 3, 2019

John Maeda

"Design is often subordinate to marketing and product management because those functions came first historically."

John Maeda Alison Rand

About Design Organizations (Videoconference)

May 13, 2019

Anat Fintzi

"Empathy for us needed to be redefined from problem-based to solution-based to avoid an us versus them mindset."

Anat Fintzi Rachel Minnicks

Delivering at Scale: Making Traction with Resistant Partners

June 9, 2022

Uday Gajendar

"Temporary, quick, and sometimes rough artifacts have a lifespan just long enough for the conversation they enable."

Uday Gajendar

The Wicked Craft of Enterprise UX

May 13, 2015

Kristin Skinner

"The audience tripled from 200 to 600 in the second year, which absolutely blew us away."

Kristin Skinner

Theme 1 Intro

September 29, 2021

Maish Nichani

"Singapore is a nation by design. Nothing we have today is natural or happened by itself—somebody thought about it and made it happen."

Maish Nichani

Sparking a Service Excellence Mindset at a Government Agency

December 9, 2021