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
エンジニアが見つめるLottieアニメーション
Search
Jinny You
June 19, 2024
Design
0
110
エンジニアが見つめるLottieアニメーション
"Animate & Create: Dive Into Motion Design with LottieFiles 〜Figma→Lottieを学ぼう〜"
Jinny You
June 19, 2024
Tweet
Share
More Decks by Jinny You
See All by Jinny You
디자이너와 개발자가 자주 겪는 Lottie 핸드오프 FAQ - Figma Config Watch Party Seoul
tinyjin
0
75
인디 앱 개발자와 Flutter
tinyjin
0
390
모던 웹 기술로 C++ 렌더링 엔진 테스트 자동화하기
tinyjin
0
43
그래픽 엔진 포팅 사례로 배우는 웹어셈블리 웹 컴포넌트 개발부터 디버깅, 최적화까지
tinyjin
0
340
韩国的打卡地:你喜欢海边吗?
tinyjin
0
40
LottieFiles로 시작하는 빠르고 효율적인 애니메이션 핸드오프
tinyjin
0
89
ThorVG's Lottie Model in Action
tinyjin
0
220
국민대학교 사제동행 세미나
tinyjin
0
390
Cumulus - Application Weakness Monitoring Software
tinyjin
0
56
Other Decks in Design
See All in Design
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
170
線で考える画面構成
natsuume
1
880
Карта процесса-опыта — как визуализировать сервис просто, понятно и подробно
ashapiro
0
110
Goodpatch Tour💙 / We are hiring!
goodpatch
31
860k
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
440
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.8k
実践ゼロから作らないデザインシステム SaaS × デザインシステム × プロダクトデザイン / Efficient Design System for SaaS—no need to start from scratch.
kaminashi
2
1.7k
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
380
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.4k
CMS管理画面のアクセシビリティ
magi1125
8
2.2k
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
160
#Dubois Challenge 2025: Economics
ajstarks
0
130
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Navigating Team Friction
lara
187
15k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Practical Orchestrator
shlominoach
189
11k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Transcript
エンジニアが ⾒つめる Lottieアニメーション Jinny You, LottieFiles
[email protected]
Agenda 1. 自己紹介 2. エンジニアにとってLottieとは? 3. Lottieで簡単なLandingページ 4. Studio X
LottieFiles デモ 5. Dev PortalとLottieFiles 6. まとめ
自己紹介 Jinny You (ジニ ユウ) Software Engineer, LottieFiles - Graphics
Engineの開発 - 次世代のLottieプレーヤーの開発
エンジニアにとって Lottieとは?
Lottieについて アニメーションが 必要な時
Lottieについて CSSやJSから ⼀つずつコーディング
Lottieについて キーワードから 探して
Lottieについて 少ないコードでも できる!
Lottieについて デザイナーから “こんなアニメーションください”と 聞かれた時も
Lottieについて “こんなアニメーション”だって、、、 何!???? “Lottieでしましょう!”
Lottieについて Motion Graphicsはもう誰にとっても 容易になっています
それで、Lottieが どれだけ簡単だというの?
これから、簡単なコードで Lottieを使いましょう
Lottieで作る 簡単なLandingページ
質問があります
皆さんの中で HTMLやJSができる⽅が いらっしゃいますか?
最近はコーディングができる⽅が 増えてると感じます
Lottieがあれば いいかな?
お好きな アニメーションを選び! https://lottiefiles.com/featured
1。 2。 3。
None
数⾏のコードでアニ メーションを実装し ました
アニメーションと⼀緒に きれいなページ
あまり、難しく なかったですね
複雑なアニメーションは Lottieで協業すればどうでしょうか
LottieではWebサイトやアプリに アニメーションを効果的に 作れます。
Studio X LottieFiles デモ
Dev PortalとLottieFiles
LottieFilesは皆さんの 便利なLottie適⽤のために、 Dev PortalとSupportグループを 提供しています https://developers.lottiefiles.com
どこでも使える 便利なLibrary - Android - iOS - React Native -
Flutter - Windows - React
全プラットフォームを サポートする 効果的なRuntime ⚡
Lottieについて 質問があれば いつでもご利⽤ください (FAQ, Library, Integration, Support…) https://developers.lottiefiles.com
まとめ
まとめ 複雑な アニメーションは ✔ Lottieで開発者と ラボレーション Lottieを 実装するのは ✔ Dev
Portalから 情報を貰う 👈 🎨 デザイナー 開発者 👉
Tech質問やIssueについては、 お気軽に連絡してください。 Jinny You (ジニ ユウ) Software Engineer, LottieFiles -
linkedin.com/in/jinui - x.com/jinuiyou - speakerdeck.com/tinyjin