Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Creating quick Demos

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Niklas Kiefer Niklas Kiefer
March 30, 2020
Programming
63
0

Creating quick Demos

with Figma, jQuery and Netlify - Lessons Learned

Camunda Frontend Chapter

Avatar for Niklas Kiefer

Niklas Kiefer

March 30, 2020

More Decks by Niklas Kiefer

See All by Niklas Kiefer
Optimizing tidy: Practical Insights with the React Compiler
Avatar for Niklas Kiefer pinussilvestrus
0
15
a11y testing: tech talk
Avatar for Niklas Kiefer pinussilvestrus
0
11
Tech Talk: a11y testing at the HTO team
Avatar for Niklas Kiefer pinussilvestrus
0
59
a11y testing
Avatar for Niklas Kiefer pinussilvestrus
0
90
Taking Templates to the Limit
Avatar for Niklas Kiefer pinussilvestrus
0
69
What the $ref - Create composable JSON Schemas
Avatar for Niklas Kiefer pinussilvestrus
0
78
Automatic a11y testing with axe
Avatar for Niklas Kiefer pinussilvestrus
0
45
Roller coaster mining with Camunda Cloud
Avatar for Niklas Kiefer pinussilvestrus
0
25
How to break down
Avatar for Niklas Kiefer pinussilvestrus
0
70

Other Decks in Programming

See All in Programming
AWS DevOps AgentのAzure接続機能を検証して見えた活用法／Use Cases Verified for the AWS DevOps Agent's Azure Connectivity Feature
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
1
230
仕様駆動開発へのトライを機に チームに適合する手法を模索し続けている話
Avatar for freee freee
PRO
0
500
【QA Test Talk Vol.8】AI-DLC による Whole Team Approach の加速
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
0
180
関東Kaggler会_NVIDIA_Nemotron_コンペ_振り返り
Avatar for rick rick_ds
0
560
Go言語とトイモデルで学ぶTransformerの気持ち / fukuokago23-transformer
Avatar for monochromegane monochromegane
0
170
AI Engineeringは、AIプロダクトだけのものか？ 〜AIがソフトウェアを作る時代の新しい当たり前〜 / No AI in your product. AI Engineering in your development.
Avatar for r-kagaya rkaga
4
410
React本体のコードリーディング
Avatar for high-g high_g_engineer
1
140
数百円から始めるRuby電子工作
Avatar for Tarosa tarosay
0
150
Claude Code全社展開のためにやったことn選～プラグイン302個・コミッター271人を支えるために～
Avatar for Kenichi Takahashi kenchan
5
1.5k
Android CLI
Avatar for Sungyong An fornewid
0
220
複数の Claude Code が"放置"されてしまう問題をCLI ダッシュボードを自作して解決した話
Avatar for sumihiro3 sumihiro3
1
680
5分で問診！Composer セキュリティ健康診断
Avatar for コドモン開発チーム codmoninc
0
980

Featured

See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
6k
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
940
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
1.1k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
410
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
400
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
250
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
470
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.2k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.7k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
300

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!