Creating quick Demos

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!