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
99
エンジニアが見つめる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
43
인디 앱 개발자와 Flutter
tinyjin
0
350
모던 웹 기술로 C++ 렌더링 엔진 테스트 자동화하기
tinyjin
0
28
그래픽 엔진 포팅 사례로 배우는 웹어셈블리 웹 컴포넌트 개발부터 디버깅, 최적화까지
tinyjin
0
290
韩国的打卡地:你喜欢海边吗?
tinyjin
0
30
LottieFiles로 시작하는 빠르고 효율적인 애니메이션 핸드오프
tinyjin
0
72
ThorVG's Lottie Model in Action
tinyjin
0
200
국민대학교 사제동행 세미나
tinyjin
0
350
Cumulus - Application Weakness Monitoring Software
tinyjin
0
49
Other Decks in Design
See All in Design
“使いやすい”が生産性を変える!業務を効率化するためのUX/UI設計ポイント
ncdc
2
280
ポートフォリオ_藤田歩希(ほまれ)
akifujita_homarecreate
0
460
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
0
190
NAHO SHIMONO_Portfolio2025
nahohphp
0
490
Дизайн услуги через её визуализацию с Картой процесса-опыта
ashapiro
0
310
入社3ヶ月目のプロダクトデザイナー視点で見たヤプリ / Joining Yappli as a Product Designer: My Perspective After 90 Days
yappli_developers
0
200
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
160
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
9.1k
今日からできる実践アクセシビリティSNSというかXでaltをつけよう
securecat
1
190
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
240
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
aokashi
1
240
共通言語としてのデザイントークンと Figmaでの運用
kamy0042
0
340
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.6k
Raft: Consensus for Rubyists
vanstee
137
6.9k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Adopting Sorbet at Scale
ufuk
76
9.3k
Being A Developer After 40
akosma
91
590k
Why Our Code Smells
bkeepers
PRO
336
57k
The World Runs on Bad Software
bkeepers
PRO
68
11k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.8k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
[RailsConf 2023] Rails as a piece of cake
palkan
54
5.5k
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