Text animation
文字を順番に表示
文字・単語・行ごとに表示するタイミングをずらして、見出しや本文に動きをつけます。
元のレイアウト・文字・色を一切変えずに、動くモックアップを作成。
コードは不要。HTML1ファイルに書き出して、手軽に共有できます。
7日間すべての機能を無料で。カード登録不要。 公開準備中
YOUR FIGMA. NOW IN MOTION.実際のプラグイン画面
THE MOTION PLAYGROUND 44 PRESETS
44のプリセットから、代表的な6つをご紹介。文字の表示、スクロール、ホバーなどの動きを枠の中で確認できます。
Parallax
異なる速度で動かす
スクロールに合わせてレイヤーを異なる速度で移動し、奥行きを表現します。
Sticky
スクロール中に要素を固定
画像や見出しを固定したまま、隣のコンテンツをスクロールできます。
Carousel
カードを自動で切り替え
カードを一定の間隔で切り替える、自動再生カルーセル。
Marquee
文字や要素を連続で流す
文字や要素を途切れなく流す、無限ループ。
ホバー / タップで試す
Hover interaction
ホバーでボタンの色を変更
カーソルを重ねたときの色の変化を設定。見本はホバーやタップでも試せます。
サンプルデザインで効果を再現したHTMLデモです。枠の中だけで自動再生します。
DESIGN FIRST. MOTION NEXT.
元のFigmaデザインを変更しない
フレームを選んで読み込むだけ。レイアウト・文字・色はFigmaのまま、Live Scrollで動きだけを設定します。
コード不要で動きを調整
44のプリセットから動きを選び、速度・方向・タイミングを調整。ライブプレビューで結果を確認できます。
HTML1ファイルで簡単に共有
動くモックアップをHTMLに書き出して、そのまま渡せます。受け取った人はブラウザで開くだけで、動きを確認できます。
SIMPLE, HONEST PRICING
どちらのプランも、すべての機能を。利用する立場に合わせてお選びください。
Personal
個人・個人事業主の方
US$2/ 月・1人
米ドル・月額
- 44のモーションプリセット
- すべてのモーション編集機能
- HTMLプロトタイプ出力
- 日本語・英語のUI
- 7日間の全機能トライアル
Business
法人業務で利用する方
US$5/ 月・1人
米ドル・月額
- 44のモーションプリセット
- すべてのモーション編集機能
- HTMLプロトタイプ出力
- 日本語・英語のUI
- 7日間の全機能トライアル
機能は共通。用途に合わせた2つのプラン。
1契約につき1人分。利用には外部アカウントが必要です。無料期間中のカード登録は不要で、有料プランはご自身で購入した時点から毎月更新されます。お支払いと解約はStripeで行います。
A FEW MORE THINGS
はじめる前に、気になること。
Live Scrollは何ができるプラグインですか？
FigmaのWebデザインに、スクロール、テキスト、ホバーなどのモーションを追加し、ライブプレビューで確認できます。完成した動きはHTMLプロトタイプとして書き出せます。
コードを書く必要はありますか？
必要ありません。Figmaのレイヤーを選び、プリセットから動きを追加して、速度や方向、タイミングを調整します。
元のFigmaデザインは変わりますか？
Live Scrollで動きを設定しても、元のレイアウト・文字・色は変更しません。見た目の編集はFigmaで行い、モーション設定はFigmaのフレームに保存します。
PersonalとBusinessで機能は違いますか？
機能は同じです。個人・個人事業主はPersonal（月額US$2）、法人業務はBusiness（月額US$5）を選択します。どちらも1人分のライセンスです。
無料トライアル後、自動で課金されますか？
無料トライアルの開始にカード登録は不要です。ご自身で有料プランを購入しない限り、トライアル終了だけで課金されることはありません。購入後は月額で更新され、Stripeの管理画面から期間末での解約を予約できます。
書き出したHTMLでWebサイトを公開できますか？
出力するHTMLは、動きを確認・共有するためのプロトタイプです。公開用サイトの構築や自動レスポンシブ化は対象外です。
日本語と英語に対応していますか？
プラグインのUI、プリセット、ガイドは日本語と英語を切り替えられます。Figmaのレイヤー名や、デザイン内の本文を自動翻訳することはありません。
LESS EXPLAINING. MORE EXPERIENCING.
元のデザインはそのまま。動きをつけて、HTMLで共有。
Figmaでプラグインを見る