At the UXCamp.ch barcamp on May 11, 2019 in Zurich, Marcel Kessler talked about what he thinks is the future of prototyping: Using coded react components in tools like UXPin (Merge), FramerX (Bridge), Alva and Modulz.

1. Marcel Kessler
uxcamp.ch, 2019-05-11
Demo and discussion of prototyping with coded components
The future of prototyping

2. TOC
What
- is this all about?
Why
- do I think this is the future of prototyping?
How
- does it work with UXPin Merge?
- does it work with FramerX?
- does it work with Alva?
- does it work with Modulz?
What
- do you think?
2

3. am I?
Who

5. 5
A leading and independent Swiss
software company
Reliably reaching digital business
targets on an engaging journey
Innovative software covering the
entire lifecycle
Locations in Europe and Middle
East

6. Facts and figures
6
Revenue
55 Mio
CHF in 2017
400 customers and
1’750
Successfully completed
projects
13 offices in
6
countries
Established
1996
in Switzerland
500
Employees
Honored with
23
awards in the last 5 years

7. UXO – the Netcetera User Experience Office
Switzerland
Austria
Macedonia
15
UX experts
Research
Concept / Design
Implementation
Full service
in-house
design agency

8. 8
UXO Locations @ Netcetera
15 UX experts in 4 out of 11+ cities
Interdisciplinary approach
Attractive nearshoring rates
UX-Architects close to the customer
Successful remote collaboration
Zurich (HQ)
Bern
Linz
Central Europe
Emirates (UAE)
Macedonia
Skopje

9. What is this all about?
9

13. What is your prototyping toolbox?
13

14. What is your prototyping workflow?
14

15. The alternative
15

16. 16
UXPin Merge
Designers and engineers express their thoughts
and ideas with tools lacking compatibility and
synchronicity. Developers work with the final,
platform-specific production technologies,
designers often use vector illustration tools (Sketch,
Figma, XD…) to design static representations of
interfaces.
Marcin Treder
https://medium.com/@marcintreder/can-designers-and-engineers-use-a-single-source-of-truth-ef10fb88a316

17. 17
UXPin Merge
What if designers could use the very same
components used by engineers and they’re all
stored in a shared design system (with accurate
documentation and tests)? Many of the frustrating
and expensive misunderstandings between
designers and engineers would stop happening.
Marcin Treder
https://medium.com/@marcintreder/can-designers-and-engineers-use-a-single-source-of-truth-24490697ceec

18. 18
Create living prototypes with code components.
Alva lets you design interactive products based on components engineered by
your developers.
Alva
https://meetalva.io/

19. 19
Almost all design tools are optimised for illustration. Vector-based tools are
great for wireframing and exploration, but when it comes to designing
interactive components, complex layouts and stateful user interfaces—we need
something more powerful.Modulz is specifically designed to produce robust,
accessible, production-grade components and interfaces.
Modulz
https://www.modulz.app/

20. 20
Make your prototypes feel real by adding interactive components. Drag and
drop animations, data, and rich media elements straight onto your canvas and
then customize everything through custom UI. All components are backed by
code, bringing you that much closer to development.
FramerX
https://www.framer.com/prototyping/

21. 21
Across every company size and industry, there emerged two key determinators
of a successful design system:
- A workflow for keeping every component up-to-date.
- A direct connection between design systems and production code.
FramerX Bridge
https://www.framer.com/blog/posts/announcing-framer-bridge/

22. How the workflow could be…
>_
22

23. Design and Developer collaboration
1. Agree on (or create) a Design System that roughly fits user and biz requirements
2. Start prototyping in [UXPin|FramerX|Alva] using the provided react components
3. Apply theming directly in the code (SCSS)
4. For new (i.e. not-yet-existing) components
1. Design component and behavior in [Sketch|Figma|…]
2. Import visual design to [UXPin|FramerX|Alva] to continue prototyping
3. Implement component (e.g. using Storybook)
4. Push component
5. Trigger continuous integration build
6. Replace visual component in prototype with react component
23

24. Why I think this is the future…
24

25. Benefits
§ One source of truth (the holy grail)
§ “Interactive” components (e.g. text fields)
§ “Responsive” components (e.g. resize)
§ No need to manage a separate sketch library
§ It’s the real deal
§ Designer can still work with pages
§ Designers don’t need to code
25

26. How does it work?
26

27. Setup
1. Prototyping tool connects via token to your code repository and build system
2. Components usually come with ”default”/”dummy” content that can be overridden
3. States can be changed according to the props defined
4. Designer still create “pages”
5. Interaction can be added based on “actions”/”triggers” or traditional ”hotspots”
27

28. UXPin
UXPin connects to a Git repository (command line tool is being installed as a project level dependency)
UXPin learns about the code of components stored in the repository and serializes its content
UXPin runs the build process and delivers production code to the UXPin design editor, where all the
components are identical with the production environment, fully interactive and available to designers
(even if they don’t know how to code)
UXPin allows for connecting to a Continuous Integration Server to enable automatic synchronization
between a Git repository and our design editor (every change in the production code is automatically
reflected in the components in UXPin’s design editor)
UXPin shows accurate specifications for all design projects that will show informative code snippets to
tell developers how to implement a given design
28

29. Demo time
29

30. UXPin Merge

31. UXPin Grommet Edit

32. UXPin Grommet Play

33. UXPin Grommet Code

34. UXPin Carbon Edit

35. UXPin Carbon Play

36. UXPin Carbon Components

37. UXPin Carbon Code

38. FramerX

39. FramerX Edit

40. FramerX Code

41. FramerX Style

42. Alva

43. Alva Edit

44. Modulz

45. Trade-offs
45

46. Current limitations
§ UXPin Merge
– Several components don’t work (e.g. Data table)
– Variables cannot be used (mixing traditional and react prototyping)
– CI only works from master branch
§ Framer Bridge
– Not really tried enough yet à do you know more?
§ Alva
– Not really tried enough yet à do you know more?
46

47. Summary
47

48. 48
UXPin Merge
Merge seamlessly connects to any GIT repository,
imports React.js components to UXPin’s design
editor and keeps all the versions in sync thanks to
CI integration. Whatever exists in code, exists in
UXPin, giving designers access to real coded
components without forcing them to learn coding.
Marcin Treder
https://medium.com/@marcintreder/can-designers-and-engineers-use-a-single-source-of-truth-24490697ceec

49. 49
UXPin Merge
With UXPin Merge, designers and engineers use a
single source of truth and can finally work together
without unnecessary misunderstandings and
frustrations. Guess what? The perfect
implementation of a design system is possible.
Marcin Treder
https://medium.com/@marcintreder/can-designers-and-engineers-use-a-single-source-of-truth-24490697ceec

50. My conclusion
§ The way to go!
§ Not yet ready…
§ …but hopefully soon
50

51. 51
What is your experience?

52. Links
UXPin Merge
§ https://www.uxpin.com/merge
§ https://medium.com/@marcintreder/can-designers-and-engineers-use-a-single-source-of-truth-ef10fb88a316
§ https://wikiuxpin.atlassian.net/wiki/spaces/MA/pages/646938664/How+to+Integrate+Components+with+UXPin+Merge
FramerX
§ https://www.framer.com/prototyping/
§ https://designcode.io/framer-x-react-components
§ https://www.framer.com/blog/posts/announcing-framer-bridge
Alva
§ https://meetalva.io/
Modulz
§ https://meetalva.io/
52

53. Thanks

54. Netcetera AG Zypressenstrasse71
Postfach
CH-8040Zürich
info@netcetera.com
T+41442975555
54
Marcel Kessler
Head of User Experience
marcel.kessler@netcetera.com