Creating quick Demos

with Figma, jQuery and Netlify - Lessons Learned

Camunda Frontend Chapter

Transcript

1. Creating quick Demos with Figma, jQuery and Netlify Lessons Learned Niklas
2. 2 Background Show Demo
3. 3 General Process
4. 4 Example • Sketch on Excalidraw • Draw on Figma • Transform Figma to HTML • Create simple HTML page • Push to Github • Deploy to Netlify
5. 5 Lessons Learned Discussion
6. 6 Lessons Learned - Sketching + • Fastest way to express ideas • Fast iterations - • Describe interactions
7. 7 Lessons Learned - Sketching + • Fastest way to express ideas • Fast iterations - • Interactions
8. 8 Lessons Learned - Figma + • Good user experience • (High) Low fidelity prototyping • Web near development • Component libraries • Pretty good in what it is supposed to do - • Transition to Real prototype
9. 9 Lessons Learned - jQuery + • Easy way to create quick interactions • jQuery.ui • Selector library • Create variants - • State management • Reactivity
10. 10 Netlify + • Fast deploy • Webhook subscriptions • For free • Quickest way to show and test high fidelity prototypes - • ?
11. 11 Resources • Figma 2 HTML Converter • Prototyping Example Repo
12. Thank you!