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

Creating quick Demos

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Niklas Kiefer Niklas Kiefer
March 30, 2020
Programming
55
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
10
a11y testing: tech talk
Avatar for Niklas Kiefer pinussilvestrus
0
6
Tech Talk: a11y testing at the HTO team
Avatar for Niklas Kiefer pinussilvestrus
0
49
a11y testing
Avatar for Niklas Kiefer pinussilvestrus
0
88
Taking Templates to the Limit
Avatar for Niklas Kiefer pinussilvestrus
0
58
What the $ref - Create composable JSON Schemas
Avatar for Niklas Kiefer pinussilvestrus
0
73
Automatic a11y testing with axe
Avatar for Niklas Kiefer pinussilvestrus
0
41
Roller coaster mining with Camunda Cloud
Avatar for Niklas Kiefer pinussilvestrus
0
22
How to break down
Avatar for Niklas Kiefer pinussilvestrus
0
58

Other Decks in Programming

See All in Programming
それはエンジニアリングの糧である：AI開発のためにAIのOSSを開発する現場より / It serves as fuel for engineering: insights from the field of developing open-source AI for AI development.
Avatar for nrs nrslib
1
830
今からFlash開発できるわけないじゃん、ムリムリ! (※ムリじゃなかった!?)
Avatar for Sora Arakawa arkw
0
190
ローカルで稼働する AI エージェントを超えて / beyond-local-ai-agents
Avatar for geeawa gawa
2
260
感情を設計する
Avatar for nakamichi ichimichi
5
1.3k
安いハードウェアでVulkan
Avatar for Fadis fadis
1
920
PDI: Como Alavancar Sua Carreira e Seu Negócio
Avatar for Marcel dos Santos marcelgsantos
0
110
「効かない！」依存性注入（DI）を活用したAPI Platformのエラーハンドリング奮闘記
Avatar for Maki Hayashi mkmk884
0
310
RSAが破られる前に知っておきたい 耐量子計算機暗号(PQC)入門 / Intro to PQC: Preparing for the Post-RSA Era
Avatar for mackey0225 mackey0225
3
120
へんな働き方
Avatar for Yusuke Wada yusukebe
6
2.9k
AWS re：Invent 2025の少し振り返り ＋ DevOps AgentとBacklogを連携させてみた
Avatar for Satoshi Kaneyasu satoshi256kbyte
2
150
Feature Toggle は捨てやすく使おう
Avatar for gennei gennei
0
430
LM Linkで(非力な！)ノートPCでローカルLLM
Avatar for 瀬尾佳隆 seosoft
0
410

Featured

See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.4k
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
260
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
118
110k
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
96
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
250
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
430
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
310
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
110
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.7k
Design in an AI World
Avatar for tapps tapps
0
190
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.8k

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!