Creating quick Demos

Creating quick Demos

with Figma, jQuery and Netlify - Lessons Learned

Camunda Frontend Chapter

Cd305a96005ee7ad58a272fa5abcbec1?s=128

Niklas Kiefer

March 30, 2020
Tweet

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!