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
40
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
Tech Talk: a11y testing at the HTO team
pinussilvestrus
0
19
a11y testing
pinussilvestrus
0
70
Taking Templates to the Limit
pinussilvestrus
0
35
What the $ref - Create composable JSON Schemas
pinussilvestrus
0
52
Automatic a11y testing with axe
pinussilvestrus
0
11
Roller coaster mining with Camunda Cloud
pinussilvestrus
0
14
How to break down
pinussilvestrus
0
22
Move from webpack to vite
pinussilvestrus
0
160
JSON Schema Validation @Camunda Modeler
pinussilvestrus
0
210
Other Decks in Programming
See All in Programming
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
670
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
200
Unity Android XR入門
sakutama_11
0
140
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
時計仕掛けのCompose
mkeeda
1
280
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
360
Writing documentation can be fun with plugin system
okuramasafumi
0
120
Ruby on cygwin 2025-02
fd0
0
140
CNCF Project の作者が考えている OSS の運営
utam0k
5
690
sappoRo.R #12 初心者セッション
kosugitti
0
230
CI改善もDatadogとともに
taumu
0
110
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
40
2.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Documentation Writing (for coders)
carmenintech
67
4.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
The World Runs on Bad Software
bkeepers
PRO
67
11k
The Invisible Side of Design
smashingmag
299
50k
Fireside Chat
paigeccino
34
3.2k
GitHub's CSS Performance
jonrohan
1030
460k
Code Reviewing Like a Champion
maltzj
521
39k
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!