Overview of the UX tools which allow transforming your prototype to code or ready-to-go application: Framer.js, Fuse Tools (Fuse Open), Alva, Supernova. The presentation from BA Grodno Community meetup 20.03.2018

2. About Myself
➔ Business Analyst
➔ UX-enthusiast
➔ Can write some stuff in Python
➔ Started career in Customer
Support
➔ An old otaku (useless fact)

3. Glossary
➔ Minimal Valuable/Viable Product
That is a product, anyway. You can try to sell it to customers.
➔ Prototype
Not a product. You can show it to friends, family, and even investors. Don’t try
to sell it to customers. They won’t be happy about that.
➔ UX prototype
Focuses mainly on user experience and customer satisfaction of using a future
product.

4. How it used to be in the past

5. How it used to be in the past (bad case)

6. How it works now (in most cases)

7. Top 10 Highest Rated Prototyping Software*
1. InVision - 98%
2. Marvel - 95%
3. Axure RP - 79%
4. POP - 76%
5. Fluid UI - 70%
6. Proto.io - 62%
7. Flinto - 57%
8. UXPin - 41%
9. iRise - 36%
10. Framer Studio - 28%
*Based on G2 Satisfaction Score by g2crowd.com

8. What tools do you use for
prototyping?

9. What features are required
for a prototyping tool?

10. Must-have features nowadays
● Multiplatform
● Collaboration
● Preview on devices
● Responsive layout
● Versioning
● Diverse component configuration
● Navigation among screens
● Animation
● Export to multiples formats

11. Nice-to-have features
● Extensive documentation
● Video tutorials
● Less limitations for non-enterprise customers
● Free (no subscription required)
● Sending automatic request for making and delivering coffee from the nearest
cafe

12. From design to implementation

13. Some unexpected sh*t is about
to happen anyway.
Just take it easy.

14. What we can do (these are new principles)
➔ Closer collaboration between UX and DEV
➔ Re-using design in development
➔ Narrow the gap between a prototype and a product/feature
➔ Prototype is an MVP

15. Prototyping tools under consideration today
Alva (https://meetalva.io/)
Framer (https://framer.com/)
Supernova Studio (https://supernova.studio/)
Fuse (https://www.fusetools.com/)

16. Alva or Meet Alva
“It is a radically new digital design tool built for cross-functional product teams.
Alva lets you design interactive products based on the same components your engineers
are using for production websites. But, our mission goes way further. And guess what – we
are entirely open source.” - meetalva.com
https://github.com/meetalva/alva

17. Alva’s visual editor

18. Alva’s default patterns
Atoms:
● Button
● Copy
● Dropdown item
● Headline
● Image
● Layout
● Space
Molecules:
● Dropdown
● Hero
● Teaser
● Text

19. Alva’s main feature

20. What we’ve got
➔ Using React to customize basic components
➔ One source for design and code of the components
➔ Reusing the components

21. Alva +
● Tight collaboration between UX and DEV
● Prototype components are up-to-date with a product
● Creating and supporting design systems and style guides
● Further reusing of custom components
● Free
● Open source

22. Alva -
● Lack of documentation and tutorials
● It is a quite raw tool
● Lack of configuration in the visual editor
● Lack of default patterns
● React-focused only

23. Briefly about Framer (advantages)
● You can design in traditional way
● You can actually write code instead
● Using CoffeeScript as more light-weighted syntax of JavaScript
● Diverse component customization and animation abilities
● Export to SVG and CSS code
● Rich documentation and tutorials
● You can embed AR.js to use augmented reality in Framer

24. But… (Framer’s disadvantages)
● You’d better know JS basics
● Need much time to learn the features
● It is not free

25. Supernova products
Supernova Studio
Powerful visual editor on desktop for designing mobile apps. We will focus on it.
Supernova Cloud
Online suite for team collaboration on a prototype. It is free and has no limits for
users and projects. But it works only in a conjunction with the Studio.
The Studio is not free.

26. Supernova Studio

27. Supernova Studio: Export as code
Export a prototype as a project for:
Android
iOS
React Native
Build system configuration file and project structure, layouts, assets, drawables,
source code, localizations files and other platform specifics.

28. Supernova Studio: Localization
● Make localization during the design stage
● Check localizations in the editor
● Up-to 30 languages.
● Automatic or manual localization
● Can use built-in Google Translate API connector

29. Other Supernova’s advantages
● Powerful animation engine
● Export to Supernova Cloud
● Extensive documentation
● Video tutorials

30. Supernova -
● Import from Sketch only
● Mac only
● High price
● Magic under the hood

31. Fuse - platform for developing Android and iOS apps.
From Norway with love.

32. Own XML for designing
components, layouts, and basic
animations
JavaScript to make it alive
Real time app preview
Compiled app for
Android or iOS
How it works (in general)

33. App preview and code editor = FREE

34. Fuse Studio – a visual editor for designing app
125$ per month for a user

35. Example of a button
Attributes, classes, variables – all we love.

36. Let’s add the button on a screen

37. This is a checkbox. It is not so funny anymore.

38. Radio Buttons

39. Compare UI and the code

40. Fuse: Advantages
● A development platform
● UX and DEV are working in one environment
● Prototype = MVP
● Extensive documentation
● App preview
● Platform updates and improvements

41. Fuse: Disadvantages
● No sense to use it just for UX prototyping alone
● Need time and efforts to learn
● High price for a license

42. We need to learn. That’s it.

43. Thank you!

44. elijah.zaharov@gmail.com
https://www.facebook.com/elijah.zaharov
@averlarque