Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The future of Prototpying

120 views

Published on

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.

Published in: Design
  • Be the first to comment

  • Be the first to like this

The future of Prototpying

  1. 1. Marcel Kessler uxcamp.ch, 2019-05-11 Demo and discussion of prototyping with coded components The future of prototyping
  2. 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. 3. am I? Who
  4. 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. 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. 6. UXO – the Netcetera User Experience Office Switzerland Austria Macedonia 15 UX experts Research Concept / Design Implementation Full service in-house design agency
  7. 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. 8. What is this all about? 9
  9. 9. What is your prototyping toolbox? 13
  10. 10. What is your prototyping workflow? 14
  11. 11. The alternative 15
  12. 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. 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. 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. 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. 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. 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. 18. How the workflow could be… >_ 22
  19. 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. 20. Why I think this is the future… 24
  21. 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. 22. How does it work? 26
  23. 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. 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. 25. Demo time 29
  26. 26. UXPin Merge
  27. 27. UXPin Grommet Edit
  28. 28. UXPin Grommet Play
  29. 29. UXPin Grommet Code
  30. 30. UXPin Carbon Edit
  31. 31. UXPin Carbon Play
  32. 32. UXPin Carbon Components
  33. 33. UXPin Carbon Code
  34. 34. FramerX
  35. 35. FramerX Edit
  36. 36. FramerX Code
  37. 37. FramerX Style
  38. 38. Alva
  39. 39. Alva Edit
  40. 40. Modulz
  41. 41. Trade-offs 45
  42. 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. 43. Summary 47
  44. 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. 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. 46. My conclusion § The way to go! § Not yet ready… § …but hopefully soon 50
  47. 47. 51 What is your experience?
  48. 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. 49. Thanks
  50. 50. Netcetera AG Zypressenstrasse71 Postfach CH-8040Zürich info@netcetera.com T+41442975555 54 Marcel Kessler Head of User Experience marcel.kessler@netcetera.com

×