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
時計仕掛けのCompose
mkeeda
1
280
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
370
“あなた” の開発を支援する AI エージェント Bedrock Engineer / introducing-bedrock-engineer
gawa
11
1.8k
Domain-Driven Transformation
hschwentner
2
1.9k
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
120
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
120
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
660
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
200
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
300
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
400
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
10
1.8k
Featured
See All Featured
A Philosophy of Restraint
colly
203
16k
The Cult of Friendly URLs
andyhume
78
6.2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Producing Creativity
orderedlist
PRO
343
39k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Embracing the Ebb and Flow
colly
84
4.6k
It's Worth the Effort
3n
184
28k
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!