Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Creating quick Demos
Search
Niklas Kiefer
March 30, 2020
Programming
0
43
Creating quick Demos
with Figma, jQuery and Netlify - Lessons Learned
Camunda Frontend Chapter
Niklas Kiefer
March 30, 2020
Tweet
Share
More Decks by Niklas Kiefer
See All by Niklas Kiefer
Optimizing tidy: Practical Insights with the React Compiler
pinussilvestrus
0
6
a11y testing: tech talk
pinussilvestrus
0
3
Tech Talk: a11y testing at the HTO team
pinussilvestrus
0
39
a11y testing
pinussilvestrus
0
81
Taking Templates to the Limit
pinussilvestrus
0
44
What the $ref - Create composable JSON Schemas
pinussilvestrus
0
64
Automatic a11y testing with axe
pinussilvestrus
0
28
Roller coaster mining with Camunda Cloud
pinussilvestrus
0
18
How to break down
pinussilvestrus
0
42
Other Decks in Programming
See All in Programming
What's new in Spring Modulith?
olivergierke
1
160
Devvox Belgium - Agentic AI Patterns
kdubois
1
130
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
330
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
620
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
310
チームの境界をブチ抜いていけ
tokai235
0
200
CSC305 Lecture 08
javiergs
PRO
0
250
Devoxx BE 2025 Loom lab
josepaumard
0
110
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
180
Claude Agent SDK を使ってみよう
hyshu
0
1.3k
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
1
340
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
350
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Bash Introduction
62gerente
615
210k
A designer walks into a library…
pauljervisheath
209
24k
Building Applications with DynamoDB
mza
96
6.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Building Adaptive Systems
keathley
44
2.8k
4 Signs Your Business is Dying
shpigford
185
22k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Making Projects Easy
brettharned
120
6.4k
Transcript
Creating quick Demos with Figma, jQuery and Netlify Lessons Learned
Niklas
2 Background Show Demo
3 General Process
4 Example • Sketch on Excalidraw • Draw on Figma
• Transform Figma to HTML • Create simple HTML page • Push to Github • Deploy to Netlify
5 Lessons Learned Discussion
6 Lessons Learned - Sketching + • Fastest way to
express ideas • Fast iterations - • Describe interactions
7 Lessons Learned - Sketching + • Fastest way to
express ideas • Fast iterations - • Interactions
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 Lessons Learned - jQuery + • Easy way to
create quick interactions • jQuery.ui • Selector library • Create variants - • State management • Reactivity
10 Netlify + • Fast deploy • Webhook subscriptions •
For free • Quickest way to show and test high fidelity prototypes - • ?
11 Resources • Figma 2 HTML Converter • Prototyping Example
Repo
Thank you!