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

4.
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

5.
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

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

7.
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

8.
What is this all about?
9

9.
What is your prototyping toolbox?
13

10.
What is your prototyping workflow?
14

11.
The alternative
15

12.
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

13.
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

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

15.
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/

16.
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/

17.
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/

18.
How the workflow could be…
>_
22

19.
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

20.
Why I think this is the future…
24

21.
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

22.
How does it work?
26

23.
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

24.
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

25.
Demo time
29

26.
UXPin Merge

27.
UXPin Grommet Edit

28.
UXPin Grommet Play

29.
UXPin Grommet Code

30.
UXPin Carbon Edit

31.
UXPin Carbon Play

32.
UXPin Carbon Components

33.
UXPin Carbon Code

34.
FramerX

35.
FramerX Edit

36.
FramerX Code

37.
FramerX Style

38.
Alva

39.
Alva Edit

40.
Modulz

41.
Trade-offs
45

42.
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

43.
Summary
47

44.
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

45.
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

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

47.
51
What is your experience?

48.
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

49.
Thanks

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