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
Writing documentation can be fun with plugin system
okuramasafumi
0
120
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
400
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
Software Architecture
hschwentner
6
2.1k
Introduction to kotlinx.rpc
arawn
0
630
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
120
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
240
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
200
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
5
3.8k
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
300
Featured
See All Featured
A Tale of Four Properties
chriscoyier
158
23k
YesSQL, Process and Tooling at Scale
rocio
171
14k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
We Have a Design System, Now What?
morganepeng
51
7.4k
Why Our Code Smells
bkeepers
PRO
335
57k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Automating Front-end Workflow
addyosmani
1367
200k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Typedesign – Prime Four
hannesfritz
40
2.5k
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!